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

izhuhaodev 发布于2019-08-28 18:12 / 2008人阅读

摘要：元素宽度为第一种情况元素为文档流中元素结论将上面结论中的例子元素宽度换为，表现与结论例子的表现一样，因此若元素为文档流中元素，则子元素宽度为父元素宽度的的。

约定:以下所讨论元素均为,display:block的非置换元素。
关于什么是置换元素，什么是非置换元素元素，以及在w3c标准中定义的各种视觉化格式的框将在一篇博文中作出详细阐述。

1.元素不设宽度 第一种情况：元素为文档流中元素

dd

dd

dd

结论1：把子元素定位换成position：relative与上述例子表现一样，因此在元素不设宽度时，若元素为文档流中元素，则此元素继承其父元素宽度

第二种情况：元素为脱离文档流元素

dd

结论2：把子元素定位换成position:absolute或position:fixed与上述例子表现一样，因此在元素不设宽度的情况下，若子元素为脱离文档流元素，则此元素宽度等于其内容宽度。

2.元素宽度为100% 第一种情况：元素为文档流中元素

结论3：将上面结论1中的例子元素宽度换为100%，表现与结论1例子的表现一样，因此若元素为文档流中元素，则子元素宽度为父元素宽度的的100%。

第二种情况：元素为脱离文档流元素

1.元素为浮动元素

dd

dd

结论4：当元素宽度为100%时，若元素为浮动元素，则此元素宽度为父元素宽度的100%。

2.元素为绝对定位元素

dd

dd

dd

结论5：当元素宽度为100%时，若元素为绝对定位元素，则元素宽度等于元素的offset-parent宽度的100%

3.元素为固定定位元素

dd

dd

结论6：当元素宽度为100%时，若元素为固定定位元素，则元素的宽度始终都为body宽度的100%

总结一 1.在元素不设宽度的情况下：

若元素为普通流中元素，元素宽度等于父元素宽度;
若元素不在文档流中,元素宽度等于内容宽度;

2.在元素宽度为100%的情况下：

若元素为普通流元素或者浮动元素，元素宽度为父元素宽度的100%；若元素为绝对定位元素，元素宽度为元素offset-parent宽度的100%；若元素为固定定位元素，元素宽度始终为body的100%

关于元素高度的讨论

根据上面关于宽度的讨论，大家可以自己根据此思路进行元素高度讨论得出结论，这里我就直接给出我经过验证得出的结论。若有不当之处，请指正。

总结二 1.在元素不设高度的情况下：

若元素没有内容，则高度为0；若元素有内容，元素高度为内容高度

2.在元素高度为100%的情况下：

若元素为普通流元素或者浮动元素，元素高度为父元素高度的100%；若元素为绝对定位元素，元素高度为元素offset-parent高度的100%；若元素为固定定位元素，元素高度始终为body的100%

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

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

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

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

前言：在上一篇文章中讨论了关于块级非置换元素宽度与高度在不同情况下的表现，在这篇文章中将详细的阐述来自w3c定义的视觉化格式模型中对于各种元素的定义，以及行内级非置换元素与行内级置换元素宽度与高度的讨论元素的各种定义块级元素与块元素块级元素(block-level elements) 那些视觉上会被格式化成块状的元素，通俗一点来说就是那些会换新行的元素。display 属性值为：block,...

曹金海 2019-08-28 18:14 评论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
[译] 关于两种视口（viewport）的故事：其一

摘要：它能给予一个关于你使用何种设备的正式结论，并且能通过获得。宽度两倍，高度两倍，总体四倍。视口的作用是限制元素，元素是所有网页块元素中最高一级的元素。视口并非一个结构，其不受控制。重点是上诉结论是在缩放的条件下成立的。原文地址：http://quirksmode.org/mobile/... 这篇小短文中，我将会介绍关于viewport与诸如html元素，window 对象，scree...

rose 2019-08-01 15:43 评论0 收藏0