CSS 属性之中经常出现的百分比(转)
CSS 的属性值中经常会出现百分比,搞清它们的基数是一件很重要的事情。我特意查看了一下 W3C 的 CSS2.1 标准,在此整理下:
百分比单位
乘以包含块的宽度 margin, padding, left, right, text-indent, width, max-width, min-width
乘以包含块的高度 top, bottom, height, max-height, min-height
关于包含块(containing block)的概念,不能简单地理解成是父元素。如果是静态定位和相对定位,包含块一般就是其父元素。但是对于绝对定位的元素,包含块应该是离它最近的 position 为 absolute、relative、或者 fixed 的祖先元素。对固定定位的元素,它的包含块是视口(viewport)。具体可以参考 W3Help。
乘以元素的字体大小 line-height
乘以元素的行高 vertical-align
背景定位中的百分比 background-position 分别设置水平方向和垂直方向上的两个值,如果使用百分比,那么百分比值会同时应用于元素和图像。例如 50% 50% 会把图片的(50%, 50%)这一点与框的(50%, 50%)处对齐,相当于设置了 center center。同理 0% 0% 相当于 left top,100% 100% 相当于 right bottom。
字体大小中的百分比 font-size 中的百分比值应该乘以元素所继承到的字体大小,也就是父元素的字体大小。
其他字体单位 既然说到了字体大小,顺便八一八其他的字体单位吧,有些可能平时并不会用,但是了解一下也没有坏处。有两个相对单位是:
em——相当于当前的字体高度,称作“全身方框”(em square)。如果在 font-size 上使用这个单位,应该乘以父元素的字体大小。用在 font-size 之外的属性上,则应该乘以元素自身的字体大小。 ex——相当于字体中的”x”的高度。 以下是绝对单位:
in——英寸(inch),相当于 2.54cm。 cm——厘米(centimeter)。 mm——毫米(millimeter)。 pt——磅(point)。1pt 相当于 1in 的 1/72。 pc——皮卡(pica)。1pc = 12pt。 px——像素(pixel unit)。1px = 0.75pt。
百分比的继承:
如果某个元素设置了百分比的属性,则后代元素继承的是计算后的值。例如:
p { font-size: 10px } p { line-height: 120% } / 120% of 'font-size' / 那么p的子元素继承到的值是 line-height: 12px,而不是 line-height: 120%。
CSS 属性之中经常出现的百分比(转)的更多相关文章
- css学习(2)-- 常见的CSS属性和值
1.CSS中修饰字体的属性 属 性 描 述 属 性 值 font-family 字体族科 任意字体族科名称都可以使用例如Times.serif等,而且多个族科的赋值是可以使用的,中间用 ...
- CSS 属性 - position讲解
postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: 1. position: static2. position: inherit3. position: r ...
- 简明CSS属性:定位
简明CSS属性:定位 第一话 定位 (Positioning) 关键词:position/z-index/top/bottom/right/left/clip POSITION 该属性用来决定元素在页 ...
- CSS属性操作/下
CSS属性操作/下 1.伪类 anchor伪类 跟<a>/</a>有关:专用于控制链接的显示效果 a:link(没有接触过的链接),用于定义了链接的常规状态. a:hover( ...
- CSS属性操作
CSS属性操作 1 属性选择器 Elenment(元素) E[att] 匹配所有具有att属性的E元素,不考虑它的值.(注意:E在此处可以省略)(推荐使用) 例如:[po]{ font-size: 5 ...
- css属性分类介绍
css属性分类介绍 CSS分类目录 文本/字体/颜色 文本相关 字体相关 颜色相关 背景相关 大小/布局 大小属性 margin 外边距 padding 内边距 border 边框 position ...
- CSS属性之position讲解
postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: position: static position: inherit position: relative ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- 常用css属性
一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal;字间距 letter-spacing: 数值 | inherit | nor ...
随机推荐
- 内核启动后,lcd显示logo失败
针对-s5pv210,但对其他平台也使用 lcd显示logo失败,若显示成功默认的logo是一只企鹅,但是串口打印“Start display and show logo”,但是LCD屏没有显示 ...
- Codeforces Round #521 (Div. 3) C. Good Array
C. Good Array time limit per test 1 second memory limit per test 256 megabytes input standard input ...
- poi进行excle操作
一 excle导出: 所需要jar包 <dependency> <groupId>org.apache.poi</groupId> <artifactId&g ...
- maven 更新子工程中依赖的父工程 版本
eclipse 中: versions:update-child-modules cmd: mvn versions:update-child-modules
- P2913 [USACO08OCT]车轮旋转Wheel Rotation
传送门 初始状态是 0,如果有 1 的连接,0 就变 1,如果还有 1 的连接,1 就变 0,如果是 0 的连接就不变 所以就是把答案异或上所有连接,不用考虑顺序,反正最终是一样的 #include& ...
- 神奇的操作--O(1)快速乘
从同机房大佬那里听来的... 用O(1)时间求出两个相乘超过long long的数的取摸的结果 神奇的操作... inline long long multi(long long x,long lon ...
- OS---文件结构
1.概述 1.1 对于任何一个文件,都存在以下2种形式结构: 文件的逻辑结构: 从用户的角度出发所观察到的文件组织形式,独立于文件的物理特性: 文件的物理结构(文件存储结构): 文件在外存上的存储组织 ...
- Mybatis学习笔记4 - 获取自增主键的值
获取自增主键的值:mysql支持自增主键,自增主键值的获取,mybatis也是利用statement.getGenreatedKeys():useGeneratedKeys="true&qu ...
- Android NDK开发 Jni中打日志LOG(二)
HelloJni.c文件中,加入头文件和函数声明.最终文件如下: #include <jni.h> #include <string.h> #include<androi ...
- Hadoop Intro - Configure 01
hadoop配置文件详解.安装及相关操作 一. Hadoop伪分布配置 1. 在conf/hadoop-env.sh文件中增加:export JAVA_HOME=/home/Java/j ...