CSS盒子模型

---恢复内容开始---

CSS盒子模型：盒子模型其实就相当于想象CSS中的每个元素都放在一个不可见的盒子里，那么为什么要将其想象成盒子呢，如果将每个元素都想象成一个盒子，那么再布局的时候就相当于摆放盒子，只需要将盒子放在相应的地方即可，一个盒子可以分为：内容区、内边距（padding）、边框、外边距（margin）

为元素设置边框必须指定三个属性：border-width  border-color border-style（实线、虚线）

由于盒子的摆放默认为靠上靠左的，所以当我们设定左外边距和上外边距，会导致盒子本身的位置发生改变。而设置下外边距和右外边距的时候回导致其他盒子的位置的改变，如果外边距设置的是负值，那么盒子会向反方向移动

在CSS中，垂直方向的相邻外边距会发生一个外边距的重叠，会取两个边距的最大值

浏览器在我们没有设置样式时，会默认个页面设置较为合适的样式牡丹石这个样式在开发过程中，我们可能用不到，所以可以将其去掉

内联元素的不能设置width和height，可以设置水平方向的内边距，内联元素设置垂直方向的内边距不会影响布局  垂直方向的边框不会影响布局  水平方向的边框会影响布局

内联元素 兄弟元素相邻的外边距不会重叠，会相加

如果需要修改内联元素的width等属性，需要将内联元素转换成块元素  display ：block（块元素）  inline（内联元素） inline-block可以讲一个元素设置为基友行内元素的特征，也有块元素的特征  （既可以设置宽高，也不会独占一行）   none  使用none  设置的元素，不会再浏览器中出现，也不会占据浏览器的位置 

visibilty ：visible（默认样式，会显示）  hidden（隐藏）  使用visibilty设置为hidden 的元素，不会在页面中显示，但是其位置依然保存

子元素默认存在父元素的内容区的，但是当子元素的宽度或高度超出了父元素的内容区，会溢出。父元素默认将移除内容显示在外面，不需要的时候，可以通过overflow属性进行设置。默认样式visible  ，hidden（隐藏） scroll（修剪，加一个滚动条。但是该属性无论内容是否溢出，都会加水平和垂直的滚动条） auto（会根据需要添加滚动条，水平溢出则添加水平滚动条，垂直溢出就添加垂直滚动条，不溢出则不添加）

块元素在文档流中独占一行，自上向下排列。默认宽度是父元素的100%。块元素在文档流中的高度会自动被子元素撑开。

内联元素在文档流中只占自身的大小，自左向右排列。如果一行中不足以放下所有的内联元素，则会跳到下一行，继续自左向右。内联元素的宽度和高度默认被内容撑开

当元素的宽度和高度为auto时，此时指定内边距不会影响可见框大小，而是会自动修改高度和宽度，以适应内边距