如何组建CSS盒模型

这篇文章主要为大家展示了“如何组建CSS盒模型”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何组建CSS盒模型”这篇文章吧。

W3C组织建议把所有网页上的对象都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对象包括段落、列表、标题、图片以及层。

盒模型主要定义四个区域MBPC：边界(margin) 、边框(border) 、填充(padding)和内容(content) 。

CSS盒模型设置

CSS盒模型涉及到边界[margin]、边框[border]、填充[padding]三个关键概念

（1）边界[margin]

Margin：顶（margin-top）、右（margin-right）、底（margin-bottom）、左（margin-left）--四个边距按顺时针方向排列

基本语法：

margin-top：长度单位 | 百分比单位 | auto

margin:20px 40px 60px 80px;/* 上|右|下|左*/

margin:20px 40px 60px;/* 上|右左|下*/

margin:20px 40px; /* 上下|左右*/

margin:20px; /* 上右下左均相同*/

（2）边框[border]

border-width: thin、medium、thick 、length ；复合属性，分top、right、bottom、left四个子属性；

border-style :none|dotted|dashed| solid|double|groove[凹型线］|ridge ［凸型线］ |inset ［嵌入线］ |outset ［嵌出线］;

border-color: 颜色关键字 | RGB值 ;

Border:边框粗细 边框样式 边框颜色;

（3）填充[padding]

元素内边界主要是指边框和内部元素之间的空白距离，利用padding属性设置元素内的边界时，也包括5个属性，同样也有四种设置方法。

基本语法：

padding:长度 | 百分比

padding-top、padding-right、padding-bottom:同上

padding:20px 30px 40px 60px;/**/

padding:20px 30px 40px; /* 上|右|下|左*/

padding:20px 30px; /* 上|左右|下*/

padding:20px; /* 上右下左均相同*/

以上是“如何组建CSS盒模型”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！