HTML元素分类【三种类型】块元素、内联元素、可变元素

HTML元素分类【三种类型】块元素、内联元素、可变元素
html元素类型
总体来说css对显⽰标签来分类，分为：块状元素
内联元素（⾏内元素）
对于这⾥有⼀个争议点，分为：可变元素
⾏内快元素；
那么这些元素在默认的情况下有什么特点呢？
⾸先
块状元素特点：
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 - 项⽬选择
在⼀个项⽬中，可能⽤到的标签可能会很多很多，但是⽐如我想⽤块元素，但是想⽤有内联元素的特点；想⽤内联，⼜想拥有块元素的特点，这个时候该怎么办呢？就需要⽤到元素类型的转换
元素类型的转换：
display属性：
作⽤：检索或者设置元素⽣成的盒模型类型。

常⽤属性值：
a: display:block;
作⽤：将元素转成块状元素，拥有块状元素特点。

补充：⼤部分块状元素，默认的display的值都是block;
b: display:inline;
作⽤：将元素转成内联元素，拥有内联元素的特点。

补充：⼤部分内联元素，默认的display的值inline;
c: display:none;
作⽤：将当前隐藏，并不占据空间。

d：display：inline-block
作⽤：顾名思义就是⾏内块的意思了。

也就是说他具有了⾏内元素的不换⾏特征,同时也具有块元素的可以设置宽⾼等特征。

这⾥呢，有⼀个扩展的知识点：任何元素添加浮动，都可以设置⼤⼩。