子曰:学好百分值,考试考百分

首先是确定CSS 中的percentage 都可以应用在CSS 中的哪些属性,以及这些属性的值如何进行计算的,参考CSS 参考手册进行统计。

定位(Positioning)

  1. top

    用百分比来定义距离顶部的偏移量。百分比参照包含块的高度。可以为负值。
  2. right

    用百分比来定义距离右边的偏移量。百分比参照包含块的宽度。可以为负值。
  3. bottom

    用百分比来定义距离底部的偏移量。百分比参照包含块的高度。可以为负值。
  4. left

    用百分比来定义距离左边的偏移量。百分比参照包含块的宽度。可以为负值。

尺寸与补白(Dimension)

  1. width

    用百分比来定义宽度。百分比参照包含块宽度。不允许负值。
  2. min-width

    用百分比来定义最小宽度。不允许负值。
  3. max-width

    用百分比来定义最大宽度。不允许负值。
  4. height

    用百分比来定义高度。百分比参照包含块高度。不允许负值。
  5. min-height

    用百分比来定义最小高度。不允许负值。
  6. max-height

    用百分比来定义最大高度。不允许负值
  7. margin

    用百分比来定义外补白。水平(默认)书写模式下,参照其包含块的width进行计算,其它情况参照height,可以为负值。
  8. padding

    用百分比来定义内补白。水平(默认)书写模式下,参照其包含块的width进行计算,其它情况参照height,不允许负值。

背景与边框(Backgrounds and Borders)

  1. border-radius

    用百分比定义圆形半径或椭圆的半长轴,半短轴。水平方向百分比参照元素宽度(非内容宽度),垂直方向参照元素高度。不允许负值。
  2. border-image-width

    用百分比指定图像边框的厚度。参照图像边框区域的大小(包含border和padding)进行换算。不允许负值。
  3. background-position

    用百分比指定背景图像在元素中出现的位置。可以为负值。参考容器尺寸减去背景图尺寸进行换算。
  4. background-size

    当属性值为百分比时,参照背景图像的background-origin区域大小进行换算(而不是包含块大小)。

字体(Font)

  1. font-size

    用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值。

文本(Text)

  1. word-spacing

    用百分比指定单词间隔。可以为负值。(CSS3)。
  2. text-indent

    用百分比指定文本的缩进。可以为负值。
  3. vertical-align

    把当前盒提升(正值)或者降低(负值)这个距离,百分比相对line-height计算。当值为0%时等同于baseline。
  4. line-height

    用百分比指定行高,其百分比基于文本的font-size进行换算。不允许负值。
  5. text-size-adjust

    用百分比来指定文本大小在设备尺寸不同的情况下如何调整。

伸缩盒(Flexible Box)(新)

  1. flex-basis

    用百分比来定义宽度。不允许负值。

变换(Transform)

  1. transform-origin

    用百分比指定坐标值。可以为负值。
  2. perspective-origin

    用百分比指定透视点坐标值,相对于元素宽度。可以为负值。

总结

  1. 定位中的toprightbottomleft 值为百分比时,都是参考包含块同方向的widthheight 进行计算值
  2. 尺寸与补白中的height*-heightwidth*-width 值为百分比时,也是参考包含块同方向的widthheight 进行计算值
  3. 而尺寸与补白中的paddingmargin,则是水平(默认)书写模式下,参照其包含块的width进行计算,也就是说同书写的方向相同。(大概是由于padding 是同内容相关的,同时没有 继承性,在同一书写方向上便于计算值)
  4. 字体中的font-size则是基于父对象中字体的尺寸(大该是由于font-size 有继承性)
  5. 文本中的text-indent 也是基于包含块的width 进行计算的,(推测是同书写方向相同,经验证确实是,当设置writing-modevertical-lr 时,是基于包含块的height 进行计算的)
  6. 文本中的line-height 基于font-size 进行计算,而vertical-align 则是基于line-height 进行计算的。
  7. 背景与边框中的background-position 则是基于容器尺寸减去背景图尺寸进行换算(是这么理解的,因为值为50% 时,使得图像居中,也就是)
`background-position` = (容器尺寸-背景尺寸)/2
  1. 背景与边框中的background-size 则是基于background-origin区域大小(很容易将一个图进行放大或缩小,下面两个图,分别是设置为50% 和33.3333% 的效果)



  2. 变换中的transform-origin 值为百分比时,横坐标参考元素的宽度,纵坐标参考元素的高度

一日一练-CSS CSS中percentage百分值的使用的更多相关文章

  1. 说说CSS学习中的瓶颈

    虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...

  2. CSS学习中的瓶颈期深入分析

    虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...

  3. 算警示吧——此文来自张鑫旭(说说CSS学习中的瓶颈)

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2523 虽已数年,但未 ...

  4. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  5. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

  6. 怎样将多个CSS文件导入一个CSS文件中

    问题: 在HTML中引入css的其中的两个方法:    导入式和链接式的目的都是将一个独立的css文件引入一个文件中,二者的区别不大,事实上,二者最大的区别在于链接式使用html的标记引入外部css文 ...

  7. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  8. 认识和理解css布局中的BFC

    认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Con ...

  9. CSS/CSS3中的原生变量var详解以及布局响应式网页扩展

    使用语法 首先我们先来看一个例子:html代码: <div class="element">这是一段文字</div> css代码: .element { w ...

随机推荐

  1. 【Python】 魔法方法

    魔法方法 这个名字真的很中二有没有 = =(或者说翻译气息太浓了,作为一个学外语的看到这种真是想吐槽的不行..) 从形式上来说,在方法的名字前后个加上两条下划线的就是魔法方法了 .从功能上说,所有魔法 ...

  2. Catch That Cow_bfs

    Catch That Cow 题目大意:FrammerJohn找奶牛,给出n和k.FJ在n处.每次他可以向左移动一格.向右移动一格或者移动到自己当前格子数乘2的地方.求FJ最少移动多少次.其中,FJ和 ...

  3. mysqldump 备份脚本

    #!/bin/bash DUMP=/usr/bin/mysqldump OUT_DIR=/home/mysql LINUX_USER=root DB_NAME=snale DB_USER=root D ...

  4. 访问限制:由于对必需的库 C:/Program Files/Java/jre6/lib/rt.jar 具有一定限制,因此无法访问类型。。

    在项目上单击右键选择 属性 Java编译器 错误或警告 选择启用特定于项目的设置 建议不要使用和限制使用的API将 禁止的引用(访问规则) 设置为 警告 然后应用即可解决

  5. python爬虫---抓取优酷的电影

    最近在学习爬虫,用的BeautifulSoup4这个库,设想是把优酷上面的电影的名字及链接爬到,然后存到一个文本文档中.比较简单的需求,第一次写爬虫.贴上代码供参考: # coding:utf-8 i ...

  6. Linux下的/etc/hosts文件

    在Unix系统下面有一个/etc/hosts文件,在我的Mac上,这个文件的内容如下: ## # Host Database # # localhost is used to configure th ...

  7. Alpha第三天

    Alpha第三天 听说 031502543 周龙荣(队长) 031502615 李家鹏 031502632 伍晨薇 031502637 张柽 031502639 郑秦 1.前言 任务分配是VV.ZQ. ...

  8. TRY

  9. tornado options

    tornado.options.define() 用来定义options选项变量的方法,定义的变量可以在全局的tornado.options.options中获取使用,传入参数: name 选项变量名 ...

  10. python基础学习篇章一

    一. 对Python的认识 1. Python的标准实现方式是将源代码的语句编译为字节码的形式,之后再将字节码解释出来.由于字节码是一种与平台无关的形式,字节码具有可移植性.但是Python没有将代码 ...