之前,我以为 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 的百分比 到底是多少?的更多相关文章

  1. margin、padding单位百分比

    年前做了一个测试题 https://www.wenjuan.com/s/VjaEva/,里面有一道题目涉及到了margin和padding单位为百分比的情况.写出来记录一下以防止自己忘记. <! ...

  2. 关于margin和padding取值为百分比和负值的总结

    以下是自己学习过程中的总结,直接上结论: 1.margin/padding取值为百分比: margin和padding四个方向上的取值为百分比都是参照父级元素的宽度来计算的. 2.margin取值为负 ...

  3. 浅谈Margin和Padding值设置成百分数的布局

    转自:问说网http://www.uedsc.com/discussion-margin-and-padding-values.html Margin和Padding是我们在网页设计经常使用到的CSS ...

  4. 列表、margin和padding的探讨、标签的分类

    一.列表 列表分为无序列表.有序列表和自定义列表 1.无序列表   <ul></ul> 1).内部必须有子标签,<li></li> 2).ul天生自带内 ...

  5. CSS中margin与padding的区别

    CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外 ...

  6. margin和padding那点事及常见浏览器margin padding相关Bug

    用Margin还是用Padding 何时应当使用margin: 需要在border外侧添加空白时. 空白处不需要背景(色)时. 上下相连的两个盒子之间的空白,需要相互抵消时.如15px + 20px的 ...

  7. Margin and Padding in Windows Forms Controls

    https://msdn.microsoft.com/en-us/library/ms229627.aspx Margin and Padding Precise placement of contr ...

  8. margin和padding的用法与区别--以及bug处理方式

    margin和padding的用法: (1)padding (margin) -left:10px; 左内 (外) 边距(2)padding (margin) -right:10px;   右内 (外 ...

  9. css-深入理解margin和padding

    最近一阶段从新学习了css,发现真的有很多很多的地方都是空白的,今天我们来总结一下margin和padding的一些不为人知的秘密! 一利用float和margin实现布局 我们首先来实现一个两列示布 ...

  10. margin与padding大比拼

    用margin还是用padding这个问题相信是每个学css的人都想要去深入了解的. CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距 ...

随机推荐

  1. 极速认识RSS!

    在解释RSS是什么之前,让我先来举个栗子. 大家都能在街道看到许多海报栏.在那里,会贴出各种各样最新的消息,比如哪个系要开讲座了.星期二晚上的电影放什么.二手货转让等 等.只要看一下海报栏,就会对学校 ...

  2. CentOS7怎么更换yum源

    163yum源:1)备份当前yum源防止出现意外还可以还原回来cd /etc/yum.repos.d/cp /CentOS-Base.repo /CentOS-Base-repo.bak2)使用wge ...

  3. arc 097 E - Sorted and Sorted

    E - Sorted and Sorted Time limit : 2sec / Memory limit : 1024MB Score : 600 points Problem Statement ...

  4. 【Python3学习】Python环境搭建

    以前电脑上安装过一个python2的环境,这次由于项目跟其他团队人员对的时候,人家的是python3,因为python2也没怎么学,所以对里面还是很不了解的. 所以今天就重新开始python3的学习, ...

  5. H5转图片支持保存

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Linux基础(学习过程记录)

    常用快捷键:Tab:使用Tab键来进行命令补全,补全目录.补全命令参数Ctrl+c键来强行终止当前程序Ctrl+d 键盘输入结束或退出终端Ctrl+s 暂停当前程序,暂停后按下任意键恢复运行Ctrl+ ...

  7. 7.3.5 Tomcat堆溢出分析(1)

    实战Java虚拟机:JVM故障诊断与性能优化>第7章分析Java堆,本章主要介绍了Java堆的分析方法.首先,介绍了几种常见的Java内存溢出现象及解决思路.其次,探讨了java.lang.St ...

  8. DLC 数制与数制的转换

    进位计数值:用进位的方法进行计数 常用数值有十进制.二进制.八进制.十六进制等. 进位计数制把包括基数与权两个基本问题.

  9. 【C语言基础】循环体系

    1.For循环结构: For循环的一般形式为: for (表达式1 初始化:判断条件:自增自减) { 语句块 } 2.while循环结构: while循环的一般的形式为: 表达式1 初始化 while ...

  10. Eclipse导入文件识别不了jsp怎么办

    1.在出现错误代码页开始处加上<%@ page import="java.util.*"%>,把包引进来2.然后右击项目,依次选择Properties->Java ...