一日一练-CSS CSS中percentage百分值的使用
子曰:学好百分值,考试考百分
首先是确定CSS 中的percentage 都可以应用在CSS 中的哪些属性,以及这些属性的值如何进行计算的,参考CSS 参考手册进行统计。
定位(Positioning)
top
用百分比来定义距离顶部的偏移量。百分比参照包含块的高度。可以为负值。right
用百分比来定义距离右边的偏移量。百分比参照包含块的宽度。可以为负值。bottom
用百分比来定义距离底部的偏移量。百分比参照包含块的高度。可以为负值。left
用百分比来定义距离左边的偏移量。百分比参照包含块的宽度。可以为负值。
尺寸与补白(Dimension)
width
用百分比来定义宽度。百分比参照包含块宽度。不允许负值。min-width
用百分比来定义最小宽度。不允许负值。max-width
用百分比来定义最大宽度。不允许负值。height
用百分比来定义高度。百分比参照包含块高度。不允许负值。min-height
用百分比来定义最小高度。不允许负值。max-height
用百分比来定义最大高度。不允许负值margin
用百分比来定义外补白。水平(默认)书写模式下,参照其包含块的width
进行计算,其它情况参照height
,可以为负值。padding
用百分比来定义内补白。水平(默认)书写模式下,参照其包含块的width
进行计算,其它情况参照height
,不允许负值。
背景与边框(Backgrounds and Borders)
border-radius
用百分比定义圆形半径或椭圆的半长轴,半短轴。水平方向百分比参照元素宽度(非内容宽度),垂直方向参照元素高度。不允许负值。border-image-width
用百分比指定图像边框的厚度。参照图像边框区域的大小(包含border和padding)进行换算。不允许负值。background-position
用百分比指定背景图像在元素中出现的位置。可以为负值。参考容器尺寸减去背景图尺寸进行换算。background-size
当属性值为百分比时,参照背景图像的background-origin
区域大小进行换算(而不是包含块大小)。
字体(Font)
font-size
用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值。
文本(Text)
word-spacing
用百分比指定单词间隔。可以为负值。(CSS3)。text-indent
用百分比指定文本的缩进。可以为负值。vertical-align
把当前盒提升(正值)或者降低(负值)这个距离,百分比相对line-height计算。当值为0%时等同于baseline。line-height
用百分比指定行高,其百分比基于文本的font-size进行换算。不允许负值。text-size-adjust
用百分比来指定文本大小在设备尺寸不同的情况下如何调整。
伸缩盒(Flexible Box)(新)
flex-basis
用百分比来定义宽度。不允许负值。
变换(Transform)
transform-origin
用百分比指定坐标值。可以为负值。perspective-origin
用百分比指定透视点坐标值,相对于元素宽度。可以为负值。
总结
- 定位中的
top
、right
、bottom
、left
值为百分比时,都是参考包含块同方向的width
或height
进行计算值 - 尺寸与补白中的
height
、*-height
、width
、*-width
值为百分比时,也是参考包含块同方向的width
或height
进行计算值 - 而尺寸与补白中的
padding
、margin
,则是水平(默认)书写模式下,参照其包含块的width
进行计算,也就是说同书写的方向相同。(大概是由于padding
是同内容相关的,同时没有 继承性,在同一书写方向上便于计算值) - 字体中的
font-size
则是基于父对象中字体的尺寸(大该是由于font-size
有继承性) - 文本中的
text-indent
也是基于包含块的width
进行计算的,(推测是同书写方向相同,经验证确实是,当设置writing-mode
为vertical-lr
时,是基于包含块的height
进行计算的) - 文本中的
line-height
基于font-size
进行计算,而vertical-align
则是基于line-height
进行计算的。 - 背景与边框中的
background-position
则是基于容器尺寸减去背景图尺寸进行换算(是这么理解的,因为值为50% 时,使得图像居中,也就是)
`background-position` = (容器尺寸-背景尺寸)/2
- 背景与边框中的
background-size
则是基于background-origin
区域大小(很容易将一个图进行放大或缩小,下面两个图,分别是设置为50% 和33.3333% 的效果)
- 变换中的
transform-origin
值为百分比时,横坐标参考元素的宽度,纵坐标参考元素的高度
一日一练-CSS CSS中percentage百分值的使用的更多相关文章
- 说说CSS学习中的瓶颈
虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...
- CSS学习中的瓶颈期深入分析
虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...
- 算警示吧——此文来自张鑫旭(说说CSS学习中的瓶颈)
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2523 虽已数年,但未 ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- CSS布局中的水平垂直居中
CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...
- 怎样将多个CSS文件导入一个CSS文件中
问题: 在HTML中引入css的其中的两个方法: 导入式和链接式的目的都是将一个独立的css文件引入一个文件中,二者的区别不大,事实上,二者最大的区别在于链接式使用html的标记引入外部css文 ...
- DIV CSS布局中position属性用法深入探究
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...
- 认识和理解css布局中的BFC
认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Con ...
- CSS/CSS3中的原生变量var详解以及布局响应式网页扩展
使用语法 首先我们先来看一个例子:html代码: <div class="element">这是一段文字</div> css代码: .element { w ...
随机推荐
- 【Python】 魔法方法
魔法方法 这个名字真的很中二有没有 = =(或者说翻译气息太浓了,作为一个学外语的看到这种真是想吐槽的不行..) 从形式上来说,在方法的名字前后个加上两条下划线的就是魔法方法了 .从功能上说,所有魔法 ...
- Catch That Cow_bfs
Catch That Cow 题目大意:FrammerJohn找奶牛,给出n和k.FJ在n处.每次他可以向左移动一格.向右移动一格或者移动到自己当前格子数乘2的地方.求FJ最少移动多少次.其中,FJ和 ...
- mysqldump 备份脚本
#!/bin/bash DUMP=/usr/bin/mysqldump OUT_DIR=/home/mysql LINUX_USER=root DB_NAME=snale DB_USER=root D ...
- 访问限制:由于对必需的库 C:/Program Files/Java/jre6/lib/rt.jar 具有一定限制,因此无法访问类型。。
在项目上单击右键选择 属性 Java编译器 错误或警告 选择启用特定于项目的设置 建议不要使用和限制使用的API将 禁止的引用(访问规则) 设置为 警告 然后应用即可解决
- python爬虫---抓取优酷的电影
最近在学习爬虫,用的BeautifulSoup4这个库,设想是把优酷上面的电影的名字及链接爬到,然后存到一个文本文档中.比较简单的需求,第一次写爬虫.贴上代码供参考: # coding:utf-8 i ...
- Linux下的/etc/hosts文件
在Unix系统下面有一个/etc/hosts文件,在我的Mac上,这个文件的内容如下: ## # Host Database # # localhost is used to configure th ...
- Alpha第三天
Alpha第三天 听说 031502543 周龙荣(队长) 031502615 李家鹏 031502632 伍晨薇 031502637 张柽 031502639 郑秦 1.前言 任务分配是VV.ZQ. ...
- TRY
- tornado options
tornado.options.define() 用来定义options选项变量的方法,定义的变量可以在全局的tornado.options.options中获取使用,传入参数: name 选项变量名 ...
- python基础学习篇章一
一. 对Python的认识 1. Python的标准实现方式是将源代码的语句编译为字节码的形式,之后再将字节码解释出来.由于字节码是一种与平台无关的形式,字节码具有可移植性.但是Python没有将代码 ...