css 初始包含块

时间 2019-12-07

标签 css 初始包含栏目 CSS 繁體版

原文原文链接

continuous media ，paged mediahtml

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

初始化包含块canvas

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

在没有定位的状况下, 下面文档的包含块状况以下：htm

<!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 定位：blog

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

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

假如给em1 定位：it

   #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