css 文档流中块级非替换元素水平区域的计算规则(1)
最近在读《Basic Visual Formatting in CSS》，结合以前看的《css权威指南》和css标准。今天就做个笔记。
以前在遇到一些宽度不明确指明的一些布局的时候，虽然凭感觉能猜出个大概，但是总是有点不是很靠谱。直到最近看到这一本书，觉得总觉得挺好的。
首先要知道，元素除了通过display来指定block、inline、inline-block这一些属性之外，还有一种能在的特性--替换还是非替换。
替换元素：像img、video、canvas等稳定种指定的内容只是占位，真正的内容实在后面替换上去的。像img内容是图片加载完成之后替换上去的。
非替换元素：像div、p、span这一些内容就写在文档中。
而这里要说到的主要是块级非替换元素既display：block的非替换元素，如p、div；还有就是display：list-item，如li。li虽然看display像是和div、p这一些是两类，但是其实li除了多了前面的标志之外，别的行为基本都是一样的。
下面进入正题，文档流中块级非替换元素的水平格式化和包含块（containing block）还有七个属性有关（border-left、margin-left、padding-left、width、padding-right、margin-right、border-right）。文档流中块级元素的containing block一般指的是父级块级元素的内容区域（content area）。也就是在box-sizing：content-box时，width指定的区域。下面有一条公式：
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
上面的公式在所有情况下都要成立。但是很快问题就来了，要是我把7个属性的值都设了值，但是加起来不等于containing block的width怎么办；又或者我把值都设置为auto，那又怎么样去计算呢？其实在这七个值中，只有三个值margin-left、margin-right、width能够设置为auto。我们首先看看把这三个属性设置为auto的情况，由于这三个属性可以设置为auto或者是非auto，那么就是说一共有23，8种情况。下面来分别说下：
1、一个值设置为auto，也就是margin-left、margin-right或者width设置为auto。这三种情况最简单了，直接套上面的公式一算就知道了。
2、两个值设置为auto。
2.1、margin-left和margin-right设置为auto，width指定一个非auto的值。这种情况就是我们平时的水平居中，margin-left和margin-right获得相同的值。
2.2、margin-left和width设置为auto，margin-right指定一个非auto的值。margin-left重设为0，然后就变成了1情况了。
2.3、margin-right和width设置为auto，margin-left指定一个非auto的值。margin-right重设为0，然后又变成了1情况了。
3、三个值设置为auto。margin-left和margin-right都重设为0，然后根据1来计算。
4、假如没有一个设置为auto，在css中叫"over-constrained"（过度约束）。那么在文档流方向为左到右的时候margin-right的值会被忽略，然后还是1情况。这种情况最容易理解错，容易吧"over-constrained"理解成指定了所有的值后使得上面公式左边小于右边。正确的理解应该是"指定了三个值，都没有变通的余地了"。所以只要给margin-left、width和margin-right都指定了auto之外的值（就算是0），也是"over-constrained"了。
上面的内容似乎已经覆盖了所有的情况了，其实不然，还有一种特殊情况就是margin-left，margin-right设置为auto，width有指定值，但是border-left+padding-left+width+padding-right+border-right> width of containing block。按照上面的说法，margin-left和margin-right获得相同的值，但事实是，margin-left和margin-right重设为0，然后过度约束，然后忽略掉一个。
css 文档流中块级非替换元素水平区域的计算规则(1)的更多相关文章
- CSS文档流与块级元素和内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- CSS文档流与块级元素和内联元素（文档）
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...
- CSS文档流、块级元素、内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- 前端学习 -- Css -- 文档流
文档流 文档流处在网页的最底层,它表示的是一个页面中的位置, 我们所创建的元素默认都处在文档流中 元素在文档流中的特点 块元素 块元素在文档流中会独占一行,块元素会自上向下排列. 块元素在文档流中默认 ...
- CSS文档流
文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...
- CSS-position 属性&元素脱离文档流引发父级边框塌陷问题
CSS-position 属性 CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动(float)和绝对定位(position). 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中 ...
- 前端学习笔记之CSS文档流
先引用一段W3C的文档: 9.3 Positioning schemes In CSS 2.1, a box may be laid out according to three positionin ...
- [转载]css菜鸟之HTML 中块级元素设置 height:100% 的实现
HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...
- css菜鸟之HTML 中块级元素设置 height:100% 的实现
HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...
随机推荐
- php上传文件中文文件名乱码的解决方法
文件上传是我们在处理表单提交时候最常用的功能之一,今天写了一个小小的demo,如下: 先看结构: html为表单提交的页面,php为处理表单的文件,upload为上传文件所放的位置 html: < ...
- 《C#高级编程》学习笔记------什么是COM组件
COM是Component Object Model (组件对象模型)的缩写. 用户需要什么样的软件产品?这是一个多选题,但高效,健壮是肯定会被选中的.作为一名软件开发人员如何做才能满足用户的需要呢? ...
- php实现一个简单的购物网站
实现一个简单的购物网站 一.考试时间:8小时 二.开发工具:DW 三.数据库:见附件 四.需要实现的页面: Index:浏览商品页面,显示商品列表,用户可以点击“购买“. ViewCart:查看购物车 ...
- poj_3258 二分法
题目大意 给定区间[0,L],在区间内给定N个数,加上区间的端点总共N+2个值.这N+2个数相邻的两个数之间有一个差值delta[i],现在可以从除去端点之外的这N个数中删除M个,使得剩余的N+2-M ...
- MQTT的学习研究（十七）Mosquitto简要教程（安装&使用）
Mosquitto是一个实现了MQTT3.1协议的代理服务器,由MQTT协议创始人之一的Andy Stanford-Clark开发,它为我们提供了非常棒的轻量级数据交换的解决方案.本文的主旨在于记录M ...
- 【CSS系列】对表单和数据表格应用样式
表格特有的元素: 1.summary和caption caption用作与表格的标题.summary应用于表格标签,用来描述表格的内容,于image标签的alt文本相似. 2.thead tbody ...
- Linux系统内核main函数执行之前
1.linux是一个操作系统在机器加电后,需要从硬件通过一个引导程序加载os kernel,那么在os kernel的main函数运行之前,都发生了什么呢? (1)引导BIOS(存储在ROM芯片中,R ...
- javascript构造函数及原型对象
/** @ javascript中没有类的概念,所以基在对象创建方面与面向对象语言有所不同* @ 对象创建的常用方法及各自的局限性* @ 使用Object或对象字面量创建对象* @ 工厂模式创建对象* ...
- FlipClock.js时钟,计数,3D翻转插件
1.FlipClock.js能够自动定义计数,时钟的翻牌效果,调用简单,下面简单记录下用法 2.官网地址:http://www.flipclockjs.com/ 3.调用2个文件 <link h ...
- Mac环境下搭建PhoneGap环境
首先,官方文档中,要求,编译需要使用Intel架构的 Mac OS X系统的Mac设备,最低要使用XCode4.5以上版本和Mac OS X 10.7以上的系统以及IOS6.0 以上的SDK,至于发布 ...