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

  


 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM