CSS3 定位| Position研究


视区(视口) 当浏览者查看一份网页文件时,通常使用者代理(User Agents, UA, 浏览器)会提供给浏览者一个视区(视窗或者是画面里的其它可视区域)。当我们调整视区大小时,UA...
视区(视口)
       当浏览者查看一份网页文件时,通常使用者代理(User Agents, UA, 浏览器)会提供给浏览者一个视区(视窗或者是画面里的其它可视区域)。当我们调整视区大小时,UA 就有可能会改变文件上布局。
       当视区比文件所呈现的Canvas 区域还小时,UA 可能会提供一个卷轴的机制来让您一窥文件的全貌。理论上每个Canvas 最多只能有一个视区,不过UA 可以产生一个以上的Canvas(例如在同一份文件上提供不同的可视区域, 如框架格)。
承载区块(包含块)
       如果一些box的位置与大小是以其它相关的「矩行方块」的边缘(edges)来计算的话,我们就将这样的「矩行方块」称之为承载区块(Containing Blocks)。再简单的讲,所谓承载区块指的是,离「该元素」最近的区块级亲代元素;无论「该元素」的定位或者是浮动,皆是以它的承载区块来做参考基准(除了fixed定位方式)。
       底下是一个简单的承载区块示意图(demo-two 的承载区块为demo-one)。


       •当亲代元素为区块型元素时,其承载区块的大小是到内缘距离。

       •当亲代元素为单列型元素时,其承载区块的大小是到内容边缘。


正常流向(正常流量)


       什么是正常流向呢?由上而下、由左至右这样的走向就是所谓的正常流向;我们拿超文件标记语言来说好了,其原始码撰写的方向是从上而下由左至右,这就是正常流向。而浏览器也是依据这样的走向来解译(直译)我们的原始码。


       换个角度来说,在大部分的情况下,正常流向指的是在网页里头,显示元素标签的方式。另外,多数的HTML元素标签都是属于inline box或blockbox。block box里可以包含inline box;反之,inline box里不能包含有blockbox。


位置


所属的
标签:

相关资讯

CSS3火焰文字特效制作教程

CSS3火焰文字特效制作教程

用一句很俗气的话概括这两天的情况就是:“最近很忙”,虽然手头上有不少很酷的HTML5和CSS3资源,但确实没时间将它们的实现过程写成教程分享给大家。今天刚完成了一个神

一款纯css3实现的颜色渐变按钮

一款纯css3实现的颜色渐变按钮

之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮。这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,

深入理解CSS选择器优先级的计算

选择器的优先级关系到元素应用哪个样式。在CSS2.1的规范中是这样描述的: 1.如果声明来自于“style”属性,而不是带有选择器的规则,则记为 1,否则记为 0 (= a)(HTML元素的style属

WEB前端使用的CSS3选择器

首先说first-child与last-child,这两个选择器很容易明白,就是父元素下的第一个子元素和最后一个子元素。而nth-child和nth-last-child则是父元素下指定序号的子元素,甚

8款超酷而实用的CSS3按钮动画

8款超酷而实用的CSS3按钮动画

1、CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter、facebook、you**等大型社交网站。每一个分享按钮都有个大社交网站的Logo图

JavaScript高级程序设计36.pdf

TreeWalker TreeWalker是NodeIterator的更高级的版本,除了包括nextNode()和previousNode()在内的相同功能外,这个类型还提供了用于不同方向上遍历DOM结构的方法 par

CSS3 过渡特性创建信封效果的联系表单

CSS3 过渡特性创建信封效果的联系表单

最近给大家分享 CSS3 效果比较多,都是充分运用了 CSS3 来实现的。通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加。这篇文章中,我想与大家分享使用 CSS3 过渡特

7款纯CSS3实现的炫酷动画应用

7款纯CSS3实现的炫酷动画应用

HTML5确实非常强大,我们之前也分享过很多基于HTML5 Canvas的动画特效。但是你是否知道我们可以利用纯CSS制作一些很酷的动画效果?对,CSS3可以做到,下面分享的7款炫酷动

使用 jQuery & CSS3 实现优雅的手风琴效果

使用 jQuery & CSS3 实现优雅的手风琴效果

手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果。今天,我们将创造一个优雅的手风琴内容效果。这个想法是有悬停时滑出一些垂直手风琴标签。我

基于 Bootstrap CSS 框架的扁平化界面

基于 Bootstrap CSS 框架的扁平化界面

Bootflat 是一个开源的扁平化的 UI 工具包,基于 Bootstrap 3.1.0 CSS 框架。它为 Web 开发人员提供了一个创建优雅的 Web 应用程序的更快,更容易和更少的重复任务的途