html盒子模型代码_你真的了解盒模型吗？.pdfVIP

html盒⼦模型代码_你真的了解盒模型吗？ 其实在⽂档解析过程中每个元素都会被描述为⼀个盒模型，然后⼀个盒⼦套进另外⼀个盒⼦，⼜会按照某种神秘的规则摆放，最后才形成了 井井有条的页⾯。 简单盒模型 通常情况下，被更多⼈认知的盒模型就是简单盒模型，简单盒模型在早期IE时期有⼀种怪异模式下的解析⽅式，也就是现在的border-box， 后来W3C制定的标准以后规定在标准解析模式下使⽤标准盒模型(content-box)。 然后在CSS3推出的时候，增加了⼀个属性，也就是box-sizing，然后在查资料的时候在知乎看到⼀个段⼦，分享⼀下，哈哈。 IE：我觉得盒模型应该是这样的，blahblah。W3C：明显应该是这样的才对，blahblah。结果是 IE 在怪异模式下⽤了「不标准」 的盒模型，标准模式下⽤了「标准」的盒模型。围观群众 ：听说 IE 的盒模型不标准。……多年过去……W3C：感觉还是 IE 的那个 模型⽐较好。但我们已经回不去了……算了加个属性⽀持⼀下 IE 那种模式吧。 这货就是⽤来擦屁股的，我从来没见过有⼈ box-sizing ⽤ 的……作者 ：顾轶灵链接 ：/questionanswer源 ：知乎著 padding-box 作权归作者所有。商业转载请联系作者获得授权，⾮商业转载请注明出处。 所以在当前W3C标准中盒模型是可以通过box-sizing⾃由的进⾏切换的。然后到底这两种模式有什么区别呢，先看⼀张从chrome开发者⼯ 具中截的图。 content-box（标准盒模型） width = 内容的宽度 height = 内容的⾼度 border-box（怪异盒模型） width = border + padding + 内容的宽度 height = border + padding + 内容的⾼度 视觉格式化模型(visual formatting model) CSS 视觉格式化模型(visual formatting model)是⽤来处理⽂档并将它显⽰在视觉媒体上的机制。 简单盒模型需要进⼀步加⼯才能成为真正可以进⾏格式化的盒⼦，处理过程主要取决于⼀个css属性：display。 块级盒、快容器盒、块盒、匿名块盒 当display的值为blocklist-itemtable 时,这些盒⼦会被标记为块级元素，在竖直⽅向⼀个接⼀个的排列，同时参与块级格式化上下⽂， 每⼀个块级元素都⾄少⽣成⼀个块级盒，也可能是⼀个块容器盒，块容器盒所描述的是它和它的⼦元素之间的表现⽅式，块级盒所描述的是 它与兄弟元素的表现⽅式。 ⼀个块容器盒只包含其他块级盒，或⽣成⼀个⾏内格式化上下⽂来只包含⾏内盒。当然你也许见过⼀段代码中某⼀个块容器盒同时包含⾏内 盒和块级盒的情况，但实质上在这种情况下产⽣了⼀种新的匿名块盒来解决这个问题。 先来看⼀段代码： <div class="blockContainerBox" style="background:red; height:100px;"> <div class="blockLevelBox" style="background:blue; height:20px; width:20px;"> </div> <div class="inlineBlockBox" style="background:green; height:20px; width:20px; display:inline-block;"> </div> <div class="inlineBlockBox" style="background:green; height:20px; width:20px; display:inline-block;"> </div> </div> ⾸先blockContainerBox是⼀个块级盒同时也是⼀个块容器盒，这种情况下我们会把它称为块盒。ok，根据刚才的说法它只能包含块级盒 或者⽣产⼀个⾏内格式化上下⽂来包含⾏内盒，⽽此时的代码不仅有blockLevelBox也有inlineBlockBox。此时浏览器会⽣成⼀个匿名块盒 来包裹两个inlineBlockBox来⽣成⼀个⾏内格式化上下⽂。 ⾏内级盒、⾏内盒、匿名⾏内盒 当 displ