元素的显示模式(块元素,行内元素,行内块元素)

元素显示模式

元素显示模式就是元素以什么 方式显示。

块元素

特点：

• 独占一行；

• 可以在样式里设置宽高，内外边距；

• 宽度默认是父容器的100%；

• ​ 可以装其他的块元素或行内元素。

注意：文字类的元素内不能使用块元素。 例 p， 主要用于存放文字，里面不能放块级元素 如div。 h1-h6都是文字类块级标签，不能放其他块元素。

块元素 div p h1-h6 ul li

行内元素

特点：

• 一行可显示多个；

• 高宽直接设置是无效的；​

• 默认宽度就是本身内容的宽度；

• 行内元素只能容纳文本或其他行内元素。

注意：a里面不能再放a；a里面可以包含块元素 但需转换.

行内元素 span a strong/b em/ i del/s

解决内联元素间隙的方法：

• 去掉内联元素之间的换行
• 将内联元素的腹肌设置 font - size 为 0 ，内联元素自身在设置 font - size

总结: 行内元素水平方向有效，竖直方向无效

行内块元素

特点：

• 和相邻行内元素在一行上，但是中间有空白缝隙；

• 一行可显示多个；​

• 默认宽度就是他本身内容的宽度

• 高度，行高，内外边距都可以设置

行内块元素 input，img td

元素显示模式的转换：

转换为块元素：display:block;

转换为行内元素：display:inline;

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