1. 首页
  2. css

探索CSS中宽度和高度的复杂性

下面的文章由urishaked和Michal Porag共同撰写。
让我们探索一下CSS如何计算元素的宽度和高度维度的复杂性。这是基于无数个深夜的调试和摆弄CSS属性的大量组合,阅读规范,并试图弄清楚为什么有些东西似乎会有这样或那样的行为。
但在开始之前,让我们讨论一些基础知识,这样我们就在同一页上了。基础知识
您有一个元素,您希望它的宽度为640px,高度为360px。这些只是符合16:9像素比例的任意数字。您可以这样显式地设置它们:
.element {width: 640px;height: 360px;}
现在,设计需要该元素中的一些padding。所以您修改了CSS:
.element {width: 640px;height: 360px;padding: 10px;}
现在元素的呈现宽度和高度是多少?我打赌你能猜到…它不再是640×360px了!它实际上是660像素,因为填充每边加10px(即上、右、下、左),高度和宽度都增加了20px***和border。这可能意味着呈现的大小比我们预期的要大,这很有趣,因为最后可能会发现一个元素声明的width和height值与呈现的完全不同。
这就是CSS Box模型的功能。它像这样计算宽度和高度:
/* Width */width + padding-left + padding-right + border-left + border-right/* Height */height + padding-top + padding-bottom + border-top + border-bottom
我们刚才看到的是如何计算块元素的尺寸。块元素包括任何自然占用可用全宽度的元素。因此,本质上,元素包含多少内容并不重要,因为它的宽度总是100%,也就是说,直到我们改变它。想想像、、、这样的元素,还有更多的元素。
但是现在我们应该看看内联元素,因为它们在盒子模型和它们的尺寸计算方式上表现不同。之后,我们将研究父元素和子元素之间的关系,以及它们如何影响彼此的宽度和高度计算。内联元素的奇怪情况
正如我们刚才看到的,任何元素的padding和border都包含在元素的计算宽度和高度维度中。有趣的是,有些情况下width和height属性没有任何影响。使用内联元素时就是这种情况,内联元素的宽度和高度由其包含的内容决定。内联元素,例如,将完全忽略width和height以及顶部和底部margin属性,因为内容决定了维度。在这里,有时视觉效果会有所帮助。CodePen Embed Fallback
看看嵌套在内联元素中的块元素是如何破坏内联元素的形状的,因为块元素不是由它包含的内容量定义的,而是由可用空间量定义的。当我们向内联元素添加边框时,您可以真正看到这一点。看看内联元素是如何在段落出现的地方突然停止,然后在段落后面继续的。CodePen Embed Fallback
span会看到段落,这会中断span的内联流,并从本质上中断它。迷人的东西!但还有更多!看看内联元素是如何完全忽略width和margin的,即使它们是在它上面声明的//codepen.io/anon/embed/wvzVyrr?height=200&theme id=1&slug hash=>CodePen嵌入回退
疯狂!父元素和子元素的父子关系是一种常见的模式。父元素是包含嵌套在其中的其他元素的元素。这些嵌套元素是父元素的子元素。

The width and height of an element gets super interesting with parent and child elements. Let\”s look at all the interesting quirks we get with this.Relative units
Let\”s start with relative units. A relative unit is computed by its context, or relation to other elements. Yeah, that\”s sort of a convoluted definition. There are several different types of relative units, but let\”s take percentages as an example. We can say that an element is 100% wide.

.parent {width: 100%;}
酷。如果我们将该元素放到一个空页面上,它将占用100%的可用水平空间。100%的计算结果取决于浏览器的宽度,对吗?1500像素的浏览器的100%宽度是1500像素。500像素的浏览器的100%宽度是500像素。这就是我们所说的相对单位。实际计算的值是由使用它的上下文决定的。
因此,精明的读者可能已经在想:嘿,这有点像一个子元素,它被设置为父元素的宽度。这是正确的。子对象的宽度为100%,将根据包含它的父元素的实际宽度。
高度的工作原理大致相同:它相对于父元素的高度。例如,具有不同高度维度但子元素相同的两个父元素会导致具有不同高度的子元素。CodePen嵌入回退填充和边距
当我们查看其他属性时,父子组合的宽度和高度变得更加有趣,例如
In the past, browsers also supported the media和
The above syntax is in fact still supported in Safari today, but it was removed from other browsers around 2014 because it was not considered a good feature:
It is not appropriate for choosing between low resolution and high resolution because the environment can change (e.g., the user might fullscreen the video after it has begun loading and want high resolution). Also, bandwidth is not available in media queries, but even if it was, the user agent is in a better position to determine what is appropriate than the author.
Scott Jehl (Filament Group) argues that the removal of this feature was a mistake and that websites should be able to deliver responsive video sources using 。显然,当我们为padding或margin指定一个百分比值时,它总是相对于父级的宽度,即使是在处理垂直边时也是如此。
一些聪明的设计师利用它来创建宽度和高度相等的框,或者在调整页面大小时保持一定纵横比的框。这对于视频或图像内容特别有用,但也可以创造性地使用(ab)。继续,在这个演示的可编辑元素中键入您想要的内容。无论添加了多少内容,框的高度和宽度都保持成比例。CodePen Embed Fallback
这种创建纵横比框的技术被亲切地称为\”padding hack\”。Chris对此进行了广泛的介绍。但是现在我们有了获得广泛浏览器支持的media属性,就没有什么理由去使用它了,我们应该检查另外两个影响元素宽度的有趣属性值:和clip-path: path()。
这些属性告诉浏览器查看元素的内容以确定其宽度。例如,如果我们有这样的文字:\”你好,CSS百科全书,很高兴认识你!\”,浏览器将计算文本在屏幕上所占的空间,并将其用作宽度。
path()和clip-path的区别在于浏览器如何进行此计算。对于path(),浏览器假装它有无限的空间,在测量宽度时将所有文本放在一行中。
对于clip-path,浏览器假装它没有空间,因此它将每个单词/子内联元素放在不同的行中。让我们看看它的实际作用:CodePen嵌入回退//codepen.io/anon/embed/qwgnr?height=350&theme id=1&slug hash=>CodePen Embed Fallback
当我们查看块元素和内联元素之间的差异时,我们实际上看到了***34***的作用。请记住,内联元素的宽度和高度仅与其包含的内容相同。我们只需在元素上声明***35***,就可以使大多数元素成为内联元素。CodePen嵌入回退
酷。我们还有一件武器是***36***。这将创建一个内联元素,但在长方体模型中通过块级计算得到增强。换句话说,它是一个内联元素,包含了***37***、***38***和***39***。两全其美!CodePen嵌入回退循环百分比大小
最后一点有意义吗?好吧,希望我不会把你搞糊涂了:CodePen Embed Fallback
本例中的子元素的相对宽度为33%。父元素上没有声明宽度。孩子的计算宽度是怎么计算出来的,而不是什么相关的东西?
要回答这个问题,我们必须看看浏览器如何计算本例中元素的大小。我们还没有为父元素定义特定的宽度,所以浏览器使用***40***的初始值,即***41***。由于父元素s***42***被设置为***43***,***44***的行为类似于***45***。正如我们所看到的,***46***应该意味着父元素和它的内容一样宽,即子元素中的所有内容。
因此,浏览器查看元素的内容(子元素)来确定它的宽度。但是,子对象的宽度也取决于父对象的宽度!啊,这太奇怪了!
CSS框大小调整模块规范调用此循环百分比大小调整。我不知道它为什么这么叫,但它详细说明了浏览器要做的复杂数学运算:(1)确定父元素的宽度,以及(2)将该宽度与子元素的相对宽度协调起来。
一旦你

探索CSS中宽度和高度的复杂性 为WP2原创文章,链接:https://www.wp2.cn/css/%e6%8e%a2%e7%b4%a2css%e4%b8%ad%e5%ae%bd%e5%ba%a6%e5%92%8c%e9%ab%98%e5%ba%a6%e7%9a%84%e5%a4%8d%e6%9d%82%e6%80%a7/