块级与行内元素

块级标签有哪些行为特征？

• 独占一行: 无论内容宽度多少都换行, 块级+行内、行内+块级、块级+块级都渲染成两行;
• 可设尺寸: 宽高属性生效;
• 嵌套范围: 可嵌套块级与行内元素;
• 常见标签: div、p、h1~h6、li、table、header、main;

<div>block A</div>
<p>block B</p>

行内标签有哪些行为特征？

• 不换行: 与相邻文本排在同一行;
• 尺寸由内容决定: 无法设置宽高;
• 嵌套范围: 可嵌套于块级与行内元素中;
• 常见标签: span、a、img、input、button;

<p>text <span>inline</span> text <a href="#">link</a></p>

块级与行内标签的嵌套规则是什么？

外层 → 内层	是否允许
块级 → 块级	允许
块级 → 行内	允许
行内 → 行内	允许
行内 → 块级	不允许

• 判断依据: 块级标签不能整体放进行内标签的范围里;

空元素是什么？

• 定义: 只包含单个标签的元素;
• 写法: <img src="a.png" alt="" />;
• 例子: img、br、hr、input;
• 边界: 空元素没有内容, 不能嵌套其他标签;