CSS:关于元素高度与宽度的讨论系列文章（二）

曹金海发布于2019-08-28 18:14 / 2665人阅读

前言：在上一篇文章中讨论了关于块级非置换元素宽度与高度在不同情况下的表现，在这篇文章中将详细的阐述来自w3c定义的视觉化格式模型中对于各种元素的定义，以及行内级非置换元素与行内级置换元素宽度与高度的讨论

元素的各种定义 块级元素与块元素 块级元素(block-level elements)

那些视觉上会被格式化成块状的元素，通俗一点来说就是那些会换新行的元素。display 属性值为：block, list-item, table 值都可以将一个元素设置成块级元素。

块元素

display属性值为block的元素，是块级元素的一个子集。

行内级元素与行内元素 行内级元素(inline-level elements)

行内级元素是那些不会为自身内容形成新的块，而让内容分布在同一行中的元素。display 属性的：inline, inline-table, inline-block 值都可以将一个元素设置成行内级元素。

行内元素

display属性为inline的元素，是行内级元素的一个子集

置换元素与非置换元素 置换元素(replaced element)

一个内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。这类元素，浏览器根据元素的标签和属性，来决定元素的具体显示内容。
常见的置换元素有这些：img,input,textarea,select,button等

非置换元素(non-replaced element)

w3c并没有给出明确的非置换元素的解释，但能确定的是除置换元素之外，所有的元素都是非置换元素。

元素高度与宽度的讨论 行内级非置换元素

宽度与高度的设置对于行内级非置换元素时不适用的，例如span,a

行内级置换元素

在前面已经结束过关于置换元素的概念，置换元素一般都是一般拥有固有尺寸（宽度，高度，宽高比）的元素，因此对于置换元素在不设宽度和高度的情况下，元素宽高度等于元素自身固有尺寸。因此只用对当元素宽度或者高度设为100%的情况进行讨论

1.有固有比例的元素

对于有固有比例的元素来说如果宽度与高度的一方有确定的值，若另一方并无设置值，则另一方的计算值就由确定的高度或者宽度乘以固有比例来得到，因此对于有固有比例的元素，我们只用讨论高度与宽度中的一方即可，例如img元素

2.没有固有比例的元素

对于没有固定比例的元素，元素的宽度或者高度不会随另一方的变化而变化，例如input,textarea,select,button等

结论

对于行内级置换元素：在设宽度为100%的情况下
比照上一篇的例子，可自行进行实验，这里我就直接给出结论
若元素为普通流元素或者浮动元素，元素宽度或者高度为父元素宽度或者高度的100%；若元素为绝对定位元素，元素宽度或者高度为元素offset-parent宽度或者高度的100%；若元素为固定定位元素，元素宽度或者高度始终为body的100%

参考：
http://www.w3.org/TR/CSS21/conform.html
http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html
视觉格式化模型中的各种框
置换元素与非置换元素

GPU云服务器云服务器关于云服务器的文章宽度高度屏幕高度宽度 html宽度高度

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111106.html

CSS：关于元素宽度与高度的讨论系列文章（一）

摘要：元素宽度为第一种情况元素为文档流中元素结论将上面结论中的例子元素宽度换为，表现与结论例子的表现一样，因此若元素为文档流中元素，则子元素宽度为父元素宽度的的。约定:以下所讨论元素均为,display:block的非置换元素。关于什么是置换元素，什么是非置换元素元素，以及在w3c标准中定义的各种视觉化格式的框将在一篇博文中作出详细阐述。 1.元素不设宽度第一种情况：元素为文档流中元素 ...

izhuhaodev 2019-08-28 18:12 评论0 收藏0
CSS:关于元素高度与宽度的讨论系列文章(三)

摘要：元素不在文档流中结论如文章一中的结论一样元素宽度等于其内容所占空间同样的在文章一中也得出了元素不设高度元素的高度为其内容所占据空间若没有内容则高度为。前言在CSS:关于元素高度与宽度的讨论系列文章（一）中讨论了display为display：block的置换元素的宽度与高度在不同情况下的表现,但是有些地方并不严谨,因此在这里做一个补充，在补充前先简单介绍一下css盒模型以及其在可...

syoya 2019-08-28 18:18 评论0 收藏0
CSS：元素高度与宽度的讨论系列文章(四)

摘要：总结置换元素的高宽度计算规律都一样。非置换元素块级非置换元素如，具体计算见前面的文章非置换元素如，宽度与高度的设置对他不起作用非置换元素元素不设宽度，则元素宽度等于内容宽度前言在之前的文章主要讨论了下面几种元素宽度与高度的计算: 块级非置换元素(例:div) Inline,非置换元素(例:span) Inline,置换元素(例:表单元素)这篇文章将继续讨论下列几种元素的宽度与高度...

hqman 2019-08-30 12:55 评论0 收藏0
CSS:Margin与布局

摘要：参考线示意图如图所示按箭头所指方向使参考线变化的值都为正值。栗子没在上加前效果如图发生了堆叠。因此效果上来看便符合了预期如图此布局便利用了原理，通过元素对相邻元素位置的控制来达到预期的效果。 Margin与宽高度的关系博客同步地址Margin与布局在讲此之前，必须知道什么是containing-box以及一些宽高度的一些关系，关于containing-box的概念以及与宽高度的关系...

ivan_qhz 2019-08-28 18:24 评论0 收藏0
CSS：不同元素margin:auto的计算

摘要：块级置换元素，在文档流中同块级非置换元素一样。块级非置换元素，不在文档流中当这个值不是，而，则包含块的高度定位元素高度块级置换元素，不在文档流中同上总结行内级元素行内级置换元素和非置换元素，在值为时，和的计算值都为。关于什么元素的分类可以看我这篇文章CSS:关于元素高度与宽度的讨论系列文章（二）行内级元素 Inline，非置换元素:如果margin值为auto，则margin-...

Michael_Ding 2019-08-30 12:55 评论0 收藏0