- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
根据 height
的规范,元素的包含框需要有明确的 height
才能使百分比高度作用于元素(即 的数值>100%
高度用于所有父级包含框)。
但是,为什么相同的规则似乎不适用于百分比 width
?当我在包含没有显式 width
的包含框的元素上设置百分比 width
时,它似乎仍然会更改元素的宽度。 (见示例)
.first {
background-color: teal;
}
.second {
background-color: gold;
width: 30%; /* the '.second' box becomes narrower! */
height: 40%; /* <-- doesn't have any effect */
}
<div class="first">
""
<div class="second">
""
</div>
</div>
最佳答案
正常流中的非替换 block 级元素采用width
他们的 parent 。
嗯,那是一个 lie-to-children !
为了了解幕后发生的事情,我们应该从如何开始 width
of a non-replaced block-level element计算得出。
10.3.3 Block-level, non-replaced elements in normal flow
The following constraints must hold among the used values of the other properties:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
[...] If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.
由于 width
的初始值属性是 auto
, width
block 级元素的元素与其包含 block 相同。
<html>
是一个 block 级元素,它位于 initial containing block 中.
初始包含 block 是一个矩形框 takes the width of the viewport .因此 <html>
的宽度元素将等于视口(viewport)的宽度。
另一方面,<body>
的包含 block 元素由 <html>
生成.因此它们也将具有相同的宽度。
<body>
本身为其 block 级子级建立一个包含 block 。这就是为什么 <div>
正常流中的元素将占用视口(viewport)的宽度。
W3C 表明它更好:
With no positioning, the containing blocks (C.B.) in the following document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Illustration of containing blocks</TITLE>
</HEAD>
<BODY id="body">
<DIV id="div1">
<P id="p1">This is text in the first paragraph...</P>
<P id="p2">This is text <EM id="em1"> in the
<STRONG id="strong1">second</STRONG> paragraph.</EM></P>
</DIV>
</BODY>
</HTML>
are established as follows:
For box generated by C.B. is established by
html initial C.B. (UA-dependent)
body html
div1 body
p1 div1
p2 div1
em1 p2
strong1 p2
然而,对于 height
而言,情况并非如此。未替换的 block 级元素(仍在正常流程中!):
10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'
[...] If 'height' is 'auto', the height depends on whether the element has any block-level children and whether it has padding or borders.
[...] Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored, and relatively positioned boxes are considered without their offset).
height
的初始值是auto
,因此如果 block 级元素没有任何 block 级子元素、填充或边框,则 height
的计算值将是 0
.
关于html - 为什么即使没有为包含 block 给出明确的宽度值,百分比宽度仍然有效?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28353625/
我在 linux 上工作。我对windows没有太多想法。 windows中文件的权限是如何组织的?我们在unix中是否有像chmod这样的api来更改权限? 最佳答案 对于 Windows,有一个名
应用程序编程接口(interface) (API) 是一组用于访问基于 Web 的软件应用程序的编程指令和标准。 如果出现 ,有人可以向我解释一下吗?谷歌地图 或 优酷 这是API哪个是softwar
我有两个应用程序,A 和 B,它们使用 android 库 C。B 有一个服务 A 想通过 C 使用,例如 在我的库中有一个类试图将它绑定(bind)到服务,
我正在正常或安全模式下启动相机应用程序,具体取决于使用我的应用程序执行的手势,但一旦用户选择应用程序并点击始终,则没有选项可以更改默认值,即使是从 Android 的设置菜单中也是如此. camera
我有一个数据集,本质上是一个稀疏二进制矩阵,表示两个集合的元素之间的关系。例如,让第一组是人(用他们的名字表示),例如像这样的东西: people = set(['john','jane','mike
何为pythonic? pythonic如果翻译成中文的话就是很python。很+名词结构的用法在中国不少,比如:很娘,很国足,很CCTV等等。 我的理解为,很+名词表达了一种特殊和强调的意味。
某些 Prolog 目标的确定性成功问题已经一次又一次地出现在 - 至少 - 以下问题: Reification of term equality/inequality Intersection an
我指的是 DateTime.TryParse(string s, out DateTime result) 重载,它尝试从字符串中解析 DateTime - 没有特定的格式正在指定。 我可以从http
2020 年 04 月 10 日,《中共中央国务院关于构建更加完善的要素市场化配置体制机制的意见》正式公布,将数据确立为五大生产要素(土地、资本、劳动力以及技术)之
有人可以解释一下 NSNotification 的 addObserver 函数中 notificationSender 的用途吗? 这是 Apple 文档的解释: notificationSende
我是一名优秀的程序员,十分优秀!