CSS对元素的分类

概述

CSS从两个维度上将HTML元素进行了分类：

1. 从元素内容的表现形式上，将元素分为：置换元素、非置换元素。
2. 从元素自身的显示方式上，将元素分为：行内元素、块级元素、行内块级元素。

要清楚理解元素内容和元素自身的区别：

1. 讨论元素内容的时候，元素就是个容器，里面装的东西就是要关注的内容
2. 讨论元素自身的时候，内容不重要，它的位置、宽高、内外边距才是重点

置换元素/非置换元素

重点关注元素内容的渲染效果：内容来源、如何创建。

浏览器渲染HTML文档，创建元素内容的时候，分两种情况：

1. 可以直接从元素标签中获得元素内容。比如<p>内容区</p>，直接渲染内容区就能创建好<p>元素的内容，这种元素就是非置换元素
2. 需要引入额外对象，才能创建好元素内容。比如<img src="photo.png" />，需要额外加载图片，才能创建好<img>元素的内容，再比如<button>按钮</button>，浏览器要引入一个按钮组件，才能创建好<button>元素的内容，这种元素就是置换元素。

在HTML文档中，大部分是都非置换元素，只有少数几个置换元素：<img>、<select>、<textarea>、<input>、<button>、<iframe>、<video>、<audio>、<embed>、<object>

置换元素

特点：

1. 从HTML源码文档中看元素标签，只能看到元素自身，看不到具体的元素内容
2. 修改元素某些属性值，就可以改变元素内容，比如<input>的type属性，<img>的src属性
3. 元素自身一般拥有固定尺寸（宽、高、宽高比），部分元素有height和width属性
4. CSS渲染模型美化不了元素内容，只能对元素自身进行美化

非置换元素

特点：

1. 从HTML源码文档中看元素标签，可以同时看到元素自身和具体的元素内容
2. 严格遵循CSS渲染模型机制，元素自身和元素内容都可以被CSS美化

行内元素/块级元素/行内块级元素

重点关注元素自身的渲染效果：位置、宽高、内外边距。

这种分类方式跟CSS属性display有直接关系，该属性可选值有很多，这里只涉及其中三个：

1. 行内元素：用display: inline渲染的元素
2. 块级元素：用display: block渲染的元素
3. 行内块级元素：用display: inline-block渲染的元素

浏览器会为每个HTML元素赋予一个默认的display属性值，主动改变这个值就可以改变默认的元素分类，比如：

1. 用display: block修饰<a>元素，就把行内元素变成了块级元素
2. 用display: inline修饰<div>元素，就把块级元素变成了行内元素

行内元素

特点：

1. 在父元素文档流中不会独占一行，左右两边可以出现其它行内元素
2. 不能控制高度height和宽度width，默认高度和宽度分别为元素内容的高度和宽度
3. 仅能在左右两个方向上控制外边距margin和内边距padding，上下两个方向不能控制
4. 行内元素中不能放置块级元素，否则会被CSS渲染出来一些很奇怪的样式效果

在特点1中，相邻行内元素之间会存在空白间隙的问题，可参考其它文章解决。
在特点2中，如果行内元素同时也是置换元素，就可以控制元素的宽高，这是特例。

常见行内元素：<img>、<a>、<label>、<span>、<strong>、<small>、<em>、<i>、<b>、<abbr>、<br>、<dfn>、<code>、<kbd>、<q>、<samp>、<sub>、<sup>、<var>、<city>、<iframe>

块级元素

特点：

1. 在父元素文档流中独自占据一整行，左右两边不会出现其他元素
2. 可以控制高度height和宽度width，默认高度为元素内容高度，默认宽度为父元素100%宽度
3. 可以在上下左右四个方向上控制外边距margin和内边距padding

常见块级元素：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<ol>、<ul>、<li>、<dl>、<dt>、<dd>、<div>、<form>、<fieldset>、<legend>、<article>、<header>、<main>、<footer>、<figure>、<blockquote>、<figcaption>、<hr>、<p>、<pre>

行内块级元素

既有行内元素特点，又有块级元素特点：

1. 在父元素文档流中不会独占一行，左右两边可以有其它元素（行内元素特点）
2. 可以控制高度height和宽度width（块级元素特点），默认高度和宽度分别为元素内容的高度和宽度（行内元素特点）
3. 可以在上下左右四个方向上控制外边距margin和内边距padding（块级元素特点）

常见行内块级元素：<button>、<input>、<textarea>、<select>