zoukankan      html  css  js  c++  java
  • 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
    

      


  • 相关阅读:
    01-2制作U盘启动盘--装机助理工具
    01-1制作U盘启动盘--大白菜超级U盘启动盘制作工具
    计算机操作系统
    设置电脑系统密码以及桌面密码
    bios文字解释
    Word基本文档字体设置
    Ctrl/Alt 快捷键
    Windows键
    Laravel 5.2 四、.env 文件与模型操作
    Laravel 5.2 三、中间件、视图与 Blade 模板引擎
  • 原文地址:https://www.cnblogs.com/btgyoyo/p/7704271.html
Copyright © 2011-2022 走看看