前部分转载自:详解HTML行内置换元素与非置换元素的区分
一般情况下,行内元素只能包含数据和其他行内元素,除非你可以对css进行更改,那就可以另说了。
而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。
以上只是个大概的说法,具体都某些特定的元素这条规律不一定适用~
通常我们的认识是这样的:
一、行内元素
- b, big, i, small, tt
- abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
- a, bdo, br, img, map, object, q, script, span, sub, sup
- button, input, label, select, textarea等
二、块级元素
<address>
联系方式信息。<article>
HTML5文章内容。<aside>
HTML5伴随内容。<audio>
HTML5音频播放。<blockquote>
块引用。<Canvas>
HTML5绘制图形。<dd>
定义列表中定义条目描述。<div>
文档分区。<dl>
定义列表。<fieldset>
表单元素分组。<figcaption>
HTML5图文信息组标题<figure>
HTML5图文信息组 (参照<figcaption>
)。<footer>
HTML5区段尾或页尾。<form>
表单。<h1>
,<h2>
,<h3>
,<h4>
,<h5>
,<h6>
标题级别 1-6.<header>
HTML5区段头或页头。<hgroup>
HTML5标题组。<hr>
水平分割线。<noscript>
不支持脚本或禁用脚本时显示的内容。<ol>
有序列表。<output>
HTML5表单输出。<p>
行。<pre>
预格式化文本。<section>
HTML5一个页面区段。<table>
表格。<tfoot>
表脚注。<ul>
无序列表。<video>
HTML5视频。- <iframe>内联框架等
先进一个题外话
在面试一个
重构
(各大公司的叫法可能不太一样)时,我喜欢从一个点开始问,然后一直延展下去成为一条线,甚至是一个面,直到问到不会的地方,然后又换另外一个点。
例如:我可能会说,能简单聊聊
行内级元素
和块级元素
的区别吗。
一般这时,候选人都会说到 行内级元素
不会换新行,而 块级元素
会格式化为块状,即换行。但也有些遗憾的方面(如:http://blog.csdn.net/syleapn/article/details/79582190),当然这看起来似乎不是特别重要。
这时我会继续问,
行内元素
能够定义宽度和高度吗?
不少候选人会说:不能
我会继续问,说几个你熟悉的
行内元素
吧
于是 span
, strong
, em
, ins
… 答案我还是比较满意的。
我仍然会继续,
img
是行内元素么?
候选人这时通常会迟疑一下,可能意识到我接下来想问啥了,但还是会回答:是
于是我会说,那
img
能定义宽度和高度么?
有的候选人这时会犹豫,因为如果回答是,就会推翻他之前说的 行内元素不能定义宽高
,如果回答不是,似乎又和他所熟知的经验不一致。但通常最后还是会回答:能
那我就又得问,你之前不是说
行内元素不能定义宽高
吗?为什么img
可以?
到这里,候选人基本上不知道要怎么回答好了,最后可能会告诉我,因为 img
是特殊元素
当然,虽然这么回答也不能说是错误的,但基本上也能知道候选人对这条线的基础的掌握程度了。
但我希望听到的答案是通过解释置换元素相关的概念从而给出答案。
ok,到了这儿,大家也略知一二是什么意思了吧,下面进入正题:
html元素分为置换元素(又叫替换元素)与非置换元素(又叫非替换元素),置换与非置换元素有稍许的区别。注:置换元素与非置换元素不仅是行内元素中有,块状元素也有置换元素与非置换元素之分->比如:嵌入的文档(iframe之类),还有audio和canvas在某些特定情形下也为置换元素。。。。。。使用CSS的content属性插入的对象是匿名替换元素。
那么什么是置换元素与非置换元素?
转化官方的话来说意思为:一个 内容
不受CSS视觉格式化模型控制(关于视觉格式化模型控制的问题,请戳这里->视觉格式化模型中的各种框),CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。即置换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。
举例说明:例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容;又例如根据input标签的type属性来决定是显示输入框,还是单选按钮等。->这些元素往往没有实际的内容,即是一个空元素。
非置换元素,W3C 中没有给出明确的定义,
说明:(X)HTML 的大多数元素是不可替换元素,他们将内容直接告诉浏览器,将其显示出来。比如<p>p的内容</p>、<label>label的内容</label>;浏览器将把这段内容直接显示出来。
是不是还是有点绕,还是不太明白,我们看下面的阐述,通俗易懂:
来自徐涛的博客->Html中置换元素与非置换元素,地址链接http://blog.sina.com.cn/s/blog_4c81e6230101e29u.html
其中有类特殊的元素:如img|input|select|textarea|button|label等,他们被称为可置换元素(Replaced element)。他们区别一般inline元素(相对而言,称non-replaced element)是:这些元素拥有内在尺寸(intrinsic dimensions),他们可以设置width/height属性。他们的性质同设置了display:inline-block的元素一致。
或许有朋友对非置换元素(non-replaced element)有点疑惑,稍微帮助大家理解一下。非置换元素,W3C 中没有给出明确的定义,但我们从字面可以理解到,非置换元素对应着置换元素(replaced element),也就是说我们搞懂了置换元素的含义,就懂了非置换元素。置换元素,W3C中给出了定义:
“An elementthat is outside the scope of the CSS formatter, such as an image,embedded document, or applet”
从定义中我们可以理解到,置换元素(replaced element)主要是指 img, input, textarea, select, object 等这类默认就有 CSS 格式化外表范围的元素。进而可知,非置换元素(non-replaced element)就是除了 img, input, textarea, select, object 等置换元素以外的元素。
补充:关于margin与padding->对于置换元素与非置换元素有不同影响?
关于这个问题,博主也正在研究中,这儿有篇文章很详细->http://blog.csdn.net/gr11222/article/details/52071168,大家可以也先参考下:欢迎一起来讨论这个问题~
但最后需明确的一点是:第一:html(行内元素+块状元素)分置换元素与非置换元素。
第二:padding、margin对置换元素与非置换元素的影响不同。
第三:对于块状非置换元素与行内非置换元素,padding与margin的影响不一样。块状置换元素与行内置换元素的性质一样。
So,最后问题上升到只需解决与清楚->行内置换元素与行内非置换元素的padding和margin使用!
附:w3c对padding与margin的说明