html 百分比正方形,css 中的百分比计算方法
CSS支持多种单位形式,如百分比、px、pt、rem等,百分比和px是常用的单位,随着移动端和响应式的流行,rem、vh、vw也开始普遍使用。
今天在SegmentFault社区碰到了两个关于百分比计算的问题,一个是在translate中使用百分比的时候,是相对于哪个DOM元素的大小计算的;另外一个是在padding、margin等中使用百分比时,百分比又是怎么转为px的呢?
对于第一个,移动距离是根据自身元素的大小来计算的:
[The percentage] refer[s] to the size of the element's box
例如:在不知道元素的宽度和高度的情况下,让元素水平垂直居中
创建类名为wrapper的div,并设置其样式
.wrapper {
padding: 20px;
background:orange;
color:#fff;
position:absolute;
top:50%;
left:50%;
border-radius: 5px;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
对于第二个,我认为percentage转px应该是浏览器根据css规定来完成的,但是具体怎么算呢?
Example 1: Margins
得到的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
得到的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,百分比按照父元素的宽计算,对于定位元素,则按照父元素的高计算。
html 百分比正方形,css 中的百分比计算方法相关推荐
- html中百分比是怎样计算的,css 中的百分比计算方法
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 css 中的百分比计算方法 CSS支持多种单位形式,如百分比.px.pt.rem等,百分比和px是常用的单位,随着移动端和响应式的流行,rem.vh.vw ...
- css中的百分比单位详解
CSS支持多种单位形式,如百分比.px.pt.rem等,百分比和px是常用的单位,随着移动端和响应式的流行,rem.vh.vw也开始普遍使用,这些单位你可能未必知道,想了解?可以戳此文: CSS:7个 ...
- android:paddingtop 百分比,相对层中的百分比宽度
相对层中的百分比宽度 我正在为登录进行表单布局.Activity在我的Android应用程序中.下面的图片是我希望它看起来的样子: 我能够通过以下方式实现这个布局XML..问题是,这有点麻烦.我不得不 ...
- html 百分比正方形,css实现未知宽度的正方形需求
今天群里有哥们问了一下,百分比宽度的正方形如何用css实现.其实就是不定宽的正方形如何用css实现. 第一个方法利用图片的等比例缩放,用base64写一个1*1的透明png图片,宽度100%,这样容器 ...
- css设置元素继承父元素宽度_详解CSS中的百分比的应用
前言 百分比的应用随处可见,但是就一直没有机会去好好总结一下,如今项目中遇到的坑都是当年留的泪,在月底之前终于把这个好久想总结的文章给写完了. 1.使用百分比的场合 在目前项目中,最常用百分比的莫过于 ...
- html div百分比计算,css计算元素百分比大小
包含块定义: 百分比是基于包含块的宽度来确定的 第一种:children设置position为绝对定位,父元素为relative或者为absolute.fixed:则children的百分比大小就是基 ...
- css定位的百分比的算法,css定位中的百分比
----转载自自己在牛人部落中的相关文章--- 在前端css定位中经常面对的一个问题是,百分比定位究竟是针对于谁定位? 一.margin,padding的百分比 首先从css的设计意图说起,在浏览器默 ...
- css单位计算方法,CSS中的单位和百分比计算
CSS中的单位和百分比计算 发布时间:2020-05-23 15:53:59 来源:亿速云 阅读:217 作者:鸽子 CSS中的单位 绝对单位 in-英寸: cm; mm; pt-磅 相对单位 em- ...
- html vh和百分比,css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位...
css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...
最新文章
- ASP.NET性能调整之解决Server Too Busy错误
- python编码格式
- oracle大数据量更新引发的死锁问题解决方法及oracle分区和存储过程的思考
- python多线程和多进程——python并行编程实验
- MySQL为表添加外键约束
- PIC单片机入门_8位AD转换器
- adb shell 调试 Android 串口
- mysql 左右值算法详解_无限分类左右值算法的常规操作逻辑
- 关于数据结构,这个重要概念不了解可不行
- 一个人php建站_人人站CMS-简单安全的PHP开源CMS建站系统
- C#几行代码让电脑蓝屏
- wireshark TCP协议首选项配置详解
- 计算机桌面性能4.4怎么办,台式CPU性能怎么看?桌面CPU天梯图2018年1月更新版 (全文)...
- mysql 金额大写_小写转大写金额_MySQL
- 高中计算机课听课记录表,信息技术课听课记录
- apicloud访问php,支付宝 app应用 受权 php + APICloud
- 对比分析冯诺依曼结构和哈佛结构。
- 典型相关分析、对应分析
- VC++实现打开文件和打开所在文件夹的功能(附源码)
- java上传文件至阿里云oss工具类