盒模型

box：盒子，每个属性在页面中都会生成一个矩形区域（盒子）

盒子类型：

1. 行盒，display等于inline的元素
2. 块盒：display等于block的元素

行盒在页面中不换行，快盒在页面独占一行

display默认值行盒：inline

浏览器默认样式设置的块盒：容器元素，h1~h2，p

常见的行盒：span、a、img、video、audio

盒子的组成部分

无论行盒还是块盒从内到外组成：

1. 内容 content

width height 设置盒子的内容宽度和高度

内容部分通常叫做整个盒子的内容盒 content-box

2. 填充（内边框） padding

盒子边框到盒子内容的距离
padding-left、padding-right padding-top、padding-bottom

padding：简写属性
padding: 上 右 下 左（空格分开）

上下相同（两个值）
padding：上下 左右

四个都相同 （一个值）
padding： 上下左右

               /* 填充盒 ———— 层叠  重要性->特殊性->原次序 */
               padding: 20px 25px 30px 35px ;
               /* 上 右 下 左 */
               padding: 25px 30px;
               /* 上下  左右 */
               padding: 25px;
               /* 上下左右 */
               padding-top: 20px;
               padding-right: 25px; 
               padding-bottom: 30px;
               padding-left: 35px;

填充区 + 内容区 = 填充盒padding-box

3. 边框 border

边框 = 边框样式 + 边框宽度 + 边框颜色

边框样式（简写属性: 上下左右边框）：border-:____;

solid——实线

inset ——粗实线

outset——较粗实线

double——双实线

dashed——虚线

dotted——圆点

groove——立体的线条

ridge——较粗的立体线条

hidden——表示隐藏

unset inherit initial none——空的

边框宽度（简写属性: 上下左右边框）：border-width:__px;
边框颜色（简写属性: 上下左右边框）：border-color:red;

                /* 边框盒 */            
               border：4px dashed red ;

               border-width: 25px;
               border-style:dashed;
               border-color: red;

               border-top-style:solid;
               border-right-style:inset;
               border-bottom-style:outset;
               border-left-style:solid;

               border-width: 20px 25px 30px 35px;
               /* 上右下左 */
               border-top-width: 20px;
               border-right-width: 25px; 
               border-bottom-width: 30px;
               border-left-width: 35px;
              
               border-color: red greenyellow brown aqua;
               /* 上右下左 */
               border-top-color: red;
               border-right-color: greenyellow;
               border-bottom-color: brown;
               border-left-color: aqua;

边框区域 + 填充区 + 内容区 = 边框盒 border-box

4. 外边距 margin

边框到其他盒子或边框的距离

margin-top（上），margin-bottom（下），margin-left（左），margin-right（右）

简写属性：margin

               /* 上右下左 */
               margin-top: 20px;
               margin-right: 25px;
               margin-bottom: 30px;
               margin-left: 35px;

选择框

outline-color

确定选择框颜色

outline-width

确定选择框的宽度

outline-style

确定选择框的类型，与border-style取值类似

/* 关键字 值 */
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

/* 全局 值*/
outline-style: inherit;
outline-style: initial;
outline-style: unset;

outline

简写属性，包括了以上三个

类似于border