黑马程序员技术交流社区

标题: HTML行内置换元素与非置换元素的区分 [打印本页]

作者: Lishixuan 时间: 2019-9-26 23:11
标题: HTML行内置换元素与非置换元素的区分
行内元素与块级元素对比内容一般情况下，行内元素只能包含数据和其他行内元素。而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。格式默认情况下，行内元素不会以新行开始，而块级元素会新起一行。行内元素列表下面的元素都是行内元素：·

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视频。

什么是置换元素？一个内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。
什么是非置换元素？w3c并没有给出明确的非置换元素的解释，但能确定的是除置换元素之外，所有的元素都是非置换元素。
行内级置换和非置换元素的宽度定义对于行内级非置换元素，宽度设置是不适用的。
对于行内级置换元素来说，其宽度的设置需遵循以下几点：

若宽高的计算值都为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度；

典型的例子是：拥有默认宽高的 input 当宽度的计算值为auto时，则宽度使用值为其默认的固有宽度
若宽度的计算值为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度；

例子同上
若宽度的计算值为 auto 且高度有非auto 的计算值，并且元素有固有宽高比，则width 的使用值为高度使用值 * 固有宽高比；

典型的例子：img 当只定义了其高度值时，其宽度将会根据固有宽高比进行等比设置
除此之外，当 width 的计算值为 auto 时，则宽度的使用值为 300px

典型的例子：比如iframe, canvas

其它类型的置换元素，其宽度的定义都参照行内置换元素的定义。
行内级置换和非置换元素的高度定义对于行内级非置换元素，高度设置是不适用的。
对于行内级置换元素来说，其高度的设置需遵循以下几点：

若宽高的计算值都为 auto 且元素有固有高度，则 height 的使用值为该固有高度；
若高度的计算值为 auto 且元素有固有高度，则 height 的使用值为该固有高度；
若高度的计算值为 auto 且宽度有非auto 的计算值，并且元素有固有宽高比，则height 的使用值为：宽度使用值 / 固有宽高比；
若高度的计算值为 auto 且上述条件完全不符，则 height 的使用值不能大于150px，且宽度不能大于长方形高度的2倍。

其它类型的置换元素，其高度的定义都参照行内置换元素的定义。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2