在HTML中，若想要实心划分区域，则：
1、添加标签；
2、对标签设置尺寸（宽高）
但只要是添加了一个元素（标签），就会在页面中生成一个盒子，不同元素产生的盒子模型可能不同，这取决于它CSS的display属性
1、display:当前元素的显示方式
- display：none；不生成盒子
特点：在页面不显示且不占用尺寸
- display：block；块盒
特点：块盒独占一行，即使内容只有一个字后面的元素也会换行显示
可以设置宽高
- display：inline；行盒
特点：所有行盒在一行显示，且里面的内容超出一行会自动换行显示
设置宽高无效
- display：inline-block；行内块盒
特点：既有行盒的特点又有块盒的特点，在一行显示且设置宽高有效
- display：其他取值；其他盒子
例：后面布局会用display：flex；弹性盒模型
2、IE盒模型
在检查器中，鼠标移到某个标签。页面显示的是该标签边框盒的尺寸，默认渲染的区域也是边框盒。
IE盒模型会导致元素在页面中的实际占用尺寸会发生变化。
box-sizing：盒模型的计算规则。取值有：
内容盒 content-box;;
————由content内容区域组成，设置的宽高就是内容盒的尺寸
边框盒 border-box;
————由padding和content和border组成，设置的宽高就是边框盒的尺寸
填充盒 padding-box;
————由内边距padding和content组成
**注意！！！ **：这个取值box-sizing没有，在设置背景剪切background-clip取值这三个才都可以
3、盒模型的组成
centert：内容（存放文本内容）
对某一个标签设置宽度或高度，实际是对content区域内容设置
——font-weight:bold/bolder/;lighter; 字体的粗细
——overflow：溢出内容的显示方式（会创建一个BFC，后面会单独详细说到）
——overflow：visible；依然显示溢出内容
——overflow：hidden；隐藏溢出内容；对超出填充盒padding的内容进行隐藏
——overflow：auto；超出内容的方向出现滚动条
——overflow：scoll；xy轴两个方向出现滚动条
文本换行规则：
中文：标点符号、空格、汉字
英文：标点符号、空格、单词
数字：标点符号、空格
设置标签的断词规则：word-break:break-all; 英文会按照字母进行换行
最大/最小宽高：min/max-height；最小/最大高度；min/max-width；最小/最大宽度
font-size：取值必须是偶数（整数）且不许小于12px
字体：黑体，微软雅黑，衬线字体，非衬线字体
1个汉字=2个字符；1个字符=2个字节 双倍计算
border：边框（取值：粗细；样式；颜色；）
取值：solid实线,dashed虚线,dotted点线,double双实线
简写—border:1px solid red;
不简写——border-top：1px solid red; 只设置上边框
border-top-style：solid;
border-top-color：red;
以此类推
border:solid; 样式不可以省略
border可以省略：
1、厚度，默认3px(为了能展示双实线)
2、颜色，默认文本色（黑色）
outline轮廓，取值：厚度 样式 颜色
问题：outline和border的区别？
外边框，用处和border一样，但是不占像素，无法单独设置每条边
其他适用场景：去除input、a标签的焦点框
transparent，设置颜色透明（可用来做带方向的三角形）
圆角边框border-radius:20px;
目标：在页面中生成一个圆
1、设置宽高数值一致
2、设置边框
3、border-radius设置为宽高的一半
取1个值：4个角的弧度
取2个值：左上右下、左下右上
取3个值：左上、左下右上、右下
取4个值：左上、右上、右下、左下（顺时针）
border-radius:Apx/Bpx; A是x轴的半径，B是y轴的半径
盒子阴影box-shadow:2px 4px 6px red;
控制当前标签的阴影
取值：第1个值：x轴偏移量(宽) 正：向右；负：向左； 第2个值：y轴偏移量(高) 正：向下；负：向上； 第3个值：模糊值； 第4个值：阴影扩散的范围（可不写）； 第5个值：颜色
box-shadow:2px 4px 6px 1px red;
文本阴影：text-shadow:2px 4px 6px red;
注：每个值之间的分隔符是空格
padding：内边距（边框与内容之间的距离）
简写：padding：20px;
不简写：padding-top:20px;以此类推
————
取1个值：上下左右
取2个值：上下、左右
取3个值：上、左右、下
取4个值：上、右、下、左 （顺时针方向）
margin：外边距（表示与其他盒子的距离）
缩写方式与padding一样
注：每个值之间的分隔符是空格。 缩写只是提升开发者效率，检查器上找不到
4、盒模型取值单位
px 固定尺寸
em 相对尺寸，父级/当前标签字体大小的倍数
rem 相对尺寸，基于html元素的倍数
% 尺寸是包含块宽度的百分比
auto 自动，按照不同定位体系的规则计算
margin：px、em、rem、%、auto
border：px、em
padding：px、em、rem、%
width：px、em、rem、%、auto
height：px、em、rem、%、auto
注意！！！：
1、margin、padding、width的百分比，是包含块宽度的百分比
2、height百分比很少使用
3、width、height默认值是auto，内容的宽高尺寸
4、margin取auto，有宽度就是居中，没有宽度就是0
5、只有margin可以取负值
完。
更多资料请微信搜索公众号「 夜来妖风起」第一时间阅读。
