文档章节

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

我爱睡觉
 我爱睡觉
发布于 2017/06/24 17:41
字数 689
阅读 3
收藏 0
点赞 0
评论 0

前言

 对于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的优先级

 简单粗暴上规则:)

  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 定位体系概述

本文转载自:http://www.cnblogs.com/fsjohnhuang/p/5377955.html

我爱睡觉
粉丝 3
博文 2120
码字总数 0
作品 0
南昌
Custom Looks using Qt Style Sheets

With the introduction of Qt Style Sheets, styling Qt widgets has become a lot simpler. Whether you just need to customize the look of an existing widget or design a whole new st......

一号男嘉宾
2014/11/30
0
0
从CSS盒子模型说起

前言 总括: 对于盒子模型,BFC,IFC和外边距合并等概念和问题的总结 原文地址:从CSS盒子模型说起 知乎专栏:前端进击者 博主博客地址:Damonare的个人博客 为学之道,莫先于穷理;穷理之要...

Damonare
2017/07/12
0
0
Flexify

Flexify is a jQuery plugin which allows web authors to create fluid, full-page, flexible layouts for their web applications. Overlaying the CSS box model, Flexify lets you speci......

匿名
2008/09/19
834
0
前端开发规范(CSS)

语法 两个空格代替制表符(tab)。 为选择器分组时,将单独的的选择器单独放在一行 声明块左花括号左边留一空格。 声明块右花括号独占一行。 声明语句后留一空格。 每条声明独占一行——便与...

jedi_knight
2015/10/08
50
0
CSS3 Box-sizing的理解

box-sizing是CSS3的box属性之一。一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性。那么CSS3的Box-sizing跟盒...

柠檬酷
2015/09/16
51
0
HTML,CSS编码规范

不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的。 HTML 语法 对于属性的定义,确保全部使用双引号,绝不要使用单引号。 为每个 HTML 页面的第一行添加标准模式(s...

桃子红了呐
2017/12/05
0
0
CSS 样式书写规范

可能不同团队都有各自的规范,又或者很多人在写 CSS 的时候还是想到什么就写什么,不存在太多的约束。 我觉得 CSS 代码规范还是有存在的必要的,尤其是在团队配合,多人协作下,规范就显得尤...

sshpp
2017/07/20
0
0
Internet Explorer and the CSS box model

原文地址:http://www.456bereastreet.com/archive/200612/internetexplorerandthecssboxmodel/ One of the differences between Internet Explorer and standards compliant Web browsers t......

bigfish__
2012/03/03
0
0
CSS3代码编写规范及注意要点

CSS3编码规范及注意要点 语法: 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。 为选择器分组时,将单独的选择器单独放在一行。 为了代码的易读性,在每...

sinat_34719507
2016/12/27
0
0
25+ 个为设计师和开发者准备的 CSS 工具

下面是为你准备的超过 25 款 CSS 的工具,其中有一些可用来生成 CSS 代码。 CSS3 Generator PrimerCSS CSSFly WordOff CSS Evolve The Box Office ie6fixer CSS Drive SlickMap CSS CSS Fram......

红薯
2011/12/19
3.2K
3

没有更多内容

加载失败,请刷新页面

加载更多

下一页

istio 路由实例解析

根据链路追踪图如上: 资料:https://istio.io/docs/guides/bookinfo/ 流程解析: 1. 访问地址: http://IP:31380/productpage kubectl get svc --all-namespaces -o wide istio-system isti......

xiaomin0322
4分钟前
1
0
Centos7通过yum安装jdk8

先查看系统是否已有自带的jdk rpm -qa |grep java rpm -qa |grep jdk rpm -qa |grep gcj 如果没有输出信息,则说明系统没有安装。如果有输出信息,则执行下面的命令卸载 rpm -qa | grep jav...

iplusx
6分钟前
0
0
字体的动画

树不要皮必死无疑,人不要脸天下无敌。如果你此时正在被承受着不公平的待遇,不要伤心不要气馁,吃亏要趁早。 .menu ul li a { position:relative; color: #FFFFFF; text-decoration:...

Js_Mei
7分钟前
0
0
新手学习hadoop发行版本选择介绍

Hadoop对于从事互联网工作的朋友来说已经非常熟悉了,相信在我们身边有很多人正在转行从事hadoop开发的工作,理所当然也会有很多hadoop入门新手。Hadoop开发太过底层,技术难度远比我们想象的...

左手的倒影
7分钟前
0
0
iOS定时器循环引用问题解决

我们通常使用NSTimer或CADisplayLink会使用以下方式 //定义@property (nonatomic, strong)NSTimer *timer;//实现self.timer = [NSTimer scheduledTimerWithTimeInterval:1 target:p......

xiaobai1315
8分钟前
0
0
给wordpress程序提速

在上一节中,我们介绍了wordpress CMS主题提速,本节我们接着介绍wordpress主题提速:gravatar用户头像缓存和google字体去除。 gravatar头像受到全世界网络用户的喜爱,设置好gravatar头像后...

hero2019
10分钟前
0
0
DevExpress v18.1最新版帮助文档下载大全

DevExpress v18.1.4帮助文档下载列表大全来啦!包含.NET、VCL、HTML/JS系列所有帮助文档,提供CHM和PDF两个版本。除已停止更新的Silverlight、Windows 8外,其余均为最新版本。 文章底部扫描...

Miss_Hello_World
13分钟前
0
0
Unity Shader中各种空间及变换方法

前几天尝试写一个传送门的shader,发现自己对坐标之间的变换掌握的不够熟练,趁着这阵子想整理shader相关的知识点,先把各种空间及之间转换整理一下。 1 模型空间-世界空间-观察空间-裁剪空间...

爽歪歪ES
19分钟前
0
0

定义和应用 栈(stack)是一种特殊的线性表,其插入(也称入栈或压栈)和删除(也称出栈或弹栈)操作都在表的同一端进行。这一端被称为栈顶(top)另一端称为栈底端(bottom)。 我们生活中其实...

Frost729
21分钟前
0
0
数据分析挖掘学习干货:大数据处理技术的总结与分析

一 数据分析处理需求分类 1 事务型处理 在我们实际生活中,事务型数据处理需求非常常见,例如:淘宝网站交易系统、12306网站火车票交易系统、超市POS系统等都属于事务型数据处理系统。 这类系...

加米谷大数据
25分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部