CSS魔法堂：小结一下Box Model与Positioning Scheme

2024-05-08 13:50:09

Positioning Scheme的优先级

简单粗暴上规则:)

Normal flow作为默认的定位模式其优先级自然是最低的;
Absolute positioning相比Float，与Normal flow关联性更弱，优先级最高;
优先级从低到高: Normal flow < Float < Absolute positioning

Box Model与Positioning Scheme的关系

之前我总觉得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/5377955.html^_^肥仔John

感谢

KB009: CSS 定位体系概述

CSS魔法堂：小结一下Box Model与Positioning Scheme相关推荐

CSS魔法堂：说说Float那个被埋没的志向
前言定位系统中第一难理解就是Normal flow,而第二就非Float莫属了,而Float难理解的原因有俩,1. 一开头我们就用错了:2. 它跟Normal flow靠得太近了.本文尝试理清Fl ...
CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins
前言盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...
CSS魔法堂：深入理解line-height和vertical-align
前言一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vertical-align基情四射,贵圈真乱啊 ...
CSS魔法堂：你一定误解过的Normal flow
前言刚接触CSS时经常听到看到一个词"文档流",那到底什么是"文档流"呢?然后会看到"绝对定位和浮动定位能脱离文档流",从这句可以看到文 ...
CSS魔法堂：hasLayout原来是这样!
前言过去一直听说旧版本IE下很多诡异bug均由一个神秘角色引起的,那就是hasLayout.趁着最近突然发神经打算好好学习CSS,顺便解答多年来的疑惑. hasLayout到底是何方神圣? hasL ...
CSS魔法堂：重拾Border之——图片作边框
前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
CSS魔法堂：更丰富的前端动效by CSS Animation
前言在<CSS魔法堂:Transition就这么好玩>中我们了解到对于简单的补间动画,我们可以通过transition实现.那到底多简单的动画适合用transtion来实现呢?答案就是 ...
CSS魔法堂：重拾Border之——更广阔的遐想
前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
CSS魔法堂：那个被我们忽略的outline
前言在CSS魔法堂:改变单选框颜色就这么吹毛求疵!中我们要模拟原生单选框通过Tab键获得焦点的效果,这里涉及到一个常常被忽略的属性--outline,由于之前对其印象确实有些模糊,于是本文打算对其 ...

最新文章

热门文章