黑马H5C3笔记——元素显示模式

1、什么是元素显示模式？

        元素显示模式就是元素以什么样的方式进行显示，比如<div>自己占一行。

 

HTML元素一般分为快元素和行内元素。

2、块元素

常见的块元素： div、p、h1~h6、ul、ol、dl、li、dd、table、hr、table、menu、pre等

• 块元素的特点：

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

        注意：

1. 文字类的元素内里面不能使用块元素。
2. <p>标签内主要用于存放文字，因此<p>标签内不能使用块元素，特别是<div>。
3. <h1>~<h6>等文字类标签同理。

3、行内元素

常见的行内元素有a、strong、b、em、i、del、s、ins、span等。

• 行内元素的特点：

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

        注意：

1. 链接里面不能再放链接。
2. 特殊情况<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。

 

4、行内块元素

在行内元素中有几个特殊的标签：<img/>、<input/>、<td>，它们同时具有块元素和行内元素的特点，有些资料称它们为行内块元素。

• 行内块元素的特点：

1. 相邻行内元素在一行上，但是它们之间会有空白缝隙，一行可以显示多个。
2. 默认宽度就是本身内容的宽度。
3. 高度、宽度、外边距、内边距都可以控制。