概述
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>