CSS中将每一个元素都设置为了一个矩形的盒子，便于方便的页面布局。
盒子模型
盒子的组成部分
- 内容区，内边距，边框，外边距。
内容区
边框
边框必须指定的三个样式
- border-width：边框的宽度；
- 如果指定了4个值，会分别设置给：上，右，下，左。（顺时针方向）
- 三个值：上，左右，下；
- 两个值：上下，左右；
- 另外两个样式同理。
- border-color：边框的颜色；
- border-style：边框的样式；
大部分浏览器中，边框宽度 和 颜色都有默认值，而边框的样式默认值都为none；
使用border设置边框
同时设置4个边框
不区分 样式，颜色，宽度 的顺序。
可以使用border-top:,border-right：,border-bottom：,border-left：；分别设置四个边框。
内边距
内边距（padding），指的是盒子的内容区与盒子边框之间的距离。
内边距会影响盒子的可见框大小，元素的背景会延伸到内边距。
一共有四个方向的内边距，可以通过：
- padding-top
- padding-right
- padding-bottom
- padding-left
来设置四个方向的内边距
盒子的大小由 内容区，内边距和边框共同决定。
使用padding可以同时设置四个边框的样式，规则和border一致。
外边距
外边距指的是当前盒子与其它盒子之间的距离。
它不会影响可见框大小，会影响盒子的位置。四个外边距：
- margin-top
- margin-right
- margin_bottom
- margin_left
上外边距，左外边距 改变自己位置。（向左向上看齐）
下外边距，右外边距 改变别人位置。外边距可以为 负值，使元素反方向移动。
margin还可以设置为auto：
- 单独设置左，右为auto时为最大值；
- 同时设置左右为auto时水平居中。
- 垂直方向设置为auto，外边距默认为0；（一般不用垂直方向）
相邻的垂直外边距的重叠
垂直方向的，相邻，外边距，重叠。（即取较大值，而非取和）父子元素的垂直外边距相邻时，子元素的外边距会给父元素。
解决方法：
- 使其不相邻：加边框，内边距。
- 直接使用父元素内边距调整位置（父元素本身形状会受影响）
浏览器的默认样式
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，
所以为很多的元素都设置了一些默认的margin和padding，
而它这些默认样式，正常情况我们是不需要使用的。
往往在编写样式之前需要将浏览器中的默认的margin和padding统统去掉。
*｛
margin:0;
padding:0;
｝
内联元素的盒子模型
内联元素垂直padding不会影响布局，只会单纯调整大小，相邻的直接覆盖。
display，visibility，overflow
文档流
文档流
一个文档就是网页。（网页即html文档）
网页是多层结构，文档流就是最下面那层的地基。
块元素 只有在文档流中才会独占一行（自上向下排列）。
当元素的高度或宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距。（高度被内容撑开）
网友评论