CSS盒模型

每天做个总结吧，坚持就是胜利！

    /**
        @date 2021-05-29
        @description CSS盒模型
    */

壹（序）

在网页布局中，每个元素都可以看作是一个盒子，这就是盒模型，这些盒子根据CSS规则在根盒子（html根节点）中进行排列布局，形成了HTML页面。

贰（详解）

一个完整的盒模型可以有内容区（content），内边距（padding），边距（border），外边距（margin）。

叁（分类）

盒模型可分为两类：

标准盒模型：设置width时实际是设置content；

IE盒模型：设置width时实际是设置content+padding+border；

以下代码在两种盒模型中表现

width: 100px;
padding: 10px;
border: 10px solid red;
margin: 10px;

标准盒模型：

IE盒模型：

肆（引申）

box-sizing可设置如何计算一个元素的总高度和总宽度，使用此CSS属性，可以设置元素盒模型类型。

默认值为content-box（标准盒模型），可设置为border-box（IE盒模型）。