CSS元素显示模式

1 定义

• 元素显示模式就是：元素（标签）以什么方式进行显示。比如

  自己占一行，一行可以放多个

• html元素一般可以分为：块元素和行元素

2 块元素

常见的块级元素有div、hr、p、h1 - h6, ul , ol , form , table

2.1 特点

• 独占一行
• 可以控制：宽度，高度，内外边距
• 宽度默认是父容器的100%
• 是一个容器，里面可以放行内元素或者块级元素

注意：文字类的元素内不能使用块级元素。如<p>, <h1>~<h6>里面不可以使用div

3 行内元素

常见的行内元素有a, span, a, i ,em 等

3.1 特点

• 行内元素在一行可以显示多个

• 高和宽设置是无效的

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

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

注意：

• 链接里面不能再放链接

4 行内块元素

常见的行内块元素有：input, img, td。他们同事具有块元素和行内元素的特点。

4. 1 特点

• 一行可以显示多个，但是多个间会有空白缝隙。
• 宽度默认就是他本身内容的宽度
• 可以控制：宽度，高度，内外边距

5 元素显示模式的转换

常见的操作：想增加a链接的触发范围

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