本文非原创,引用来源:http://blog.beyes.tw/575
视区(视口)
当浏览者查看一份网页文件时,通常使用者代理(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。
位置
所属的 |
设定值 |
位置 定位
|
静态 | 相对 | 绝对 | 中心 | 页 | 固定
|
预设2006/02/15:静态 适用于:除了表列组与表列之外的全部元素 继承性:无
|
用来将HTML元素所产生的box定位在我们想要让它呈现的位置上。
静态定位|静态位置的定位
依照撰写原始码时的顺序来定位。白话的讲就是依序我们撰写HTML元素所产生的box让它自然地排在原本流向应该在的位置上。static这个值不用特别去指定它,因为它是预设值,也就是说所有的box元素一开始通通在本来应有的位置上。并且不适用bottom、left、right与top这四个属性。
相对定位|相对位置的定位
相对于原本的位置(不是相对于其它的元素的位置)。将元素定位在相对 于原本的位置;该元素会移动到我们所定位的地方,而原本位置的大小会在承载区块中被保留。
绝对定位|绝对位置的定位
相对于承载区块的位置。该元素会从HTML的流向中移除,然后依据承载区块来重新定位给该元素应有的空间,而原本位置的大小会在承载区块中被清除。其亲代元素的定位值不可为static。
固定定位|固定位置的定位
相对于浏览器视窗的视区座标,将位置固定住不再随卷轴的移动而改变。
下,左,右,顶部
所属的 |
设定值 |
底部框设定下方间距左侧设定框左边间距权设定右边间距箱顶盒设定上方间距
|
汽车 | < 长度 > | < 百分比 >
|
预设值:auto 适用于:定位元素 继承性:无
|
这四个属性是用来设定已定位目标元素与承载区块的边界距离。须注意的是,这四个值均可设为负数;当为负数时,该元素的位置会跑到承载区块的边界外。
z-index值
所属的 |
设定值 |
z-index进行 ž轴定位
|
汽车 | < 整数 >
|
预设值:auto 适用于:定位元素 继承性:无
|
用来让元素之间相互堆叠覆盖。其值越大表示越上层 (也可使用负值)。
夹
所属的 |
设定值 |
剪辑 修剪可视的范围
|
汽车 | < 形 >
|
预设值:auto 适用于:绝对定位的元素 继承性:无
|
可见光范围内的体积包围剪内来修。
<shape>
-
RECT
RECT(上,右,下,左)
从元素的左上角开始剪出。
-
插图
插图(上,右,下,左)
类似于矩形方式,不过它是的从元素边界往内剪出。
分享到:
相关推荐
CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位
批量输出 CSS background-position 属性的定位像素值
css 相对定位 设置为相对定位的元素框会偏移某个距离。元素仍然保持其为定位前的形状,它原本所占的空间仍保留。 css相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在她所在的...
介绍了css的定位属性,position的相对定位,绝对定位等,里面的内容并不是很全,希望可以给你提供一些帮助。
在CSS中关于定位的内容是:position:relative | absolute | static | fixed。static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。在本文中,任何一个元素都被文本流所限制了自身的位置,但是...
CSS中主要难以理解的属性包括盒型结构,以及定位。正如positioniseverything,本文将主要讲述关于position的理解,力求让您看完本文后对position有着最全面的认识。 position的四个属性值: relative absolute ...
前言:position:sticky是css定位新增属性;可以说是相对定位relative和固定定位fixed的结合;它主要用在对scroll事件的监听上;简单来说,在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如...
CSS Position(定位) position 属性指定了元素的定位类型。 position 属性的五个值: fixed 定位 元素的位置相对于浏览器窗口是固定位置。 即使窗口是滚动的它也不会移动: 实例 p.pos_fixed { position:fixed; ...
CSS中关于定位(position)是这样定义的:定位(position)允许用户精确定义元素框出现的相对位置,可以相对于它通常出现的位置,相对于其上级元素,相对于另一个元素,或者相对于浏览器视窗本身。每个显示元素都...
但是涉及到弹出层、浮层、页面广告插件等等,都需要CSS中的position属性来定位了,对于初学者来说经常分不清楚是应该用position属性的absolute值、relative值、fixed值等等,下面我们就position属性基本的这三个值的...
这是我自己学习html和css定位(position)时做的练习,仅供初学者学习参考,特别是对定位理解不熟悉的可以参考一下!
本文针对CSS浮动float、定位position进行学习理解,通过实例帮助大家掌握CSS浮动float、定位position技巧,感兴趣的小伙伴们可以参考一下
CSS中背景图片定位方法:background-position的用法,附带算法
CSS-position(定位)中的static、relative、fixed、absolute、sticky以及重叠的简单应用
在学习CSS,学到了了定位,在写代码的时候发现了一个小问题关于固定定位的。 首先我阐述一下什么是定位,定位就是将盒子定在某一位置,自由的漂浮在其他盒子的上面(这些盒子包括标准流和浮动),定位的语法为:定位...
CSS中关于定位(position)是这样定义的: 定位(position)允许用户精确定义元素框出现的相对位置,可以相对于它通常出现的位置,相对于其上级元素,相对于另一个元素,或者相对于浏览器视窗本身。每个显示元素都...
*定位分为静态定位,绝对定位,相对定位,固定定位,粘性定位* (1)static 静态定位: position的默认值,默认文本流的状态。 不会识别left right top bottom指定的坐标 (2)absolute 绝对定位: a : ...
在CSS中,通过定位属性可以实现网页中元素的精确定位,元素的定位属性主要包括定位模式和边偏移两部分。 相对定位 描述 相对定位是将元素相对于自身原本的位置,通过偏移指定的距离,到达新的位置,元素仍然保持其未...
position定位包含哪些
要想控制好层的绝对定位,只要理解CSS中关于定位(position)的定义,一切就会变得轻松简单。 使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为...