CSS笔记-5：网页的盒子模型

盒子模型就是将网页中的所有元素的布局看作盒子，通过将盒子的移动与修改样式并向里面填充内容来达到网页布局的效果。

css中的盒子模型

css盒子模型用于封装周围的html元素，包括边框、内外边距、实际内容

上面的是一个css盒子的标准模型。

border

border控制的是盒子的边框，比如说要控制一个div盒子的边框，就可以用border的相关属性。
border的属性包括border-width（边框的粗细）、border-style（边框的样式）、border-color（边框颜色）。
border-style是比较复杂的一点，它又分为solid（实线）、dashed（虚线）、dotted（点线）、double（双线，且两条线的粗细与内距的和为上面的粗细值）。还有几个3d效果的因为兼容性问题，在此不做记录。
边框的属性在实践中可以简写，并且没有先后顺序。

div{
	border: 1px dotted blue;
	}

若只设置上边框，则border-top:1px dotted blue;
表格边框和细线的控制也可以使用border进行，比如

table, td{
	border: 1px solid black;
	}

但是这样的写法由于左边的单元格和右边的单元格靠在一起会导致中间的公共边比设置值宽一倍，所以需要使用
border-collapse:collpse;
以合并相邻的边框。
注意：边框的粗细会影响盒子的大小，如果严格规定了盒子的大小，需要在设置盒子时把实际值与设置的边框值相加得到规定的大小才行

padding

padding的使用方法与border相似，主要控制的是内容与边框的距离。
一般来说，设置padding值需要padding-top、padding-left等这样一个个设置，但是css提供了一套简写方法

以上的写法是padding的简写形式。
注意：padding也会影响盒子的大小，在指定好盒子大小后改变内边距会让盒子变大，但是如果没有指定高度（宽度）的话高度（宽度）不会发生变化。
在实际开发中，在不同元素所在的盒子中，如果不强制规定盒子的宽度而是使用相等内边距的话，会使页面设置更加灵活且样式统一。

margin

margin可以控制盒子与盒子间的距离，与padding的设置和简写方法相同，也是分为上下左右四个方向。
利用外边距也可以实现块级盒子的水平居中，但是前提为盒子被指定了宽度。其写法为：margin:0 auto;
前一个0代表上下边距为0，后面auto表示在页面中自动居中。

嵌套块元素垂直外边距塌陷问题的解决方案

当有两个父子级别的块元素需要调整上边距时，父元素会塌陷较大的块元素边距值，最后两个元素的移动值会变为下移值中的最大者。
解决方法：
1.为父元素定义 上边框(可以指定为transparent）
2.为父元素定义 上内边距
3.为父元素添加overflow:hidden;

由于一开始网页会自带默认的内外边距，所以在用css做网页布局之前，第一行代码应该为

*{                //使用*是为了让它有更低的权重，以便后面修改布局
	margin: 0;
	padding: 0;
}

一般行内元素尽量只设置左右内外边距，因为行内元素的上下边距一般不会发生改变。