元素类型及其转换

元素类型：

HTML对标签分类----->单、双标签；

CSS中对标签的分类：

1、块状元素： 默认情况下
在页面中以矩形区域显示；

​ 自上而下排列，独占一行

​ 可以直接添加宽高

​ 一般情况下，作为其他元素的容器；

2、内联元素（行内元素）：

​ 在页面中最小单位也是矩形

​ 在一行内逐个排列

​ 不能直接添加宽高、大小由内容撑开；

​ 行内元素也符合盒模型规则，但是个别属性会出现问题；

​ 例如：padding-top/bottom margin-top/bottom 左右不会有问题；使用大部分内联元素在使用时都会转换成块状元素使用；

行内元素在左右排列时会有间距；

​ 解决方法：a、添加浮动

​ b、把所有的内联元素都放在一行，不用回车（不推荐使用）

​

​ 3、存在争议 ：
a：可变元素： 会根据上下文的显示，来确定这个元素是块状元素还是内联元素

​ （例如button）

​ b：行内块元素

任何元素添加浮动，都可以设置宽高；

哪些标签属于块 哪些标签属于内联：

块状元素：

​ 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属性：检索或者设置元素生成的盒模型类型；

常用属性值：

1、display:block;

将元素转换为块状元素，拥有块状元素的特点；

大部分块状元素，默认的display属性值为block；

2、display:inline;

​ 将元素转换为行内元素，拥有行内元素的特点。

​ 大部分行内元素，默认的display属性值为inline；

3、display:none;

​ 将元素隐藏，并且不占据空间；
none改成inline或block 就会显现，反之隐藏；