css 初始包含块

时间:2023-03-08 16:51:11
css 初始包含块

continuous media ,paged media

关于continuous media[连续媒体]和paged media[分页媒体]
直白的讲,continuous和paged media是两种媒体组,什么意思呢?对于我们每天接触到得信息种类,早有人替我们进行归类了,例如:投影机代表的媒体类型就是投影,归入分页媒体组,而平常使用的电脑屏幕 ,是归于连续媒体组。

初始化包含块

1. 根元素的包含块是一个矩形,叫做初始化包含块
2. 对于 【连续媒体】就是,初始化包含块的 尺寸等于viewport的尺寸,起点是canvas的原点
3. 初始化包含块的方向(direction)等同于根元素的方向
4. 初始化包含块不是viewport,只是尺寸一样

在没有定位的情况下, 下面文档的包含块情况如下:

<!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	initial C.B. (UA-dependent)
body html
div1 body
p1 div1
p2 div1
em1 p2
strong1 p2

 

假如DIv1 定位:

   #div1 { position: absolute; left: 50px; top: 50px }

他的包含块不在是body;将会变成初始化包含块

假如给em1 定位:

   #div1 { position: absolute; left: 50px; top: 50px }
#em1 { position: absolute; left: 100px; top: 100px } 包含块对应如下:
html	initial C.B. (UA-dependent)
body html
div1 initial C.B.
p1 div1
p2 div1
em1 div1
strong1 em1