CSS中的百分比值

Author : lovecicy

一、介绍 CSS中有很多的属性可以有百分比值,而这些百分比值所相对的却各不相同,本文就来总结下这些拥有百分比值的CSS属性的百分比值是相对于谁来计算的。 首先有一个概念需要交待,那就是containing block,这里将其翻译成包围块。许多元素百分比值的相对值是根据包围块来计算的,因此对于包围块的定义,就非常重要了。包围块可以理解为一个包围元素的长方形,而包围块的定义对不同元素来说各不相同。 根元素的包围块叫做初始包围块,和viewport有同样的尺寸。其他元素的包围块取决于元素的定位值: static/relative: 包围块为祖先元素中最近的display值为block/inline-block/list-item/run-in/table/table-cell的元素的内容区域 absolute: 包围块为节点树中最近的定位元素的包括padding的内容区域,定位元素即POSITION属性值为absolute、fixed或relative的元素 fixed: 包围块为viewport,即可视区域 二、来看看都有哪些百分比值 知道了包围块的定义,我们再来看看哪些属性有百分比值:[Read More]

standard