几招教你组建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; /* 上右下左均相同*/

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！