HTML置换元素与非置换元素
2018-03-10 18:19
190 查看
一、置换元素
1. 一个内容 不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。
2. 置换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。
3. 例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容;又例如根据input标签的type属性来决定是显示输入框,还是单选按钮等。
4. HTML中的img、input、textarea、select、object都是置换元素。这些元素往往没有实际的内容,即是一个空元素。
二、非置换元素
HTML 的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器),如:<!-- span是非置换元素 因此 hello word 被展示出来 而不是被替换成其他内容 -->
<span> hello world </span>三、行内级置换元素的宽度定义
1. 若宽高的计算值都为 auto 且元素有固有宽度,则 width 的使用值为该固有宽度
例:拥有默认宽高的 input 当宽度的计算值为auto时,则宽度使用值为其默认的固有宽度
2. 若宽度的计算值为 auto 且元素有固有宽度,则 width 的使用值为该固有宽度
3. 若宽度的计算值为 auto 且高度有 非aut
a927
o 的计算值,并且元素有固有宽高比,则 width 的使用值为 高度使用值 * 固有宽高比
例:img 当只定义了其高度值时,其宽度将会根据固有宽高比进行等比设置,这也是为什么img是行内元素,但可以设置宽高的原因
4.除此之外,当 width 的计算值为 auto 时,则宽度的使用值为 300px
例:比如iframe, canvas
四、行内级置换元素的高度定义
1. 若宽高的计算值都为 auto 且元素有固有高度,则 height 的使用值为该固有高度;
2. 若高度的计算值为 auto 且元素有固有高度,则 height 的使用值为该固有高度;
3. 若高度的计算值为 auto 且宽度有 非auto 的计算值,并且元素有固有宽高比,则 height 的使用值为:宽度使用值 / 固有宽高比;
4. 若高度的计算值为 auto 且上述条件完全不符,则 height 的使用值 不能大于150px,且宽度不能大于长方形高度的2倍。
五、行内非置换元素的宽度、高度定义是无效的。
1. 一个内容 不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。
2. 置换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。
3. 例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容;又例如根据input标签的type属性来决定是显示输入框,还是单选按钮等。
4. HTML中的img、input、textarea、select、object都是置换元素。这些元素往往没有实际的内容,即是一个空元素。
二、非置换元素
HTML 的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器),如:<!-- span是非置换元素 因此 hello word 被展示出来 而不是被替换成其他内容 -->
<span> hello world </span>三、行内级置换元素的宽度定义
1. 若宽高的计算值都为 auto 且元素有固有宽度,则 width 的使用值为该固有宽度
例:拥有默认宽高的 input 当宽度的计算值为auto时,则宽度使用值为其默认的固有宽度
2. 若宽度的计算值为 auto 且元素有固有宽度,则 width 的使用值为该固有宽度
3. 若宽度的计算值为 auto 且高度有 非aut
a927
o 的计算值,并且元素有固有宽高比,则 width 的使用值为 高度使用值 * 固有宽高比
例:img 当只定义了其高度值时,其宽度将会根据固有宽高比进行等比设置,这也是为什么img是行内元素,但可以设置宽高的原因
4.除此之外,当 width 的计算值为 auto 时,则宽度的使用值为 300px
例:比如iframe, canvas
四、行内级置换元素的高度定义
1. 若宽高的计算值都为 auto 且元素有固有高度,则 height 的使用值为该固有高度;
2. 若高度的计算值为 auto 且元素有固有高度,则 height 的使用值为该固有高度;
3. 若高度的计算值为 auto 且宽度有 非auto 的计算值,并且元素有固有宽高比,则 height 的使用值为:宽度使用值 / 固有宽高比;
4. 若高度的计算值为 auto 且上述条件完全不符,则 height 的使用值 不能大于150px,且宽度不能大于长方形高度的2倍。
五、行内非置换元素的宽度、高度定义是无效的。
相关文章推荐
- html——置换元素和非置换元素
- HTML中的置换元素(替换元素)和非置换元素(不可替换元素)
- HTML中的置换元素与非置换元素
- 置换元素(替换元素)和非置换元素(不可替换元素)
- 关于HTML中的置换与非置换元素
- 于鹏:置换元素和非置换元素
- HTML中置换元素和非置换元素
- 如何自动在html页面加载时动态改变div等元素的高度和宽度
- HTML中常用的元素属性或方法
- JavaScript高级程序设计——第2章 在HTML中使用JavaScript元素
- HTML常见元素集锦
- 03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素
- HTML行为元素和块级元素及语义化
- html表单中元素button点击莫名提交的问题
- jsoup设置一个元素的HTML内容
- html 块级元素和行级元素
- html下select追加元素,IE下错误
- 黑马程序员--HTML 元素
- html——原生js与jquery创建元素节点区别
- 几个网站的源文件分析【有感于html常用元素和属性】