摘要：魔法堂重新认识和魔法堂你一定误解过的魔法堂就这个样魔法堂说说那个被埋没的志向深入细节后会发现中定位模式之间，和之间存在千丝万缕的关系，必须以俯瞰的角度捋一下。当采用时，属性的实际值会被重置为。由于和则需要通过来引入来提供盒子定位微调的功能。
前言
对于Box Model和Positioning Scheme中3种定位模式的细节，已经通过以下几篇文章记录了我对其的理解和思考。
《CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins》
《CSS魔法堂：你一定误解过的Normal flow》
《CSS魔法堂：Absolute Positioning就这个样》
《CSS魔法堂：说说Float那个被埋没的志向》
深入细节后会发现3中定位模式之间，Box Model和Positioning Scheme之间存在千丝万缕的关系，必须以俯瞰的角度捋一下。
简单粗暴上规则:)
Normal flow作为默认的定位模式其优先级自然是最低的;
Absolute positioning相比Float，与Normal flow关联性更弱，优先级最高;
优先级从低到高: Normal flow < Float < Absolute positioning
之前我总觉得Box Model是一个随定位模式变化的结构，但其实我是被一些表象给蒙蔽了而已。
首先我们要坚定不移地记住：每一个元素只要不是display:none，则它必定会产生一个遵循Box Model的盒子，而这个盒子不管任何情况均由margin box、border box、padding box和content area这4个框组成。（因此说每一个元素会生成0~N个框是正确的哦^_^）
而Positioning Scheme则决定盒子间布局关系，并通过影响display属性影响Ccontent area宽高的设置方式。
当采用Normal flow。inline-level element将在水平方向上一个接一个的排版布局，并且无法通过width和height来强制设置宽度和高度；block-level element将在垂直方向上逐一排版。
当采用Float时，display属性的实际值会被重置为block。
当采用Absolute positioning时，display属性的实际值会被重置为block，并且通过引入top/right/bottom/left这4个margin edge到containing block对应的edge的距离来调整盒子的定位。
由于Normal flow和Float则需要通过position:relative来引入top/right/bottom/left来提供盒子定位微调的功能。
注意：无论采用哪种定位模式，盒子依然由margin/border/padding/content4个框组成
Positioning Scheme将影响display的结果值当采用Float和Absolute positioning时，display属性值将根据下列规则被重置：
设定值 inline-table 实际值 table
设定值 inline, run-in, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block 实际值 block
另外当设置display:none，就不再考虑Positioning scheme了。因为元素没有对应的盒子，还说什么定位，说什么布局呢。
总结尊重原创，转载请注明来自：http://www.cnblogs.com/fsjohnhuang/p/537...肥仔John
感谢KB009: CSS 定位体系概述
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115199.html
摘要：更多关于的信息可参考魔法堂不得不说的因此的实际值则是相对于而言，我们可以通过来获取和的实际值。对于由于自身有固有的，因此当设置时，其实际值就是元素固有的。结果就是除均不为，而为时，会自动计算以满足等式。两条不满足外，其他情况均一致。 前言 当我们以position:absolute之名让元素脱离Normal flow的控制后，以为通过left和top属性值即可让元素得以无限的自由时，却...
摘要：后来终于知道是某位大神将翻译为文档流而已。。。。。。另外单纯设置效果与采用是一样的魔法堂就这个样，而浮动定位也是基于。相对定位的最强武器就是个属性了，好明显它们默认值均是。 前言 刚接触CSS时经常听到看到一个词文档流，那到底什么是文档流呢？然后会看到绝对定位和浮动定位能脱离文档流，从这句可以看到文档流和绝对定位、浮动定位是同一个范畴的概念，再后来在W3C标准文档找到关于Absolu...
摘要：时其宽度始终保持占满宽度的态度。清除浮动就是为浮动影响的范围划边界。那么可归结为的父容器包裹所有子元素。注意属性值不能为空白，否则无法清除浮动。 前言 定位系统中第一难理解就是Normal flow，而第二就非Float莫属了，而Float难理解的原因有俩，1. 一开头我们就用错了；2. 它跟Normal flow靠得太近了。本文尝试理清Float的特性和行为特征，若有纰漏望各位指正...
摘要：前言魔法堂重新认识和中提到在没有兄弟盒子时，的左右边框会与所属的的左右相接触。对于的元素若不存在的为的父，其为。正常情况若子尺寸尺寸，则子溢出溢出后的显示效果由属性值决定。异常情况下当时，若子的尺寸大于的尺寸而城撑大。 前言 《CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins》中提到在没有floated兄弟盒子时，line box的左右边...
阅读 1845·2021-11-22 15:25
阅读 3910·2021-11-17 09:33
阅读 2506·2021-10-12 10:12
阅读 1800·2021-10-09 09:44
阅读 3233·2021-10-08 10:04
阅读 1312·2021-09-29 09:35
阅读 1946·2019-08-30 12:57
阅读 1301·2019-08-29 16:22
