css中的百分比单位详解
CSS支持多种单位形式,如百分比、px、pt、rem等,百分比和px是常用的单位,随着移动端和响应式的流行,rem、vh、vw也开始普遍使用,这些单位你可能未必知道,想了解?可以戳此文: CSS:7个你可能不认识的单位 。
今天在SegmentFault社区碰到了两个关于百分比计算的问题,一个是在 translate
中使用百分比的时候,是相对于哪个DOM元素的大小计算的;另外一个是在 padding
、 margin
等中使用百分比时,百分比又是怎么转为 px
的呢?
对于第一个,移动距离是根据自身元素的大小来计算的:
[The percentage] refer[s] to the size of the element’s box
具体参考: css3 translate in percent (自备梯子)
对于第二个,我认为percentage转px应该是浏览器根据css规定来完成的,但是具体怎么算呢?
Example 1: Margins
<div style="width: 20px">
<div id="temp1" style="margin-top: 50%">Test top</div>
<div id="temp2" style="margin-right: 25%">Test right</div>
<div id="temp3" style="margin-bottom: 75%">Test bottom</div>
<div id="temp4" style="margin-left: 100%">Test left</div>
</div>
得到的offset如下:
temp1.marginTop = 20px * 50% = 10px;
temp2.marginRight = 20px * 25% = 5px;
temp3.marginBottom = 20px * 75% = 15px;
temp4.marginLeft = 20px * 100% = 20px;
然后,我又测试了 padding
,原以为 padding
的值会根据应用了该属性的相关元素来计算,但让我惊讶的是, padding
也是根据应用该属性的 父元素的宽 来计算的,跟 margin
表现一致。(再插一句:当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,元素竖向的百分比设定也是相对于容器的宽度,而不是高度。)
但有一个坑,上面都是对于未定位元素。好奇的我又很好奇,对于非静态定位元素的 top
, right
, bottom
, 和 left
的百分比值又怎么计算呢?
Example 2: Positioned Elements
<div style="height: 100px; width: 50px">
<div id="temp1" style="position: relative; top: 50%">Test top</div>
<div id="temp2" style="position: relative; right: 25%">Test right</div>
<div id="temp3" style="position: relative; bottom: 75%">Test bottom</div>
<div id="temp4" style="position: relative; left: 100%">Test left</div>
</div>
得到的offset如下:
temp1.top = 100px * 50% = 50px;
temp2.right = 100px * 25% = 25px;
temp3.bottom = 100px * 75% = 75px;
temp4.left = 100px * 100% = 100px;
对于定位元素,这些值也是相对于父元素的,但与非定位元素不同的是,它们是相对于 父元素的高而不是宽。
when the parent element does not have a height, then percentage values are processed as auto instead
虽然有点困惑,但只需要记住: 对于 margin
和 padding
,百分比按照父元素的宽计算,对于定位元素,则按照父元素的高计算。
css中的百分比单位详解相关推荐
- css中的position定位详解
css中的position定位详解 position属性指定了元素的定位类型. position属性的5个值:static,relative,fixed,absolute,sticky; 元素可以使用 ...
- CSS中的BFC BFC详解 BFC可以解决的问题汇总
CSS中的BFC BFC详解 BFC可以解决的问题汇总 简介 BFC 全称 Block Formatting Context, 名为 "块级格式化上下文"它是CSS2.1规范定义的 ...
- 前端如何设置背景颜色的透明度 css中的 rgba() 函数详解 :background-color: rgba(255,192,203,0.3)
目录 前言 rgba() 函数 详解 再分享一个小技巧哈哈哈 前言 今天在开发移动端的时候感觉没背景颜色有点丑,再加上自己做的是蛋糕app,觉得暖色应该会很好看,于是就用了这行代码 backgroun ...
- html中的em等于多少像素,CSS中的em运用详解,1em等于多少像素?
使用CSS也好久了,但一直都是在使用"px"来设置Web元素的相关属性,未敢使用"em".主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中 ...
- html页边距为负值,css中的padding属性可以为负值吗?css中padding属性的详解
关于css盒模型中的内边距padding属性的详细介绍,还有新手常犯的一个错误,内边距padding属性真的能写入负值.这个答案在文章的最后,现在就让我们一起来看这篇文章吧 首先我们介绍的是第一个问题 ...
- css中伪类选择器详解(a:visited不生效的原因)
css伪类是一种css定义的方法,主要用于对链接显示效果的定义, 主要包括: a:link :链接平常的状态. a:visited:链接被访问之后的状态. a:hover:鼠标停留在链接上的状态. a ...
- CSS中的text-overflow属性详解 (控制文字在一行显示,超出部分加省略号)
text-overflow: ellipsis; 表示当文本内容超出所在容器的宽度时,用省略号来代替超出的部分. white-space:nowrap; 表示文本不换行. overflow: hidd ...
- HTML/CSS中文本text属性详解
我们可以通过添加一些HTML标记和CSS属性来设置text文本的样式. HTML中的标记包括结构化标记和语义化标记两种,结构化标记简单来说是用来标记标题和段落的,而语义化标记则是不会影响到网页的结构. ...
- Css中display:inline-block用法详解
display:block就是将元素显示为块级元素 block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div&g ...
最新文章
- 江阴市职称计算机考试,要评职称的人请注意!!江阴这些新变化了解一下
- Windows Server 2012R2 WDS部署Windows 7
- JavaScript中getBoundingClientRect()方法详解
- boost::fill相关的测试程序
- python-基础day10
- mysql选择索引逻辑_Mysql索引选择逻辑
- 【转】Linux如何在系统启动时自动加载模块
- 第23天:js-数据类型转换
- 设计一个简易的有道词典
- python上网行为分析_用 Python 一键分析你的上网行为, 看是在认真工作还是摸鱼...
- Java随机产生中文昵称
- 图像分类网络总结回顾(上)
- [转]“新欢乐时光”病毒源代码分析
- ddr4 dqs 频率_你好,请问你知道DDR3中是DQS是什么意思吗
- 世界那么大,如何去看看?进入新世界的框架和脉络
- 软件推荐!真正免费的思维导图软件,全在这里了!
- java gef_GEF最简单的入门-helloword(1)
- TIDB集群搭建-流水线
- 同步110序列检测电路
- uni-app 介绍,什么是uni-app,它是干嘛的
热门文章
- 中科院测试班linux基础试卷答案,linux基础shell考试试卷教学文案.doc
- LinuxC语言简单实现客户端使用TFTP协议文件下载-网络编程-应用层
- JAVA学习-8种基本类型及其对应的封装类
- 明日之后什么服务器物品最便宜,明日之后:交易之城如何买到便宜东西,一件装备省几万很轻松...
- 05-20210222在WIN10下通过串口给华为海思Hi3518EV300刷机(鸿蒙系统)
- 逻辑推理阅读理解任务及方法
- swift设计模式:(三)装饰者模式(Decorator Pattern)
- 在PLC控制器CPU多核的基本概念
- 关于 wcout 输出中文的问题
- 小程序如何实现打分功能