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. 
						
  2. css 的包含块 、负外边距，字体，文本行高
		
    一.包含块 目的:确定元素的位置和相对大小(%) 1.正常文档流元素和浮动元素 ---- 父元素的 content-box 2.绝对定位元素 ---- 父元素的 padding-box 3.固定定位元 ...
    
		
    3. 
						
  3. CSS学习笔记——包含块 containing block
		
    以下内容翻译自CSS 2.1官方文档.网址:https://www.w3.org/TR/CSS2/visudet.html#strut 有时,一个元素的盒子的位置和尺寸根据一个确定的矩形计算,这个确定 ...
    
		
    4. 
						
  4. CSS包含块containing block详解
		
    “包含块(containing block)”,W3c中一个很重要的概念,今天带大家一起来好好研究下. 初步理解 在 CSS2.1 中,很多框的定位和尺寸的计算,都取决于一个矩形的边界,这个矩形,被称 ...
    
		
    5. 
						
  5. css包含块containing block
		
    <css权威指南>P167: The Containing Block Every element is laid out with respect to its containing b ...
    
		
    6. 
						
  6. （转自MDN）CSS基础一定要看的包含块（containing block）
		
    之前在写<个人常用的水平居中方法>这篇文章的时候,百分比问题涉及到了包含块(containing block)这个概念. 今天刷面试题的时候,又看到了containing block这个词 ...
    
		
    7. 
						
  7. CSS中的包含块
		
    1.初始包含块,浏览器viewport大小 2.非根元素,position:relative/static,包含块为最近的块级框,表格单元或行内祖先框的内容区 3.非根元素,position:abso ...
    
		
    8. 
						
  8. CSS2.1SPEC：视觉格式化模型之包含块
		
    原汁原味的才是最有味道的,在阅读CSS标准时对这一点的体会更加深刻了,阅读文档后的一大感觉就是很多看上去理所应当的样式表现也都有了对应的支持机制.本文首先从包含块写起,一方面总结标准中相应的阐述,并且 ...
    
		
    9. 
						
  9. 包含块( Containing block )  转自W3CHelp
		
    包含块简介 在 CSS2.1 中,很多框的定位和尺寸的计算,都取决于一个矩形的边界,这个矩形,被称作是包含块( containing block ). 一般来说,(元素)生成的框会扮演它子孙元素包含块 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. AtCoder Tenka1 Programmer Beginner Contest 解题报告
			
    赛时写了ABC,D实在没啥思路,然后C又难调...然后就从写完AB时的32名掉到了150+名 T_T 码力不够,思维不行,我还是AFO吧 比赛链接 A - Measure sb模拟,奇数串倒着输出偶数 ...
    
			
    2. 
						
  2. BZOJ4415: [Shoi2013]发牌  树状数组+二分
			
    Description 假设一开始,荷官拿出了一副新牌,这副牌有N张不同的牌,编号依次为1到N.由于是新牌,所以牌是按照顺序排好的,从牌库顶开始,依次为1, 2,……直到N,N号牌在牌库底.为了发完所 ...
    
			
    3. 
						
  3. CSS3 常用选择器
			
    p:last-of-type{background-color: red;} 选择p中最后一项 p:nth-of-type(2n){background-color: red;} 隔行变色里面也可以填 ...
    
			
    4. 
						
  4. ASP.NET MVC之Bundle压缩JS和CSS
			
    介绍Bundle之前先引用<淘宝技术这十年>中一段话,对Web前端稍微有点常识的人都应该知道,浏览器下一步会加载页面中用到的CSS.JS(JavaScript).图片等样式.脚本和资源文件 ...
    
			
    5. 
						
  5. cookie（2）
			
    转载,原文地址 https://segmentfault.com/a/1190000004743454 一.引言 随着浏览器的处理能力不断增强,越来越多的网站开始考虑将数据存储在「客户端」,那就不得不 ...
    
			
    6. 
						
  6. Spring AOP之使用注解创建切面
			
    上节中我们已经定义了Performance接口,他是切面中的切点的一个目标对象.那么现在就让我们使用AspectJ注解来定义切面吧. 1.定义切面 下面我们就来定义一场舞台剧中观众的切面类Audien ...
    
			
    7. 
						
  7. c++ primer plus 第五章 课后题答案
			
    #include <iostream> using namespace std; int main() { ; cout << "Please enter two n ...
    
			
    8. 
						
  8. Topless eclipse导入myeclipse的web项目没法识别问题解决
			
    1.进入项目目录,找到.project文件,打开. 2.找到<natures>...</natures>代码段. 3.在第2步的代码段中加入如下标签内容并保存: <nat ...
    
			
    9. 
						
  9. RabbitMQ入门_15_访问控制
			
    参考资料:https://www.rabbitmq.com/access-control.html A. 核心概念 Virtual Host:虚拟主机为 RabbitMQ 中的资源提供了逻辑分组与隔离 ...
    
			
    10. 
						
  10. SQL Timeout超时的处理方法
			
    第一步:修改Web.config配置文件.在数据库连接字符串中加上连接时间Connect Timeout,根据实际情况定时间. <!--连接数据库--> <connectionStr ...
    
			
    11.