CSS_元素类型及转换

元素类型：
根据css盒模型的显示分类（三类）
划分一：
块状元素 内联元素 内联块状元素（争议点：内联块状元素是自己属于一类还是内联一类）
划分二：
块状元素 内联元素 可变元素（按钮）

各种元素类型的特点：
一：块状元素（默认情况下）：
1.块状元素在页面中以矩形区域显示
2.块状元素能直接添加宽高
3.块状元素在页面显示是自上而下独占一行的排列
4.块状元素一般作为内容或其他元素的容器
常见的块状元素：
div -最常用的块级元素
dl - 和dt-dd 搭配使用的块级元素
form - 交互表单
h1 -h6- 大标题
hr - 水平分隔线
ol – 有序列表
ul - 无序列表
li
p - 段落
fieldset - 表单字段集
colgroup-col - 表单列分组元素
table-tr-td 表格及行-单元格
二：内联元素（默认情况下）：
1.内联元素不能设置大小，大小由内容撑开，最小单位也是矩形
2.内联元素在一行内逐个显示
3.内联元素也支持盒模型的规则，但是个别属性不能正确显示
（例如：padding-top/bottom margin-top/bottom 不能正确显示而不是不显示）
常见的内联元素：
a –超链接（锚点）
b - 粗体(不推荐)
br - 换行
i - 斜体
em - 强调
img - 图片 (img的特点完全符合行内块元素特点，但是还是属于内联元素一类，display默认值为inline)
input - 输入框 (彻彻底底的行内块元素，display默认值为inline-block)
label - 表单标签
span - 常用内联容器，定义文本内区块
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
u - 下划线
select - 项目选择
三：可变元素 button
根据布局流的规则，生成块或者是内联

元素类型的转换：display属性

display属性：
    检索或设置元素所生成的盒模型类型
display的属性值：
    a: display: block
        作用：让元素转成块状元素，拥有块状元素的特点
        大部分块状元素的display默认值：block  （说大部分是因为还有特殊的）
    b.display: inline
        作用：让元素转成内联元素，拥有内联元素的特点
        大部分内联元素的display默认值：inline
    c.display: none
        作用：隐藏该元素，在页面中不占据空间
    d.display:list-item
        li的默认值，带有列表符号
    e.display:inline-block
        input的默认值

行内块元素：
display:inline-block
特点:
a.能直接设置宽高
b.在一行内逐个显示
c.inline-block的元素支持 vertical-align 属性
(vertical-align 垂直对齐属性)

vertical-align 垂直对齐属性
属性值：
top
middle
bottom
baseline(基线对齐)

默认情况下：大部分块状元素的display的默认值为 block
其中li的默认值为list-item(列表元素)
默认情况下：大部分行内元素的display的默认值为 inline
其中input的默认值为inline-block(内联块元素/行内块元素)