文档章节

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

我爱睡觉
 我爱睡觉
发布于 2017/06/24 17:41
字数 689
阅读 3
收藏 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
CSS3 Box-sizing的理解

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

柠檬酷
2015/09/16
51
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

没有更多内容

加载失败,请刷新页面

加载更多

初级开发-编程题

` public static void main(String[] args) { System.out.println(changeStrToUpperCase("user_name_abc")); System.out.println(changeStrToLowerCase(changeStrToUpperCase("user_name_abc......

小池仔
今天
4
0
现场看路演了!

HiBlock
昨天
8
0
Rabbit MQ基本概念介绍

RabbitMQ介绍 • RabbitMQ是一个消息中间件,是一个很好用的消息队列框架。 • ConnectionFactory、Connection、Channel都是RabbitMQ对外提供的API中最基本的对象。Connection是RabbitMQ的s...

寰宇01
昨天
7
0
官方精简版Windows10:微软自己都看不过去了

微软宣布,该公司正在寻求解决方案,以减轻企业客户的Windows 10规模。该公司声称,企业客户下载整个Windows 10文件以更新设备既费钱又费时。 微软宣布,该公司正在寻求解决方案,以减轻企业...

linux-tao
昨天
9
0
TypeScript基础入门之JSX(二)

转发 TypeScript基础入门之JSX(二) 属性类型检查 键入检查属性的第一步是确定元素属性类型。 内在元素和基于价值的元素之间略有不同。 对于内部元素,它是JSX.IntrinsicElements上的属性类型...

durban
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部