CSS魔法堂:小结一下Box Model与Positioning Scheme
前言
对于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之间存在千丝万缕的关系,必须以俯瞰的角度捋一下。
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
感谢
相关文章
- CSS动画实例:双螺旋旋转
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
- 【CSS】 Css背景图片及背景渐变综合知识和技巧大全(代码实例)
- animate.css
- CSS - 移动端容器背景大图片自动适应屏幕
- CSS: 回到顶部侧边栏
- 3天学会css视频_PHP初级 CSS教程_CSS入门教程
- 在css中,可以使用white-space属性和word-break属性来设置字符超出宽度就自动换行输出。下面小编举例讲解用DIV+CSS实现字符超出宽度就自动换行输出。
- vue项目js和css文件名避免浏览器缓存再vue.config.js中配置
- 《Adobe Dreamweaver CC经典教程》——1.9 使用“CSS设计器”
- 《21天学通HTML+CSS+JavaScript Web开发(第7版)》——1.6 小结
- 2015第10周四-CSS小结
- webpack4+(打包后的文件分析+脚本打包+HTML插件+样式处理CSS+Less+css抽离压缩)
- 利用css对shiny页面优化及利用htmlwidgets包创建HTML控件
- css中最强大的布局方式----grid布局
- CSS_css sprite原理优缺点及使用
- 浅析如何给css加上模块的功能以及CSS Modules用法介绍
- 浅析CSS的层叠顺序:层叠水平与层叠上下文的理解
- CSS学习知识整理(六)Css position(定位)、margin 简写
- CSS学习知识整理(四)Css 盒子模型
- CSS学习知识整理(三)Css 文本
- CSS学习知识整理(一)Css 简介、语法与创建
- CSS学习知识整理(一)Css 布局
- css 垂直居中,指定文本宽度换行,指定高度出滚动条
- CSS 加粗(css font-weight)
- css :before 和 :after