css(四)之元素显示模式

css元素显示模式

就是元素以什么方式显示，比如div可以自己放一行，可以放多个span，一般分为块元素与行内元素。

块元素

块元素的特点：

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

常见的块元素有h1-h6，p，div，ul，ol，li

注意：

• p和h1-h6标签内不允许放div。

行内元素

行内元素特点：

• 相邻行内元素在一行上，行内可以显示多个。
• 高宽直接设置是无效的。
• 默认宽度是其本身内容的宽度。
• 行内元素只能容纳文本或其他行内元素。

常见的行内元素有strong,span等。

行内块元素

行内块元素特点：

• 相邻行内元素在一行上，但他们之间有空白间隙，一行可以显示多个。（行内元素）
• 默认宽度就是他本身内容的宽度。（行内元素）
• 高度，行高，外边距以及内边距都可以控制。（块元素）

常见的行内元素有img、input、td等。

元素显示模式的转换

有时，我们需要这样的需求：一个模式的元素需要另外一个元素的特性。
比如要让行内块元素改变高度和宽度。

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