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

　　

相关文章