margin-top / padding-top 的百分比 到底是多少?
之前,我以为 margin-top/padding-top 如果设置成%,得到的是 基于父对象总高度的百分比。
但是,这种想法是错的。因为在CSS标准里,是基于父对象宽度的百分比。
<style type="text/css">
.demo {
width: 400px;
height: 200px;
padding-top: 300px;
border: 1px #f00 solid;
} #aII {
width: 50%;
height: 95%;
display: block;
padding-left: 5%;
padding-top: 6%;
margin-top: 7%;
border: 1px solid blue;
}
</style>
<div class="demo">
<div id="aII"></div>
</div>
你觉得 子div 的 margin-top是 28px,还是 14px 呢?
用js代码测试了下
let ele = document.getElementById('aII'),
omputedStyle = ele.ownerDocument.defaultView.getComputedStyle(ele, null);
console.log(omputedStyle.getPropertyValue('margin-top')) //400* 7 = 28px
console.log(omputedStyle.getPropertyValue('padding-top'))//400* 6 =24px
margin-top / padding-top 的百分比 到底是多少?的更多相关文章
- margin、padding单位百分比
年前做了一个测试题 https://www.wenjuan.com/s/VjaEva/,里面有一道题目涉及到了margin和padding单位为百分比的情况.写出来记录一下以防止自己忘记. <! ...
- 关于margin和padding取值为百分比和负值的总结
以下是自己学习过程中的总结,直接上结论: 1.margin/padding取值为百分比: margin和padding四个方向上的取值为百分比都是参照父级元素的宽度来计算的. 2.margin取值为负 ...
- 浅谈Margin和Padding值设置成百分数的布局
转自:问说网http://www.uedsc.com/discussion-margin-and-padding-values.html Margin和Padding是我们在网页设计经常使用到的CSS ...
- 列表、margin和padding的探讨、标签的分类
一.列表 列表分为无序列表.有序列表和自定义列表 1.无序列表 <ul></ul> 1).内部必须有子标签,<li></li> 2).ul天生自带内 ...
- CSS中margin与padding的区别
CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外 ...
- margin和padding那点事及常见浏览器margin padding相关Bug
用Margin还是用Padding 何时应当使用margin: 需要在border外侧添加空白时. 空白处不需要背景(色)时. 上下相连的两个盒子之间的空白,需要相互抵消时.如15px + 20px的 ...
- Margin and Padding in Windows Forms Controls
https://msdn.microsoft.com/en-us/library/ms229627.aspx Margin and Padding Precise placement of contr ...
- margin和padding的用法与区别--以及bug处理方式
margin和padding的用法: (1)padding (margin) -left:10px; 左内 (外) 边距(2)padding (margin) -right:10px; 右内 (外 ...
- css-深入理解margin和padding
最近一阶段从新学习了css,发现真的有很多很多的地方都是空白的,今天我们来总结一下margin和padding的一些不为人知的秘密! 一利用float和margin实现布局 我们首先来实现一个两列示布 ...
- margin与padding大比拼
用margin还是用padding这个问题相信是每个学css的人都想要去深入了解的. CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距 ...
随机推荐
- 极速认识RSS!
在解释RSS是什么之前,让我先来举个栗子. 大家都能在街道看到许多海报栏.在那里,会贴出各种各样最新的消息,比如哪个系要开讲座了.星期二晚上的电影放什么.二手货转让等 等.只要看一下海报栏,就会对学校 ...
- CentOS7怎么更换yum源
163yum源:1)备份当前yum源防止出现意外还可以还原回来cd /etc/yum.repos.d/cp /CentOS-Base.repo /CentOS-Base-repo.bak2)使用wge ...
- arc 097 E - Sorted and Sorted
E - Sorted and Sorted Time limit : 2sec / Memory limit : 1024MB Score : 600 points Problem Statement ...
- 【Python3学习】Python环境搭建
以前电脑上安装过一个python2的环境,这次由于项目跟其他团队人员对的时候,人家的是python3,因为python2也没怎么学,所以对里面还是很不了解的. 所以今天就重新开始python3的学习, ...
- H5转图片支持保存
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Linux基础(学习过程记录)
常用快捷键:Tab:使用Tab键来进行命令补全,补全目录.补全命令参数Ctrl+c键来强行终止当前程序Ctrl+d 键盘输入结束或退出终端Ctrl+s 暂停当前程序,暂停后按下任意键恢复运行Ctrl+ ...
- 7.3.5 Tomcat堆溢出分析(1)
实战Java虚拟机:JVM故障诊断与性能优化>第7章分析Java堆,本章主要介绍了Java堆的分析方法.首先,介绍了几种常见的Java内存溢出现象及解决思路.其次,探讨了java.lang.St ...
- DLC 数制与数制的转换
进位计数值:用进位的方法进行计数 常用数值有十进制.二进制.八进制.十六进制等. 进位计数制把包括基数与权两个基本问题.
- 【C语言基础】循环体系
1.For循环结构: For循环的一般形式为: for (表达式1 初始化:判断条件:自增自减) { 语句块 } 2.while循环结构: while循环的一般的形式为: 表达式1 初始化 while ...
- Eclipse导入文件识别不了jsp怎么办
1.在出现错误代码页开始处加上<%@ page import="java.util.*"%>,把包引进来2.然后右击项目,依次选择Properties->Java ...