CSS盒子模型

CSS盒子模型

在浏览器下，每一个html元素都会被解析为一个装有东西的盒子。盒子本身有自己的边框（border），盒子里的内容到盒子边框的距离称为填充（padding），盒子边框与其它盒子之间的距离为边界（margin）。

在css 模型设计中，元素真实的宽度和高度不仅仅由width和height来决定，还包括内边距、外边距、边框来组成。

如下图所示：

参考上面的盒子模型视图对比下面的示例演示：

盒子模型--边框

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

如下面代码为div来设置边框粗细为2px、样式为实心的、颜色为红色的边框：

1 2 3

div{      border : 2px   solid   red ; }

上面是border代码的缩写形式，可以分开写：

1 2 3 4 5

div{      border-width : 2px ;      border-style : solid ;      border-color : red ; }

注意：

1、border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:border-color:#888;//前面的井号不要忘掉。

示例：

现在有一个问题，如果有想为p标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？css样式中允许只为一个方向的边框设置样式：

li{border-bottom:3px solid #333;}

同样可以使用下面代码实现其它三边上、右、左边框的设置：

1 2 3

border-top : 1px  solid  red ; border-right : 1px  solid  red ; border-left : 1px  solid  red ;

 

盒子模型--宽度和高度

盒子模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以外的内容范围，因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

元素的高度也是同理。

 

盒子模型--填充

元素内容与边框之间是可以设置距离的，称之为填充。填充也可分为上、右、下、左。如下代码：

div{padding:20px 10px15px 30px;}

顺序一定不要搞混。可以分开写上面代码：

1 2 3 4 5 6

div{     padding-top : 20px ;     padding-right : 10px ;     padding-bottom : 15px ;     padding-left : 30px ; }

如果上、右、下、左的填充都为10px;可以这么写

1	div{ padding : 10px ;}

如果上下填充一样为10px，左右一样为20px，可以这么写：

1	div{ padding : 10px  20px ;}

 

盒子模型--边界

元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：

1	div{ margin : 20px  10px  15px  30px ;}

也可以分开写：

1 2 3 4 5 6

div{     margin-top : 20px ;     margin-right : 10px ;     margin-bottom : 15px ;     margin-left : 30px ; }

如果上右下左的边界都为10px;可以这么写：

1	div{  margin : 10px ;}

如果上下边界一样为10px，左右一样为20px，可以这么写：

1	div{  margin : 10px  20px ;}

总结一下：padding和margin的区别，padding在边框里，margin在边框外。