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

简介:

Positioning Scheme的优先级

 简单粗暴上规则:)

  1. Normal flow作为默认的定位模式其优先级自然是最低的;
  2. 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宽高的设置方式。

  1. 当采用Normal flow。inline-level element将在水平方向上一个接一个的排版布局,并且无法通过width和height来强制设置宽度和高度;block-level element将在垂直方向上逐一排版。
  2. 当采用Float时,display属性的实际值会被重置为block。
  3. 当采用Absolute positioning时,display属性的实际值会被重置为block,并且通过引入top/right/bottom/left这4个margin edge到containing block对应的edge的距离来调整盒子的定位。
  4. 由于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 定位体系概述

目录
相关文章
|
1天前
|
前端开发 容器
CSS之弹性盒子Flexible Box
CSS之弹性盒子Flexible Box
|
6月前
|
前端开发
css中对 box—sizing 属性的了解
css中对 box—sizing 属性的了解
34 0
|
存储 前端开发 JavaScript
如何使用 CSS flex box 和 Javascript 设计棋盘
在这篇文章中,我将展示如何使用 css 和一些 JavaScript 来设计棋盘。 为此,你需要对 CSS Flex-box 和 nth-child() 属性有基本的了解。
88 0
|
前端开发
CSS box model :盒子模型
CSS box model :盒子模型
79 0
CSS box model :盒子模型
|
前端开发
12、前端开发:CSS知识总结——盒子模型(Box Model)(3)
12、前端开发:CSS知识总结——盒子模型(Box Model)(3)
66 0
|
前端开发
11、前端开发:CSS知识总结——盒子模型(Box Model)(2)
11、前端开发:CSS知识总结——盒子模型(Box Model)(2)
104 0
11、前端开发:CSS知识总结——盒子模型(Box Model)(2)
|
前端开发
10、前端开发:CSS知识总结——盒子模型(Box Model)(1)
10、前端开发:CSS知识总结——盒子模型(Box Model)(1)
97 0
10、前端开发:CSS知识总结——盒子模型(Box Model)(1)
|
弹性计算 容器
CSS3 (Flex Box)弹性盒子详解
CSS3 (Flex Box)弹性盒子详解
|
搜索推荐
CSS3-box盒布局
盒布局——display:box; li:after { content: ''; clear: both; display: block; } li { ...
831 0
|
1天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
17 0
HTML5/CSS3粒子效果进度条代码

热门文章

最新文章