11.CSS-元素显示模式

在HTML中HTML将所有的标签分为两类，分别是容器级和文本级。
在CSS中CSS也将所有的标签分为两类，分别是块级元素和行内元素。

CSS元素显示模式

1.什么是块级元素和行内元素？

块级元素会独占一行，行内元素不会独占一行

容器级的标签：div，h，ul，ol，dl，li，dt，dd…；
文本级的标签：span，p，b，u，i，s，strong，em，ins，del…

块级元素（所有的容器级标签+p）
p，div，h，ul，ol，dl，li，dt，dd…；
行内元素（除了p以外的文本级标签）
span，b，u，i，s，strong，em，ins，del…

2.块级元素和行内元素的区别？

块级元素：
1.独占一行；
2.如果没有设置宽度，那么默认和父元素一样宽，如果设置了宽高，那么就按设置的来；

行内元素：
1.不会独占一行；
2.如果没有设置宽度，那么默认和内容一样宽，如果设置了宽高，也不会有任何变化，所以行内元素不能设置宽高。

行内块级元素：
为了能够让元素既不独占一行，又可以设置宽度和高度，那么就出现了行内块级元素。
例如：img
既能不独占一行，又能改变宽高

3.元素显示模式转换

设置元素的display属性。
display的取值：
block 转换为块级元素；
inline 转换为行内元素；
inline-block 转换为行内块级元素。

快捷键：
di+tab——>display：inline；
db+tab——>display：block；
dib+tab——>display：inline-table。