盒子模型

盒子模型

一，盒子模型是什么？
每个元素都被表示为一个矩形的盒子，由四部分组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）。它在页面中所占的实际大小（宽高）是content+padding+border+margin之和。

二，盒子模型分为两种
标准盒模型（W3C盒模型）、IE盒模型。
三，两种盒子模型的区别
标准盒模型内容大小就是content大小，而IE盒模型内容大小则是content+padding+border总的大小。

四，怎么设置两种盒子模型
标准盒子 设置box-sizing属性为content-box
IE盒子 设置box-sizing属性为 border-box

五，box-sizing常用场景
我们在给子元素设置border和margin值得时候有时会撑破父元素的尺寸，这个时候就需要通过设置box-sizing属性为border-box来将border包含进元素的尺寸中。

六，盒子模型里面常用的单位
盒子模型常用单位分绝对单位和相对单位
绝对单位： 值是固定不变的 不可改变的 例如 px m cm
相对单位：可以实现响应式布局，随着屏幕尺寸变大而变大，随着屏幕变小而变小，例如 rem % vw vh