w3c系列CSS之路(五):详解visual formatting model

简介:

本文是对w3c系列CSS之路(四)种的VFM的完善和补充,官方原文:http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html

1 containing block

containing block(包含框)上节有提到,这里给出更详细的介绍。一个盒子的位置和大小通常都跟包含它的矩形框有关,这个矩形框就是这个盒子的包含框。标准给出了一个元素的containing block的定义:
  1. 首先,根元素的居住的包含框叫做initial containing block(初始包含框);
  2. 对于非根元素,如果其position为static或relative,containing block的形成依赖于其最近的block container祖先块的内容边界;
  3. 如果position属性为fixed,containing block依赖于viewport而建立;
  4. 如果position属性为absolute,containing block的形成依赖于最近的,并且position值为relative | absolute | fixed 的先祖元素。如果它没有这样的先祖元素的话,containing block就是initial containing block。
为了更好的理解,我们举个例子就知道了:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
   <HEAD>
      <TITLE>Illustration of containing blocks</TITLE>
   </HEAD>
   <BODY id="body">
      <DIV id="div1">
      <P id="p1">This is text in the first paragraph...</P>
      <P id="p2">This is text <EM id="em1"> in the 
      <STRONG id="strong1">second</STRONG> paragraph.</EM></P>
      </DIV>
   </BODY>
</HTML>
html的containing block是由initial containing block建立的,#div1的containing block是由body建立的,#p1的containing block是由#div1建立的,#em1的containing block是由#p2建立的......
如果加上以下样式的话:
#div1 { position: absolute; left: 50px; top: 50px }
#em1  { position: absolute; left: 100px; top: 100px }
#div1的containing block则是由initial containing block建立的。而#em1的containing block则是由#div1建立的。

2 width宽度的计算

width属性指定了元素内容的宽度,相关信息如下:
可取值:   <length> | <percentage> | auto | inherit
初始值:   auto
适用于:   all elements but non-replaced inline elements, table rows, and row groups
是否继承:   no
百分比:   取决于containing block的宽度
Media:   visual
Computed value:   百分值, 或者auto,或者是绝对长度

width属性对non-replaced inline elements无效,因为non-replaced inline elements 的宽度就是其内容的宽度。





相关文章
|
2月前
|
前端开发
CSS 盒子模型(Box Model
CSS 盒子模型(Box Model。
26 1
|
前端开发 容器
CSS:BFC(Block Formatting Context 块级格式化上下文)
CSS:BFC(Block Formatting Context 块级格式化上下文)
59 0
|
前端开发 JavaScript 容器
重学前端 42 # 用代码挖掘W3C中的CSS属性
重学前端 42 # 用代码挖掘W3C中的CSS属性
129 0
重学前端 42 # 用代码挖掘W3C中的CSS属性
|
前端开发
CSS box model :盒子模型
CSS box model :盒子模型
90 0
CSS box model :盒子模型
|
前端开发
【CSS】有意思的BFC:Block Formatting Context(块格式化上下文)!🤡
前言 大家好,我是HoMeTown,今天想聊一聊CSS中的BFC,很多朋友应该都听过这个名词,搞懂BFC可以让我们理解CSS中一些很诡异的地方,话不多说,直奔主题!
45 0
|
前端开发
【CSS】5分钟带你彻底搞懂 W3C & IE 盒模型!🔥🔥
前言 大家好,我是HoMeTown,CSS是作为前端必有技术栈之一,但是有很多同学其实对CSS的盒模型都不是很了解,今天想聊一下Css盒子模型。
74 0
uiu
|
前端开发 安全 容器
W3C推荐的新布局模式 【CSS Flex布局】详解
W3C推荐的新布局模式 【CSS Flex布局】详解
uiu
226 0
W3C推荐的新布局模式 【CSS Flex布局】详解
|
前端开发 API UED
W3C发布CSS ANIMATION WORKLET API的草案
W3C发布CSS ANIMATION WORKLET API的草案
195 0
W3C发布CSS ANIMATION WORKLET API的草案
|
前端开发
11、前端开发:CSS知识总结——盒子模型(Box Model)(2)
11、前端开发:CSS知识总结——盒子模型(Box Model)(2)
114 0
11、前端开发:CSS知识总结——盒子模型(Box Model)(2)
|
前端开发
10、前端开发:CSS知识总结——盒子模型(Box Model)(1)
10、前端开发:CSS知识总结——盒子模型(Box Model)(1)
106 0
10、前端开发:CSS知识总结——盒子模型(Box Model)(1)