css盒子的模型

1.看透网页布局的本质

1.利用css设置好盒子的大小，然后拜访盒子的位置。
2.吧网页元素比如文字图片等等，放入盒子里面。
这就是网页布局的本质
关键点就是要弄明白盒子有什么特点

2.盒子模型

1.盒子模型有元素的内容，边框，内边距，和外边距，组成。
2.盒子里面的文字和图片等元素是 内容区域
3.盒子的厚度我们成为盒子的边框
4.盒子内容与边框的距离是内边距
5.盒子与盒子之间的距离是外边距

3.盒子边框

边框的样式：
1.none：没有边框即忽略所有边框的宽度（默认值）
2.solid：边框为单实线（最为常用的）
3.dashed：边框为虚线
4.dotted：边框为点线

3.1边框综合设置

3.2盒子边框写法总结表

3.3表格的细线边框

1.collapse单词是合并的意思
2.border-collapse:collapse;表示相邻边框合并在一起。

4.内边距

padding属性用于设置内边距。是指边框与内容之间的距离。

padding不影响盒子大小情况：
如果没有给一个盒子指定宽度，此时，如果给这个盒子指定padding，则不会撑开盒子。

5.外边距

margin属性用于设置外边距。margin就是控制盒子和盒子之间的距离。

5.1块级盒子水平居中

让一块级盒子实现水平居中必须：
1.盒子必须指定了宽度
2.然后就给左右的外边距都设置为auto
常见的写法
1.margin-left:auto； margin-right:auto;
2.margin:auto;
3.margin:0 auto;

5.2文字居中和盒子居中区别

1.盒子内的文字水平居中是 text-align:center,而且还可以让行内元素和行内块居中对齐
2.块级盒子水平居中 左右margin 该为 auto

5.3外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
（1）相邻块元素垂直外边距的合并
1.当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-botto
2.下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
3.取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷)。
（2）嵌套块元素垂直外边距的合并
1.对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
2·父元素的上外边距会与子元素的上外边距发生合并
3.合并后的外边距为两者中的较大者