CSS盒子模型

        所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。

一、盒子模型分类

1、块级盒子(标签，元素)特点:独占一行，对宽度高度支持 div ul li h1~h6标签  display: block;
2、内联级盒子特点:不独占一行，对宽度高度不支持span a标签                      display: inline;
3、内联块级盒子特点:不独占一行，对宽度高度支持img input标签                  display: inline-block;
4、弹性盒子特点:不论父级元素能不能放下子元素，子元素始终横向布局        display:flex;

举例：

    <h3>块级盒子</h3>
    <div>hello</div>
    <div>hello</div>
    <div>hello</div>

    <h3>内联级盒子</h3>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>

    <h3>块级内联级盒子</h3>
    <img src="img/OIP-C.jpg" alt="">
    <img src="img/OIP-C.jpg" alt="">
    <img src="img/OIP-C.jpg" alt="">

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

弹性盒子：

div,
span,
img{
    background: yellow;
    width: 200px;
    height: 100px;
}
body{
    display: flex;
}

二、盒子模型

结构图：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

1、内容区    
width: 200px; height: 100px;
box-sizing: content-box    针对内容区设置宽高（默认情况）
                  border-box      针对整个盒子设置宽高（包括边框）  

2、填充区    
从上开始，顺时针进行旋转设置，不够了找对称
padding: 50px;    （上下左右都50px）
padding: 50px 20px;       （上下50，，左右20）
padding: 50px 20px 10px;       （上50    左右20   下10）
padding: 50px 20px 10px 100px;    
也可以上下左右单独对某一个方向进行设置    
padding-top: 50px;    
padding-bottom: 10px;    
padding-left: 100px;    
padding-right: 30px;

    
3、边框区 （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: red;    
border-top-width: 30px;....  

边框样式 border-style:
        dotted: 定义一个点线边框
        dashed: 定义一个虚线边框
        solid: 定义实线边框
        double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
        groove: 定义3D沟槽边框。效果取决于边框的颜色值
        ridge: 定义3D脊边框。效果取决于边框的颜色值
        inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
        outset: 定义一个3D突出边框。 效果取决于边框的颜色值

4、外边距    
从上开始，顺时针进行旋转，不够了找对称    
margin: 50px;    
margin: 50px 20px;    
margin: 50px 20px 100px;    
margin: 50px 20px 100px 0;    
上下左右四个方向单独设置  ： 
margin-top: 50px;    
margin-left: 100px;    
margin-bottom:10px;    
margin-right: 30px;    
auto:水平方向居中（用于块级元素）

举例：

div{
    /* 内容区 */
    background: yellow;
    width: 200px;
    height: 100px;

    /* 填充区 */
    padding: 50px 20px 10px 100px;

    /* 边框区 */
    border-top:solid 10px blue;
    border-bottom:dashed 10px pink;
    border-left:dotted 10px red;
    border-right:double 10px green;

    /* 外边距 */
    margin: 50px auto;
}
body{
    display: flex;
}

设置box-sizing: border-box;后