摘要：的一些名词和概念用来帮你更明确地去描述世界的事物。具体信息可以参考盒模型的解释，这里暂且不作展开。的位置和大小时根据一个称为的边界进行计算的。其它情况，依据设定的值进行处理指定值最终表现值与指定值相同
CSS的一些名词和概念
用来帮你更明确地去描述HTML/CSS世界的事物。
box在CSS中，一个元素就可以看作一个box。具体信息可以参考盒模型的解释，这里暂且不作展开。
containing blocksBox的位置和大小时根据一个称为containing blocks的边界进行计算的。
block-level elements 和 block boxesblock-level elements 一般指HTML中的特定类型的元素，比如div，p，ul等。
block boxes 指形成一个block formatting contexts的boxes。可以确定的时正常的block-level（没有改变它的position，display等默认属性值）可以形成一个BFC。But，如果元素等display属性值为 "block", "list-item", 或 "table"中的一种，也可以对外表现出块级元素的行为。也会成为一个block box。
哪些情况会产生一个BFC：
根元素
float元素（float属性不是none）
display： block，table-cell，table-captain，list-item， table、table-row、 table-row-group、table-header-group、table-footer-group
position是absolute的元素（绝对定位）
overflow不等于visible
flex 元素
grid 元素
在一个BFC中，形成一个独立的布局环境，里面元素等布局位置不会受外部元素影响。
IFC （Inline formatting contexts）与BFC对应，一个行内元素默认也会形成一个IFC（行内格式化上下文）。IFC有个不同于一般的常识的特性：
当inline-level box宽度大于父容器宽度时会被拆分成多个inline-level box;
当属性direction为ltr时，margin/border/padding-left将作用于第一个的inline-level box，margin/border/padding-right将作用于最后一个的 inline-level box;
若属性direction为rtl时，margin/border/padding-right将作用于第一个的inline-level box，margin/border/padding-left将作用于最后一个的inline-level box;
before An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a "display" value of "inline" generates an inline box. Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box. after
注意示例中，content 元素这段话开头和结尾的外边距大小。
在CSS2中， 一个盒子的定位模式通常是一下三种：
Normal flow：正常的文档流是由 BFC、IFC和position是relative的 block boxes或inline boxes 组成。
Floats float属性值不等于none的元素通常称之为浮动元素。
absolute positioning （绝对定位元素） 绝对定位的元素完全从正常的文档流中移除，它的位置不会影响它后面元素的位置。
positioned elementposition属性值不是static的元素称之positioned element。
display，position和float的相对关系我们知道，display，position和float都会对元素的布局位置表现产生影响。那么它们三者之间是如何起作用的呢？
如果display:none; position和float将不会再起任何作用；
如果position属性是absolute或fixed，则float属性置为none（可以理解为不再存在float行为，即使手动设置了float不为none）， display行为依据下表的规则展示；元素的定位会依据top/right/bottom/left进行计算。
如果float属性值不为none，则display属性依据下表的规则展示；
如果元素是根元素，则display的展示依据下表规则表现。
其它情况，依据display设定的值进行处理
| 指定值 | 最终表现值 |
|---|---|
| inline-table | table |
| inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block | block |
| others | 与指定值相同 |
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117187.html
摘要：属性语法层面仅对属性作粗略分类。重点还是概念均决定了布局基础模式。常规布局的重心与难点。对应标准第章布局上下文格式化上下文在常规流中的框，都属于一个格式化的上下文中规则脱胎自文字排印，核心概念是。 发端自此。本文细节从略，只做主干梳理。 showImg(https://segmentfault.com/img/bVpFuh); 这个树主要还是在借CSS2.1标准的骨架，填充进一些新的C...
摘要：深入布局定位与浮动在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。定位后，原来在文档流中占据的位置，会被其他元素所占据。清除浮动的特殊应用清除浮动可以解决父元素高度塌陷问题。 深入css布局(2) — 定位与浮动 在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们来深...
摘要：前两个元素之间的是，因为较小的顶部与较大的底部相结合。这是由于两个重叠造成的。同样，这种行为也有一定的逻辑。这意味着在使用百分比时，元素周围的大小都是相同的。 为了保证的可读性，本文采用意译而非直译。 当我们学习CSS时，我们大多数人学到的第一件事是CSS中盒子的各个部分的细节，这部分通过叫做 CSS盒、模型。盒模型中的元素之一是margin，即盒子周围的透明区域，它会将其他元素从盒子...
摘要：前两个元素之间的是，因为较小的顶部与较大的底部相结合。这是由于两个重叠造成的。同样，这种行为也有一定的逻辑。这意味着在使用百分比时，元素周围的大小都是相同的。 为了保证的可读性，本文采用意译而非直译。 当我们学习CSS时，我们大多数人学到的第一件事是CSS中盒子的各个部分的细节，这部分通过叫做 CSS盒、模型。盒模型中的元素之一是margin，即盒子周围的透明区域，它会将其他元素从盒子...
摘要：盒模型的组成大家肯定都懂，由里向外盒模型是有两种标准的，一个是标准模型，一个是模型。指定元素的宽度和高度最小最大属性适用于的宽度和高度。盒模型的组成大家肯定都懂，由里向外content,padding,border,margin. 盒模型是有两种标准的，一个是标准模型，一个是IE模型。 从上面两图不难看出在标准模型中，盒模型的宽高只是内容（content）的宽高， 而在IE模型中盒模型...
阅读 3742·2021-09-22 15:17
阅读 1933·2021-09-22 14:59
阅读 2319·2020-12-03 17:00
阅读 3190·2019-08-30 15:55
阅读 469·2019-08-30 11:23
阅读 3463·2019-08-29 13:56
阅读 496·2019-08-29 12:54
阅读 2214·2019-08-29 12:49
