CSS - Box(盒子模型)

CSS - Box(盒子模型) 首页 / CSS入门教程 / CSS - Box(盒子模型)

网页上可以显示的组件由一个或多个矩形框组成。

CSS盒子模型是一个包含许多隔离专区,例如边缘(edge),边框(border),填充(padding)和material。它用于开发网页的设计和结构。它可以用作一组工具来个性化不同组件的布局。根据CSS盒模型,Web浏览器将每个元素提供为一个方形棱镜。

下图说明了 width , height ,padding,border和 margin 指示属性将在网页上占据多少空间。

CSS Box Model

CSS 框模型包含CSS中的不同属性。这些在下面列出。

  • Border
  • Margin
  • Padding
  • Content

现在,无涯教程将详细确定属性。

Border 字段

它是填充框和边距之间的区域。它的比例取决于边界的宽度和高度。

Margin 字段

该线段由边界和边界边缘之间的区域组成。边距区域的比例等于边距框的宽度和高度。

Padding 字段

该字段需要填充组件,本质上,此区域是主题区域周围和边框内的空间。填充框的高度和宽度决定其比例。

Content 字段

此区域中包含诸如文本,照片或其他数字媒体之类的材料。

元素宽高度

通常,当您使用CSS宽度和高度资源分配属性的宽度和高度时,这意味着您只是放置了该组件的主题区域的高度和宽度。

元素框可以在网页上占据的特定区域的度量如下:

Box Size CSS属性
Heightheight + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
Widthwidth + padding-left + padding-right + border-left + border-right + margin-left + margin-right

例子1

在这里,为了解释CSS盒模型,无涯教程有一个实例。

<!DOCTYPE html> 
<head> 
<title>CSS Box Model</title> 
<style> 
            .main 
{ 
                font-size:30px; 
                font-weight:bold; 
                Text-align:center; 
            } 
            .gfg 
{ 
                margin-left:50px; 
                border:50px solid Purple; 
                width:300px; 
                height:200px; 
                text-align:center; 
                padding:50px; 
            } 
            .gfg1 
{ 
                font-size:40px; 
                font-weight:bold; 
                color:black; 
                margin-top:60px; 
                background-color:purple; 
            } 
            .gfg2 
{ 
                font-size:20px; 
                font-weight:bold; 
                background-color:white; 
            } 
</style> 
</head> 
<body> 
<div class = "main">CSS Box-Model Property</div> 
        	<div class = "gfg"> 
            <div class = "gfg1">Learnfk</div> 
            <div class = "gfg2">A best portal for learn Technologies</div> 
</div> 
</body> 
</html>

编译完上面的代码后,您将获得以下输出。

无涯教程网

CSS Box Model

例子2

在这里,还有一个插图来描述CSS盒子模型。

链接:https://www.learnfk.comhttps://www.learnfk.com/css/css-box-model.html

来源:LearnFk无涯教程网

<!DOCTYPE html> 
<head> 
<style> 
        .main
      { 
            font-size:30px; 
            font-weight:bold; 
            text-align:left; 
        } 
#box 
     { 
            padding-top:30px; 
            width: 300px; 
            height: 100px; 
            border: 40px solid red; 
            margin: 30px; 
            text-align:center; 
            font-size:32px; 
            font-weight:bold; 
        } 
</style> 
</head>       
<body> 
        <div class="main">CSS Box-Model Property</div> 
        <div id="box">Learnfk</div> 
</body> 
</html>

执行完代码后,您将获得以下输出:

CSS Box Model

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

趣谈Linux操作系统 -〔刘超〕

从0打造音视频直播系统 -〔李超〕

.NET Core开发实战 -〔肖伟宇〕

深入浅出云计算 -〔何恺铎〕

正则表达式入门课 -〔涂伟忠〕

说透元宇宙 -〔方军〕

快手 · 移动端音视频开发实战 -〔展晓凯〕

零基础学Python(2023版) -〔尹会生〕

手把手带你搭建推荐系统 -〔黄鸿波〕

好记忆不如烂笔头。留下您的足迹吧 :)