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
css 初始包含块的更多相关文章
- CSS中包含块原理解析
CSS包含块原理解析 确定CSS中的包含块也确定就是元素的父元素.关键是:看元素是如何定位的.确定包含块很重要,比如设置百分比.另外也可以进行样式的继承等等. 分两个情况: 相对定位和静态定位 静态定 ...
- css 的包含块 、负外边距,字体,文本行高
一.包含块 目的:确定元素的位置和相对大小(%) 1.正常文档流元素和浮动元素 ---- 父元素的 content-box 2.绝对定位元素 ---- 父元素的 padding-box 3.固定定位元 ...
- CSS学习笔记——包含块 containing block
以下内容翻译自CSS 2.1官方文档.网址:https://www.w3.org/TR/CSS2/visudet.html#strut 有时,一个元素的盒子的位置和尺寸根据一个确定的矩形计算,这个确定 ...
- CSS包含块containing block详解
“包含块(containing block)”,W3c中一个很重要的概念,今天带大家一起来好好研究下. 初步理解 在 CSS2.1 中,很多框的定位和尺寸的计算,都取决于一个矩形的边界,这个矩形,被称 ...
- css包含块containing block
<css权威指南>P167: The Containing Block Every element is laid out with respect to its containing b ...
- (转自MDN)CSS基础一定要看的包含块(containing block)
之前在写<个人常用的水平居中方法>这篇文章的时候,百分比问题涉及到了包含块(containing block)这个概念. 今天刷面试题的时候,又看到了containing block这个词 ...
- CSS中的包含块
1.初始包含块,浏览器viewport大小 2.非根元素,position:relative/static,包含块为最近的块级框,表格单元或行内祖先框的内容区 3.非根元素,position:abso ...
- CSS2.1SPEC:视觉格式化模型之包含块
原汁原味的才是最有味道的,在阅读CSS标准时对这一点的体会更加深刻了,阅读文档后的一大感觉就是很多看上去理所应当的样式表现也都有了对应的支持机制.本文首先从包含块写起,一方面总结标准中相应的阐述,并且 ...
- 包含块( Containing block ) 转自W3CHelp
包含块简介 在 CSS2.1 中,很多框的定位和尺寸的计算,都取决于一个矩形的边界,这个矩形,被称作是包含块( containing block ). 一般来说,(元素)生成的框会扮演它子孙元素包含块 ...
随机推荐
- 【译】第1节--- EF Code First 介绍
原文:http://www.entityframeworktutorial.net/code-first/entity-framework-code-first.aspx 本教程涵盖了code fir ...
- 01_Flume基本架构及原理
Flume消息收集系统,在整个系统架构中的位置 Flume概况1) Apache软件基金会的顶级项目2)存在两个大的版本:Flume 0.9.x(Flume-OG,original generatio ...
- ros python 订阅robot_pose
#!/usr/bin/env python import rospy import tf import time from tf.transformations import * from std_m ...
- python 正则表达式匹配特定浮点数
def is_decimal(num): import re #以数字开头,小数点后保留1位数字或两位数字或者没有小数部分 dnumre = re.compile(r""" ...
- python 深拷贝
from copy import deepcopy #create a tuple tuplex = (, [], True) print(tuplex) #make a copy of a tupl ...
- 学以致用 ---- vue子组件→父组件通信
之前写过一篇关于 vue2.0中v-on绑定自定义事件 的随笔,但是今天实际应用的时候才发现根本就不理解,下面是实际工作中遇到的问题: [情景描述]页面中的[下拉搜索组件],因为多个页面中用到,所以抽 ...
- 在centos下解决 “致命错误:curses.h:没有那个文件或目录”
当在centos下编译带有头文件<curses.h> 的程序时,出现以下错误: “致命错误:curses.h:没有那个文件或目录” ,最后在“https://zhidao.baidu.co ...
- scrapy 也能爬取妹子图?
目录 前言 Media Pipeline 启用Media Pipeline 使用 ImgPipeline 抓取妹子图 瞎比比前言 我们在抓取数据的过程中,除了要抓取文本数据之外,当然也会有抓取图片的需 ...
- windows 网络共享传送文件超慢
这可是无线局域网,竟然只有 200K/s. 调查经过: 1) 问题是单向的, B->A 没有问题, A->B就出事 2) 只发生在 Windows网络共享, A上装了apache测试, A ...
- String字符串存入数据库中超出最大长度(oracle varchar2 4000)?应合理分条存储(java实现-工具/方法)
问题描述 需要向数据库中保存数据,但某个字段内容长度过长(有中文.符号.英文),应该根据字符串内容与数据库存储上限合理设置储存方式. 解决思路 分条存储,即多条数据前n个字段一致,最后内容字段不同,下 ...