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

  

												

css 初始包含块的更多相关文章

  1. CSS中包含块原理解析

    CSS包含块原理解析 确定CSS中的包含块也确定就是元素的父元素.关键是:看元素是如何定位的.确定包含块很重要,比如设置百分比.另外也可以进行样式的继承等等. 分两个情况: 相对定位和静态定位 静态定 ...

  2. css 的包含块 、负外边距,字体,文本行高

    一.包含块 目的:确定元素的位置和相对大小(%) 1.正常文档流元素和浮动元素 ---- 父元素的 content-box 2.绝对定位元素 ---- 父元素的 padding-box 3.固定定位元 ...

  3. CSS学习笔记——包含块 containing block

    以下内容翻译自CSS 2.1官方文档.网址:https://www.w3.org/TR/CSS2/visudet.html#strut 有时,一个元素的盒子的位置和尺寸根据一个确定的矩形计算,这个确定 ...

  4. CSS包含块containing block详解

    “包含块(containing block)”,W3c中一个很重要的概念,今天带大家一起来好好研究下. 初步理解 在 CSS2.1 中,很多框的定位和尺寸的计算,都取决于一个矩形的边界,这个矩形,被称 ...

  5. css包含块containing block

    <css权威指南>P167: The Containing Block Every element is laid out with respect to its containing b ...

  6. (转自MDN)CSS基础一定要看的包含块(containing block)

    之前在写<个人常用的水平居中方法>这篇文章的时候,百分比问题涉及到了包含块(containing block)这个概念. 今天刷面试题的时候,又看到了containing block这个词 ...

  7. CSS中的包含块

    1.初始包含块,浏览器viewport大小 2.非根元素,position:relative/static,包含块为最近的块级框,表格单元或行内祖先框的内容区 3.非根元素,position:abso ...

  8. CSS2.1SPEC:视觉格式化模型之包含块

    原汁原味的才是最有味道的,在阅读CSS标准时对这一点的体会更加深刻了,阅读文档后的一大感觉就是很多看上去理所应当的样式表现也都有了对应的支持机制.本文首先从包含块写起,一方面总结标准中相应的阐述,并且 ...

  9. 包含块( Containing block ) 转自W3CHelp

    包含块简介 在 CSS2.1 中,很多框的定位和尺寸的计算,都取决于一个矩形的边界,这个矩形,被称作是包含块( containing block ). 一般来说,(元素)生成的框会扮演它子孙元素包含块 ...

随机推荐

  1. 自定义LisetView

    1.ListView listview=findViewById(R.id.listview); 2.public class MyAdapter extends BaseAdapter{ priva ...

  2. JavaScrpt简单介绍

    什么是javaScrpt javascript因为兼容于ECMA标准,因此也称为ECMAScript.JavaScript作为一种脚本语言,已经被广泛地应用于Web页面当中,通过嵌入HTML来实现各种 ...

  3. IDEA,RubyMine等JetBrains系列软件通用破解教程

    此教程不光适用于IDEA,还可以在RubyMine等JetBrains系列软件使用,亲测可用. (1)下载安装你需要的JetBrains系列软件,安装完最好不要打开,直接finish,断开网络. (2 ...

  4. 【TCP/IP详解 卷一:协议】第十一章 UDP 用户数据报协议

    11.1 引言 UDP 是一个简单的 面向数据报 的运输层协议:进程的每个 输出操作 都正好产生一个 UDP数据报,并且组装成一份待发送的IP数据报. 这与 TCP 不一样,它是 面向流字符 的协议, ...

  5. C# string[]转List<string>

    List<string> ltProduct = new List<string>(Product.Split('|'));

  6. Codeforces Beta Round #94 div2 D 优先队列

    B. String time limit per test 2 seconds memory limit per test 256 megabytes input standard input out ...

  7. 使用canvas画三角形

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Jmeter 测试API接口 查看接口的幂等问题

    背景介绍: 比如一个注册接口,要求填入的手机号与DB中已有的不能重复, 如果手机号码重复,则此次注册失败,不会新增会员数据: 如果不重复,则注册成功(忽略其他因素). 但是用20个并发,同样的请求,请 ...

  9. MongoDB(课时28 group操作)

    3.7.3 group操作 使用“group”操作可以实现数据的分组操作,MongoDB里将集合依据不同的的key进行分组操作,并且每个组产生一个处理文档. 范例:查询年龄大于等于19岁的学生信息,并 ...

  10. [ios]ScrollView小结

    设置ScrollView self.mysrollview.contentSize = CGSizeMake(1024,768); self.mysrollview.pagingEnabled = Y ...