2021-07-17 盒子模型~内容、外边距、内边距、边框

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。

每个盒子由四个部分：边距（margin），边框（border），填充（padding），和实际内容（content）
我们可以通过浏览器的开发者工具观察页面的元素，会发现每个元素都是一个盒子：

1.内容content

概念：由内容边界限制，容纳着元素的“真实”内容，例如文本、图像，或是一个视频播放器。它的尺寸为内容宽度（或称 content-box 宽度）和内容高度（或称 content-box 高度）。它通常含有一个背景颜色（默认颜色为透明）或背景图像。

如果 box-sizing 为 content-box（默认），则内容区域的大小可明确地通过 width、min-width、max-width、height、min-height，和 max-height 控制。

2.内边距padding（会撑大盒子的大小）

概念：由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。它的尺寸是 padding-box 宽度 和 padding-box 高度。
内边距的粗细可以由 padding-top、padding-right、padding-bottom、padding-left，和简写属性 padding 控制。

内边距基本用法👇👇👇

div{
    width: 318px;
    height: 318px;
    /* 边框 */
    border: 1px solid #000;

    /* 内边距(内补白) padding, 有四个方向 */

    /* 语法: padding-方向: */
        /* left 左内边距 */
        padding-left: 30px;
        /* right 右内边距 */
        padding-right: 30px;
        /* top 顶部内边距 */
        padding-top: 50px;
        /* bottom下 底部内边距 */
        padding-bottom: 20px;

        /* padding的简写属性 */
        padding: 10px;   /* 上下左右10 */
        padding: 10px  20px;     /* 上下10   左右20 */
        padding: 10px  20px  30px;     /* 上10  左右20  下30 */
        padding: 10px  20px  30px  40px;     /* 上10  右20 下30  左40*/

    /* 不让 内边距和边框 撑大盒子大小*/
    box-sizing: border-box;
}

3.边框 border（会撑大盒子的大小）

概念：由边框边界限制，内边距外部区域，是容纳边框的区域。

边框的粗细由 border-width 和简写的 border 属性控制。如果 box-sizing 属性被设为 border-box，那么边框区域的大小可明确地通过 width、min-width, max-width、height、min-height，和 max-height 属性控制。
假如盒子上设有背景（background-color 或 background-image），背景颜色将会一直延伸至边框的外沿，背景图片在边框的内沿。此默认表现可通过 CSS 属性 background-clip 来改变。

边框基本用法👇👇👇

.box1{
    width: 200px;
    height: 200px;

    /* 边框样式 border-style */
        /* 默认值为  none 无边框*/
        border-style: none;

        /* 1. solid 实线边框 */
        border-style: solid;
        /* 2. dashed 虚线边框 */
        border-style: dashed;
        /* 3. dotted 点状边框 */
        border-style: dotted;
        /* 4. double 双实线边框 */
        border-style: double;

        /* 边框样式支持简写 (同padding和margin 一样的顺序) */
            /* border-style: double dashed; */
            /* border-style: double dashed solid dotted; */

        /* border-方向-style:  top bottom left right */
            border-left-style: dashed;
            border-bottom-style: solid;

        /* border-style: groove;
        border-style: ridge;
        border-style: inset;
        border-style: outset; */
}

.box2{
    width: 200px;
    height: 200px;
    /* 实线 */
    border-style: solid; 

    /* 边框宽度 */
        border-width: 10px;
        /* border-width: 10px 20px;
        border-width: 10px 20px 30px;
        border-width: 10px 20px 30px  40px; */

    /* border-方向-width  宽度支持带方向 */
        border-top-width: 30px;
}

.box2{
    /* 边框颜色  #十六进制  rgb   rgba  hsl  hsla */
        border-color: red;
        /* border-color: red green;
        border-color: red green blue;
        border-color: red green blue; */
    /* border-方向-color 颜色支持方向 */

    /* 不让边框和内边距撑大盒子大小 */
    /* box-sizing: border-box; */
}

.box3{
    width: 200px;
    height: 200px;

    /* 边框的简写属性: border:宽度 样式 颜色;  */
    border: 10px solid #ff0;

    /* border-方向: 宽度 样式 颜色;  支持方向 */
    border-right: 1px solid #f00;
    
}

4.margin外边距

概念：由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。它的尺寸为 margin-box 宽度 和 margin-box 高度。

外边距区域的大小由 margin-top、margin-right、margin-bottom、margin-left，和简写属性 margin 控制。在发生外边距合并的情况下，由于盒之间共享外边距，外边距不容易弄清楚。

外边距基本用法👇👇👇（与padding基本一致）

/* 外边距: 元素外部的距离 */
    /* margin-方向  top10   right20   bottom30   left40   */
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;

    /* 简写属性 */
    margin: 10px;
    margin: 10px 20px;
    margin: 10px 20px 30px;
    margin: 10px 20px 30px 40px;