十三：css盒子模型(a)

(一)认识盒子模型

在网页中"一切皆是盒子"，css处理网页时，它认为每个元素都包含在一个不可见的盒子里，为什么想象成盒子呢，因为我们把所有的元素都想象成盒子，那么我们对网页的布局就相当于摆放盒子，我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。

(二)盒子模型从上到下分为五层

1.边框(border),位于盒子的第一层

2.元素内容(content),内边距(padding),两者同位于第二层

3.背景图(background-image),位于第三层

4.背景色(background-color),位于第四层

5.整个盒子的外边距(margin),位于第五层

几个重要参数：margin,padding,border,content

(三)display

我们不能为行内元素设置width,height,margin-top和margin-bottom
我们可以通过display来修改元素的性质
可选值：
-block: 设置元素为块元素
-inline: 设置元素为行内元素
-inline-block: 设置元素为行内块元素
-none: 隐藏元素(元素将在页面中完全消失)

(四)visibility

此属性主要用于元素是否可见，和display不同，使用此属性隐藏一个元素，隐藏后其在文档中所占的位置会依然保持，不会被其它元素覆盖
可选值：
-visible:可见的
-hidden:隐藏的

(五)overflow

当相关标签里面的内容超出了样式的宽度和高度时，就会发生一些奇怪的事情，浏览器会让内容溢出盒子
可以通过overflow来控制内容溢出的情况
可选值：
-visible:默认值

-scroll:添加滚动条

-auto:根据需要添加滚动条

-hidden:隐藏超出盒子的内容

(六)css 外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

1.当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并

2.当一个元素包含在另一个元素时,(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并

3.外边距甚至可以与自身发生合并，假设有一个空元素，它有外边距，但是没有边框或填充，在这种情况下，上边距与下边距就碰到了一起，它们会发生合并

4.如果这个外边距遇到另一个元素的外边距，它还会发生合并

这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成一个小的外边距