CSS：盒子模型

盒子模型

盒子模型属性

网页中的所有元素都可以看成一个个的盒子，盒子模型由以下四部分组成：外边距、边框、内边距、内容

CSS就是控制盒子的尺寸、位置等，来实现网页的布局

<style type="text/css">
.box{
    margin: 15px;
    border: 5px solid blue;
    padding: 10px;
    width: 80px;
    height: 30px;
    background-color: #90EE90;
}
</style>

<div class="box">这是内容</div>
           

margin

外边框（margin）是围绕元素边框的空白区域，有四个单边属性：margin-top、margin-right、margin-bottom、margin-left

块级元素设置盒子居中：margin: 0px auto;

注意：

1. 可以使用负值
2. margin不影响盒子大小
3. 去掉页面中所有标签的外边距：*{margin:0px;}

padding

内边距（padding）在边框和内容区之间，有四个单边属性：padding-top、padding-right、padding-bottom、padding-left

padding:a; 四个方向都是a

padding:a,b; 上下a，左右b

padding:a,b,c; 上a，左右b，下c

padding:a,b,c,d; 上a右b下c左d

padding:auto; 自适应，居中

padding:0,auto; 左右居中

注意：

1. 不可以使用负值
2. padding影响盒子的大小
3. 去掉页面中所有标签的内边距：*{padding:0px;}

border

边框有三个方面：宽度、样式和颜色，边框绘制在元素背景之上。

边框的宽度：border-width

边框的样式：border-style

边框的颜色：border-color

上右下左：border-top、border-right、border-bottom、border-left

可以使用简写属性border设置所有边框属性
border:3px solid(实线)/dashed(虚线)/dotted(点线)/double(双实线) red;   /*边框的样式不能省略*/
           

标签的内外边距

块级元素

div h1-h6 p ul ol li dl dt dd table form

1. 独立占一行
2. 有宽和高的属性
3. 可以嵌套块级元素，行内元素，行内块元素
4. 上下的外边距取大值，左右的外边距累加，内边距上下左右累加

行内元素

span strong b em i a

1. 在同一行显示
2. 没有宽和高的属性
3. 可以嵌套行内元素，行内块元素
4. 上下的外边距、内边距塌陷，左右的外边距、内边距累加

行内块元素

img input select option textarea

1. 在同一行显示
2. 有宽和高的属性
3. 上下的外边距、内边距累加，左右的外边距、内边距累加

标准盒模型和怪异盒模型

加上（!DOCTYPE HTML）为标准盒模型，不加为怪异盒模型，IE8以上自动变为标准盒模型。

怪异盒模型（IE盒模型）

内容的宽和高包括内边距和边框

比如：一个盒子的宽度为200px，高300px，内边距10px，边框为3px，外边距为20px。

盒子大小：

宽：200px;

高：300px;

所占空间：

宽：200+20+20=240;

高：300+20+20=340;

标准盒模型

内容的宽和高不包括内边距和边框

比如：一个盒子的宽度为200px，高300px，内边距10px，边框为3px，外边距为20px。

盒子大小：

宽：200+10+10+3+3=226;

高：300+10+10+3+3=326;

所占空间：

宽：200+10+10+3+3+20+20=266;

高：300+10+10+3+3+20+20=366;

CSS3新特性

box-sizing：改变盒子模型的方式

box-sizing:content-box/border-box（忽略了内边距和边框）