css相关内容:盒子模型

什么是盒子模型？

在HTML学习中，我们了解到，每个标签的本质都是形成一个独立的空间，用于各种操作。各种标签形成的独立的空间就是盒子模型。简单来说，盒子模型就是各种标签的抽象化产物。我们可以针对盒子模型进行各种参数设置，达到样式优化的效果。

盒子模型的分类

针对HTML标签的各种特征，盒子模型共分为4类。

块级盒子

块级盒子的特点是独占一行且支持用样式设置宽度和高度。一般情况下，div标签、ul标签、li标签、h标签默认为块级盒子。

内联级盒子

内联级盒子的特点是不独占一行且不支持用样式设置宽度和高度。一般情况下，span标签、a标签默认为内联级盒子。

内联块级盒子

内联块级盒子的特点是不独占一行且支持用样式设置宽度和高度。一般情况下，img标签、input标签默认为内联块级盒子。

弹性盒子

弹性盒子的特点是不论父类原本能不能放下元素，子元素始终横向布局，如果父元素放不下，则会压缩子元素。没有标签默认为弹性盒子，需要在样式中进行设置。

盒子模型之间的对比和相互转化

盒子模型之间的对比

标签对应的盒子类型不是一成不变的，可以在样式中用display属性进行设置，下面先展示不同盒子类型之间的对比。

默认页面代码如下：

    <div>演示盒子模型</div>
    <div>演示盒子模型</div>
    <div>演示盒子模型</div>
    <span>演示盒子模型</span>
    <span>演示盒子模型</span>
    <span>演示盒子模型</span>
    <img src="img/宫殿.jpg" alt="这是一张宫殿图片" style="width: 200px;">
    <img src="img/宫殿.jpg" alt="这是一张宫殿图片" style="width: 200px;">
    <img src="img/宫殿.jpg" alt="这是一张宫殿图片" style="width: 200px;">

默认页面如下：

在css中用以下代码进行样式优化：

div,
span,
img{
    background: gold;
    width: 200px;
    height: 100px;
}

页面变化如下：

可以看出块级盒子类别中的div标签执行了所有的样式优化代码，而内联级盒子类别中的span标签只执行了背景颜色，且不是独占一行；内联块级盒子中的img标签执行了所有代码（背景颜色图片不能显示），由此可以看出不同盒子类别之间的属性的不同。

盒子模型之间的相互转化

其他盒子转化为弹性盒子可以使用display:flex。

对整个区域转化为弹性盒子属性如下所示：

body {
    display: flex;
}

效果如下：

以下为其他盒子类型转化代码及效果：

转化为块级盒子：

display:block

效果如下：

转化为内联级盒子：

display: inline；

效果如下：

转化为内联块级盒子：

display: inline-block

效果如下：

盒子模型的组成

到这里，我们介绍完了盒子模型不同类型以及之间的相互转化，现在我们介绍一下盒子模型的组成。

盒子模型组成分为四个部分，分别为内容区、填充区、边框区、外边距，它们之间的关系如下图所示：

盒子模型属性设置

为了更好地展示盒子模型对元素的影响，整个页面只留下一个div标签。

初始页面如下：

内容区设置

内容区主要设置为宽度和高度，由width和height属性控制  
    width:200px;
    height:100px;

填充区设置padding

填充区设置规则为：从上开始，顺时针进行旋转，不够了找对称。

    padding: 50px;设置上下左右都为50px
    padding:50px 20px;上下为50px，左右为20px
    padding: 50px 20px 10px;上为50px，右为20px，下为10px，左边没设置找对称为20px
    padding: 50px 20px 10px 100px;上为50px，右为20px，下为10px，下为100px

效果如下(展示最后一个):

也可以对上下左右单个方向进行单独设置，但如果上面已经设置了一个方向的属性，又单独进行设置的话，会覆盖上面的单方向属性。

    padding-top: 50px;单独设置上方向属性
    padding-bottom: 10px;单独设置下方向属性
    padding-left: 100px;单独设置左方向属性
    padding-right: 30px;单独设置右方向属性

效果如下：

边框区设置border

边框区是一个复合属性，由三个方面组成，分别为边框样式、边框颜色、边框宽度，如果没有设置好这三个方面，则边框区不能工作。

    border-style:边框样式
    border-color:边框的颜色
    border-width:边框宽度

这三个方面可以同时设置，且不需要区分先后顺序。

 border:solid 10px blue;值不区分顺序，空格隔开

效果如下：

也可以根据不同方向进行单独的边框设置，和填充区一样，下面会覆盖上面的效果。

    border-top: solid 10px blue;针对上面边框进行设置
    border-bottom: dashed 10px pink;针对下面边框进行设置
    border-left: dotted 10px red;针对左面边框进行设置
    border-right: double 10px green;针对右面边框进行设置

效果如下：

也可以针对某个方向的某个方面进行单独设置：

border-top-color: aqua;对上方向的颜色进行单独设置

效果如下：

外边距设置margin

外边距设置规则和填充区一样：从上开始，顺时针进行旋转，不够了找对称。

    margin: 50px;设置上下左右都为50px
    margin:50px 20px;设置上下为50px，左右为20px
    margin: 50px 20px 100px;设置上为50px，右为20px。下为100px，左没设置找对称为20px
    margin: 50px 20px 100px 0;设置上为50px，右为20px。下为100px，左为0px

效果如下(只展示最后一个)：

也可以针对不同方向进行单独设置(还是会覆盖前面的设置):

    margin-top: 50px;单独对上方向进行设置
    margin-left: 100px;单独对左方向进行设置
    margin-bottom: 10px;单独对下方向进行设置
    margin-right: 30px;单独对右方向进行设置

效果如下:

还有一个特殊的属性，这个属性只针对块级元素，作用效果为水平居中。

margin: auto;   

效果如下：

值得提的一点是，因为是外边距，如果同一类元素在页面上紧挨着，他们之间的边距为两者边距的最大值。比如，div元素，上边距设置为10px，下边距设置为50px，两个div元素紧挨着，这两个元素的边距为50px。

内容区特殊属性box-sizing

     box-sizing:
     content-box默认宽高针对内容区设置
     border-box宽高针对整个盒子设置

以border-box为例

    background: gold;
    width: 200px;
    height: 50px;
    box-sizing:content-box;这里加了一个box-sizing
    padding: 50px 20px 10px 100px;
    padding-top: 50px;
    padding-bottom: 10px;
    padding-left: 100px;
    padding-right: 30px;
    border:solid 10px blue;
    border-top: solid 10px blue;
    border-bottom: dashed 10px pink;
    border-left: dotted 10px red;
    border-right: double 10px green;
    border-top-color: aqua;
    margin: 50px 20px 100px 0;
    margin-top: 50px;
    margin-left: 100px;
    margin-bottom: 10px;
    margin-right: 30px;
    margin: auto;    

这里整个盒子的属性不管怎么设置，盒子宽高属性就是对应上面width宽，height高的盒子(原理为对内容区进行压缩)，效果如下：

到此，盒子模型全部内容介绍完毕。