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，其他元素这是继承根元素的盒模型。

元素高度

overflow