CSS对元素的分类
文章目录
- 概述
- 置换元素/非置换元素
- 置换元素
- 非置换元素
- 行内元素/块级元素/行内块级元素
- 行内元素
- 块级元素
- 行内块级元素
概述
CSS从两个维度上将HTML元素进行了分类：
- 从元素内容的表现形式上，将元素分为：置换元素、非置换元素。
- 从元素自身的显示方式上，将元素分为：行内元素、块级元素、行内块级元素。
要清楚理解元素内容和元素自身的区别：
- 讨论元素内容的时候，元素就是个容器，里面装的东西就是要关注的内容
- 讨论元素自身的时候，内容不重要，它的位置、宽高、内外边距才是重点
置换元素/非置换元素
重点关注元素内容的渲染效果：内容来源、如何创建。
浏览器渲染HTML文档，创建元素内容的时候，分两种情况：
- 可以直接从元素标签中获得元素内容。比如
<p>内容区</p>，直接渲染内容区就能创建好<p>元素的内容，这种元素就是非置换元素 - 需要引入额外对象，才能创建好元素内容。比如
<img src="photo.png" />，需要额外加载图片，才能创建好<img>元素的内容，再比如<button>按钮</button>，浏览器要引入一个按钮组件，才能创建好<button>元素的内容，这种元素就是置换元素。
在HTML文档中，大部分是都非置换元素，只有少数几个置换元素：<img>、<select>、<textarea>、<input>、<button>、<iframe>、<video>、<audio>、<embed>、<object>
置换元素
特点：
- 从
HTML源码文档中看元素标签，只能看到元素自身，看不到具体的元素内容 - 修改元素某些属性值，就可以改变元素内容，比如
<input>的type属性，<img>的src属性 - 元素自身一般拥有固定尺寸（宽、高、宽高比），部分元素有
height和width属性 CSS渲染模型美化不了元素内容，只能对元素自身进行美化
非置换元素
特点：
- 从
HTML源码文档中看元素标签，可以同时看到元素自身和具体的元素内容 - 严格遵循
CSS渲染模型机制，元素自身和元素内容都可以被CSS美化
行内元素/块级元素/行内块级元素
重点关注元素自身的渲染效果：位置、宽高、内外边距。
这种分类方式跟CSS属性display有直接关系，该属性可选值有很多，这里只涉及其中三个：
- 行内元素：用
display: inline渲染的元素 - 块级元素：用
display: block渲染的元素 - 行内块级元素：用
display: inline-block渲染的元素
浏览器会为每个HTML元素赋予一个默认的display属性值，主动改变这个值就可以改变默认的元素分类，比如：
- 用
display: block修饰<a>元素，就把行内元素变成了块级元素 - 用
display: inline修饰<div>元素，就把块级元素变成了行内元素
行内元素
特点：
- 在父元素文档流中不会独占一行，左右两边可以出现其它行内元素
- 不能控制高度
height和宽度width，默认高度和宽度分别为元素内容的高度和宽度 - 仅能在左右两个方向上控制外边距
margin和内边距padding，上下两个方向不能控制 - 行内元素中不能放置块级元素，否则会被
CSS渲染出来一些很奇怪的样式效果
在特点1中，相邻行内元素之间会存在空白间隙的问题，可参考其它文章解决。
在特点2中，如果行内元素同时也是置换元素，就可以控制元素的宽高，这是特例。
常见行内元素：<img>、<a>、<label>、<span>、<strong>、<small>、<em>、<i>、<b>、<abbr>、<br>、<dfn>、<code>、<kbd>、<q>、<samp>、<sub>、<sup>、<var>、<city>、<iframe>
块级元素
特点：
- 在父元素文档流中独自占据一整行，左右两边不会出现其他元素
- 可以控制高度
height和宽度width，默认高度为元素内容高度，默认宽度为父元素100%宽度 - 可以在上下左右四个方向上控制外边距
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>
行内块级元素
既有行内元素特点，又有块级元素特点：
- 在父元素文档流中不会独占一行，左右两边可以有其它元素（行内元素特点）
- 可以控制高度
height和宽度width（块级元素特点），默认高度和宽度分别为元素内容的高度和宽度（行内元素特点） - 可以在上下左右四个方向上控制外边距
margin和内边距padding（块级元素特点）
常见行内块级元素：<button>、<input>、<textarea>、<select>