css的盒模型

盒模型就是网页元素的结构

元素宽度

---

行内元素：可以多个元素共享一行空间的元素，如span。

块级元素：独占一行空间的元素，如div。

盒模型的默认行为

---

当给一个元素设置宽度和高度时，指定是的内容的宽高，所有的内边距、边框和外边距都是追加到该元素的宽度上。

很多时候，宽高度的设置和我们想要的效果不一致，都是由于盒模型的默认行为所导致的。

调整盒模型的行为

---

很多时候，我们需要的是所设置的宽高，要包含内边距和边框。这就需要用box-sizing属性来调整盒模型的行为。

box-sizing

box-sizing 属性的默认值是content-box，指定宽高为内容宽高。
box-sizing属性设置为border-box，height和width就会包含盒子的内容、内边距和边框的总和，这样UI图纸所设计的宽高就不用减去对应元素的内边距和边框了。

如图：

HTML：

    <div id="box">
        box-sizing 属性的默认值是content-box，指定宽高为内容宽高。
        box-sizing属性设置为border-box，height和width就会包含盒子的内容、内边距和边框的总和，这样UI图纸所设计的宽高就不用减去对应元素的内边距和边框了。
    </div>

style：

        #box {
            border: 10px solid red;
            width: 400px;
            height: 300px;
            padding: 20px;
        }

但是实际的宽高如下图所示：

盒子实际的宽度等于width+padding+border = 400 + 202 +102 = 460。如果我们显示宽度和UI一致，就需要减去两边的内边距和两边的边框。

这就是盒模型的默认行为，只要我们设置box-sizing属性为border-box，则不需要减去边框和内边距了。

style：

        #box {
            border: 10px solid red;
            width: 400px;
            height: 300px;
            padding: 20px;
            box-sizing: border-box;
        }

效果如下图：

全局设置box-sizing

在一个应用里面，若是出现很多个元素同样需要调整盒模型的行为，那就在全局设置box-sizing为border-box，如下代码给所有元素的伪元素设置border-box。

:root{
    box-sizing:border-box;
}
*,::after,::before{
    box-sizing: inherit;
}

在根元素设置border-box，其他元素这是继承根元素的盒模型。

元素高度

元素在没有设置高度的情况下【已调整盒模型】，元素的高度是由边框border、内边距padding和内容content-box所决定的。但是如果已经给定元素固定的高度，那么就可能会出现内容超出元素的现象。这就需要我们控制一下元素溢出的问题了。需要使用overflow元素。

overflow

visible：默认值，
hidden：会剪切超出部分
scroll：显示滚动条
auto：发生内容溢出的时候，才会显示滚动条