1.初始包含块,浏览器viewport大小 2.非根元素,position:relative/static,包含块为最近的块级框,表格单元或行内祖先框的内容区 3.非根元素,position:absolute,包含块为最近的position不是static的祖先元素,没有的话就是初始包含块 - 若祖先为块级元素,包含块为祖先块从border的内边界以内的部分,即padding+context - 若为行内元素,根据文字方向确定.从左向右内容区左上角和右下角确定的框:从右向左为右上角和左下角确定的…

以下内容翻译自CSS 2.1官方文档.网址:https://www.w3.org/TR/CSS2/visudet.html#strut 有时,一个元素的盒子的位置和尺寸根据一个确定的矩形计算,这个确定的矩形叫这个元素的包含块.一个元素的包含块根据以下规则确定: 1.根元素所在的包含块叫初始包含块 initial containing block.对于连续媒体设备(continuous media),初始包含块的大小等于视口viewpor的大小,基点在画布的原点(视口左上角):对于分页媒体(pag…

开篇 一些元素,如float元素,如position为absolute,inline-block,table-cell或table-caption的元素,以及overflow属性不为visible的元素.它们将会建立一个新的块级格式化上下文. 上述定义已经非常具体的描写叙述了块级格式化上下文(Block Formatting Context)是怎样形成的,为了方便起见.文中均用BFC取代. 如今,让我们用一种简单的方式对其进行又一次定义: BFC也是HTML中的一个盒子(看不见而已),仅仅有满足…

CSS包含块原理解析 确定CSS中的包含块也确定就是元素的父元素.关键是:看元素是如何定位的.确定包含块很重要,比如设置百分比.另外也可以进行样式的继承等等. 分两个情况: 相对定位和静态定位 静态定位(默认)和相对定位的父元素都是最近的父元素. 绝对定位和固定定位 绝对定位和固定定位会脱离文档流,他们的包含块是距离它最近的定位祖先. 注意事项 浮动元素包含块就是最近的父元素,没有特殊意义.…

视觉格式化模型 1. 简介 在视觉格式化模型中,文档树中的每个元素都将会根据盒模型产生零到多个盒子.这些盒子的布局由如下因素决定: 盒子的尺寸和类型 定位策略(正常文档流,浮动或者绝对定位) 和文档树中其他元素的关系 额外的信息(比如视口的大小,图片的原始尺寸等) 1.1 视口(viewport) 连续媒体(continuous media)的UA(user agent)通常会给用户提供一个视口,一般为一个窗口或者屏幕上的一片可视区域.用户通过这个视口查看文档(document).当视口的大小改…

原汁原味的才是最有味道的,在阅读CSS标准时对这一点的体会更加深刻了,阅读文档后的一大感觉就是很多看上去理所应当的样式表现也都有了对应的支持机制.本文首先从包含块写起,一方面总结标准中相应的阐述,并且结合具体的实例进行具体分析,特别是对于CSS2.1支持并不完善的IE6/7.由于经验尚浅,文中肯定存在一些问题,希望大家可以多多包涵并且指出问题.   阅读本文前,应当对于CSS盒模型以及视觉格式化模型中会产生的各种框(box,也可以成为盒子)以及各种不同的布局方式有比较准确的认识,可以阅读杜瑶大神…

目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,也吃过这方面的亏.今天,群里有朋友问起这个,就趁着学习一下,也算是查漏补缺吧,虽然,谈不上精通,但是了解,还是很有必要的. 盒子模型 css盒子模型分为两种,一种是遵循w3c标准的标准盒子模型,另外一种就是IE盒子模型. 标准盒子模型 IE盒子模型 通过上面两张图可以看出…

平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外界元素的重叠现象. 先了解几个概念:可替换元素.不可替换元素(non-replaced element).包含块(containing block).块级格式化上下文(BFC). 可参考css2.1 中文规范 1.可替换元素与不可替换元素 根据css1 中所述:所谓可替换元素就是浏览器根据元素的标签…

写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的是可以顺着一路扯到normal flow.containing block.bfc.margin collapse,base line,writing mode,bidi,这样一路问下去的,奈何第一个问题(亲我真的只问了position有哪些取值和行为啊)就悲剧了…… 说到position,那么稍微…

“包含块(containing block)”,W3c中一个很重要的概念,今天带大家一起来好好研究下. 初步理解 在 CSS2.1 中,很多框的定位和尺寸的计算,都取决于一个矩形的边界,这个矩形,被称作是包含块( containing block ). 一般来说,(元素)生成的框会扮演它子孙元素包含块的角色,我们称之为:一个(元素的)框为它的子孙节点建造了包含块.包含块是一个相对的概念. <div> <table> <tr> <td>hi</td>…