CSS的显示模式

CSS的显示模式

css有三种显示模式：分别是 **块元素**、**行内元素**、**行内块元素**（行内联元素）

1 块元素

常见的块元素：h1~h6 p div ul ol li等 其中**div**是最经典的块元素

块元素的特点：

1. 独占一行
2. 高度 宽度 外边距以及内边距都可以控制
3. 宽度默认是容器（父级宽度）的100%
4. 是一个容器及盒子，里面可以放行内或者块级元素

注意：文字类的标签如p,h1~h6, 里面不能放块元素，特别不能放div

2 行内元素

常见的行内元素：a strong b em i u del s span等 其中span是最经典的块元素

行内元素的特点：

1. 相邻行内元素在一行上面 一行可以显示多个
2. 高度 宽度 直接设置是无效的
3. 默认宽度就是它本身内容的宽度
4. 行内元素只能容纳文本或其他行内元素

注意：链接里面不能再放链接，特殊情况：链接a里面可以放块级元素，但是给a转换一下块级模式最安全

3 行内块元素

在行内元素中有几个特殊的标签 img input td他们同时拥有块元素和行内元素的特点

行内块元素的特点：

和相邻行内元素（行内块）在一行上，但是他们之间会有空白间隙，一行可以显示多个（行内元素特点）

默认宽度就是它本身内容的宽度（行内元素特点）

高度 宽度 外边距以及内边距都可以控制（块元素特点）

显示模式的转换

特殊情况下我们需要元素模式的转换，比如想要增加链接标签a的触发范围时

转换为块元素： display：block；

转换为行元素： display：inline；

转换为行内块元素： display：inline-block；

关于这部分可能涉及到的面试问题：
块级元素和行内元素什么区别，然后怎么相互转换？