CSS元素类型详解
Css的显示对标签分类：
块状元素
内联元素（行内元素）
争议点：
第三类：
a:可变元素
b:行内块元素
元素类型分类：块状元素、内联元素、可变元素。
注：把行内块元素归在内联元素这一类里面。
默认情况下元素类型每个类型的特点：
块状元素特点：
1：在页面中以矩形区域显示
2：自上而下排列，独占一行
3：可以直接添加宽高
4：一般情况下，作为其他元素或内容的容器
内联元素特点：
1：在页面中最小单位也是矩形
2：在一行内逐个排列
3：不可以直接添加宽高，大小是由内容撑开的
4：内联元素也符合盒模型的规则，但是个别属性会出现问题（padding-top/bottom margin-top/bottom）
5:内联元素在一行内排列的时候，之间有间距
怎么消除间距：
a:添加浮动
b:把所有的内联元素都放在一行不用回车间（不推荐使用）
可变元素（了解）：
根据上下文的显示，来确定这个元素是块状元素还是内联元素
<button>按钮</button>
拓展：任何元素添加浮动，都可以设置大小
哪些标签属于块状元素，哪些标签属于内联元素：
块状元素：
Div-最常用的块级元素
Dl-和dt-dd 搭配使用的块级元素
Form- 交互表单
H1-h6- 大标题
Hr- 水平分割线
Ol- 有序列表
P- 段落
Ul- 无序列表
Li
Fieldset- 表单字段级
Colgroup-col - 表单列分组元素
Table-tr-td- 表格及行-单元格
内联元素：
A-超链接（锚点）
B-粗体（不推荐）
Br-换行
I-斜体
Em-强调
Img-图片
Input-输入框
Label-表单标签
Span-常用内联容器，定义文本内区块
Strong-粗体强调
Sub-上标
Sup-下标
Textarea-多行文本输入框
U-下划线
Select-项目选择
元素类型的转换：
Dispiay属性：
作用：检索或者设置元素生成的盒模型类型
常用属性值：
Dispiay：None ；可以隐藏某个元素，且隐藏的元素不会占用任何空间。该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
Dispiay：Block；将元素转换成块状元素，拥有块状元素特点
补充：大部分块状元素，默认的dispiay的值都是block
Dispiay：Inline；将块状元素转换成内联元素
Dispiay：inlink-block；显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性。
Dispiay：List-item；列表项
大部分块状元素默认的display的值block,其中li默认的值 list-item (列表元素)
大部分内联元素默认的display的值inline,其中input默认的值 inline-block(行内块元素)
内联元素里面特殊的一个：行内块元素（内联块元素）
特点：
1: 可以设置宽高
2：在一行内逐个显示
3：当前元素的display的值为inlin-block 能支持vertical-align属性
vertical-algin:; 垂直对齐。
top
bottom
middle
baseline
让一个元素在父元素里面左右上下居中。
1:给父元素添加text-align:center (左右居中)
2:给当前元素添加
display:inline-block;
vertical-align:middle;
3:在当前元素后面（不要回车），添加一个空的span
给span设置样式：
display:inline-block;
width:0;
height:100%;
vertical-align:middle;
让子元素在父元素里左右上下居中的方法：
.box{
width:400px;
height:400px;
background:#ccc;
margin:50px auto;
text-align:center;
}
h3{
width:100px;
height:100px;
background:blue;
display:inline-block;
vertical-align:middle;
}
span{
display:inline-block;
width:0;
height:100%;
vertical-align:middle;
}
第二种方法
.box{
width:400px;
height:300px;
background:orange;
margin:50px auto;
/* 触发弹性盒子 */
display:flex;
}
h3{
width:100px;
height:100px;
background:blue;
margin:auto;
}
行内块元素：
input display为inline-block
img标签：浏览器默认解析的display的值inline
img当作行内块使用 -> 特殊的存在：拥有行内块的特点。
图片默认的display的值为inline 为什么图片能直接添加大小？？
从另一个角度对所有的标签进行分类。
分为：置换元素与非置换元素
置换元素：
典型的置换元素：img\input 依赖标签的属性或者元素自身类型，来决定当前元素在页面中显示的状态。
因为是置换元素所以能添加大小。因为置换元素在页面显示过程中，生成一个框（框架），这个框能添加大小的。
非置换元素：不是置换元素的都是非置换元素。
标签的嵌套规则：
1：尽量让块状元素作为父元素（容器）存在
2: 内联元素的子元素尽量也是内联元素
3: p标签中不能出现h1 - h6
4：p标签 h1 - h6 不能互相嵌套
