CSS 盒模型
概述：
CSS中的盒模型本质上相当于一个容器，在其中包裹着周围的HTML元素。它由三部分组成：一是边框（border），二是填充内容（padding），三是实际显示的内容（content）。在CSS中，“box model”这一术语被用来描述网页布局的方式；所有HTML标签都可以视为一个容器。
内容content
概述：
CSS利用元素指定width和height属性值来规定content内容区域的大小。因此,element的内容即为子element按照content区域开始排列。
width：
作用：设置宽度
取值：
1. auto 默认值。浏览器可以计算出实际的宽度。
2. px
3. 百分比
hieght：
作用：设置高度
取值：
1. auto默认值。浏览器可计算出实际的宽度。
2. px
3. 百分比
.边框 border
由围绕内容与内边距之间的空间中的一或多条线构成，在HTML/CSS语言框架下可通过border属性来设定元素的边界宽度、样式以及颜色特征。
border-width 边框宽度
作用：设置所有边框宽度，或者单独的为各边边框设置宽度
取值：长度值（不允许指定负长度值）
语法：空格隔开1-4个值
1个值：设置所有边框宽度
2个值：设置上下 、 左右
3个值：设置上、左右、下
4个值：设置上、右、下、左
border-style 边框样式
作用：设置标签所有边框的样式，或者单独的为各边设置边框样式。
取值：
none 定义无边框
dotted 定义点状边框
dashed 定义虚线
double 定义双线 （双线的宽度等于border- width的值）
空格隔开
空格隔开
语法规则：1-4个值用空格分隔；单一数值指定全部边界；两个数值分别设置上下和左右边界；三个数值分别指定上边、左边和下边的边界设置；四个数值分别对应上边、右边、下边和左边的边界设定
请特别注意，在该值并非 none 的情况下（即不为 none 时），边框才会显示出来。如果设置的样式为 none，则会将边框宽度归零。
border-color 边框颜色
作用：设置所有边框颜色，或者单独地为各边边框设置颜色
取值：
颜色的名称，如 "red"
RGB 值, 如 "rgb(255,0,0)"
16进制值, 如 "#ff0000
空格隔开
opens a box with specific dimensions and styling properties. The container has a fixed width of 10 centimeters and height of 8.5 centimeters. The borders are defined with widths of 2 points at the top and bottom edges, and thicknesses of 4 points on both side edges. The border style includes solid lines for front sides, dashed lines for back sides, and double lines for top surfaces. The container's color scheme is configured as red along its top edge, yellow along its right side, green along its bottom edge, and blue along its left side.
简写
定义四个边
语法：border:样式 宽度 颜色
.box{
width:100px;
height:100px;
/* 四个边简写 /
/ border:10px solid red; */
}
单方向定义
空格隔开
空格隔开
说明：每个边框都有可能被配置为指定样式宽度的颜色 语法：border-direction: 宽度 样式 颜色【以空格分隔
拆分语法
border-方向-width:
border-方向-color
border-方向-style
.box{
/* 单个边简写 /
设置左侧边界为红色实线型且宽度为10像素；
设置右侧边界为绿色实线型且宽度为10像素；
设置顶部边界为品红色实线型且宽度为10像素；
/ 单个边拆分的写法 */
设置底部宽度为10像素；设置底部样式为实线型；设置底部颜色为黄色；
}
注意:边框会影响盒子实际大小，样式、宽度、颜色无书写顺序要求。