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了。因为元素没有对应的盒子,还说什么定位,说什么布局呢。
总结
尊重原创,转载请注明
感谢
- 动手实现MVC: 1. Java 扫描并加载包路径下class文件
- 动手实现MVC: 2. bean加载, IoC依赖注入
- Python编写渗透工具学习笔记一 | 0x04 nmap实现端口扫描(准确性更高)
- spring-boot & ffmpeg 搭建一个音频转码服务
- java 实现二维码生成工具类
- WriteUp分享 | CTF-web
- 机器学习的Boosting技术(以AdaBoost为例)
- 10.25 systemd管理服务
- JS基础知识之new操作符 | 前端卧谈会第9期
- 利用通用伪造签名绕过ElGamal
- 10.24 chkconfig工具
- SPI框架实现之旅一:背景介绍
- 10.23 linux任务计划cron
- Linux基础(day35)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- String及StringTable(三):StringBuilder源码解读
- UidGenerator:百度开源的分布式ID服务(解决了时钟回拨问题)
- String及StringTable(四):StringBuffer与StringBuilder对比
- Apache James 2.3.2.1 邮箱服务搭建
- SpringBoot实现微信小程序登录的完整例子
- String及StringTable(五):java8的新工具类StringJoiner
- spring security oauth2使用refresh_token报错UserDetailsService is required
- 你所不知道的React| 趋势解读、底层逻辑、学习路径、实战应用
- js中setTimeout的用法和JS计时器setTimeout与setInterval方法的区别和confirm方法
- TKinter Label 和 Button
- Java类如何防止被实例化
- PHP中的json_encode和json_decode
- Java重写equals和hashCode方法
- upload-labs第11~12关 00截断
- java 踩雷日记--new