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边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距 ...
随机推荐
- Excel 2016 密码保护破解
Excel 2016的密码保护可以区分为几个: 文件密码保护(Excel中叫做工作簿保护) 文件打开权限密码 文件修改权限密码 工作表保护 关于各个保护密码的设置方式请查阅其他资料,我的情况是之前自己 ...
- Windows系统配置
1.常用设置 (1)设置虚拟内存 右击:计算机-属性-高级系统设置-高级选项卡-性能组框设置按钮-高级选项卡-虚拟内存组框更改按钮-按需求设置 (2)设置休眠文件 改变休眠文件大小:powercfg ...
- jenkins部署前后端分离的vue项目
1 General Name: 变量名. 类似给分支起一个名字的意思, 可随意取 Description: 描述, 非必填 Parameter Type: 选择 Branch or Tag Defau ...
- Java中的升序和降序
package ah; import java.util.Arrays; import java.util.Collections; import java.util.Comparator; impo ...
- 从javascript 调用angular的函数
从vanilla javascript 调用angular的函数: * 调用 service中的函数var yourService = angular.element(document.body).i ...
- Django基础模型层(77-78)
jango框架之模型层(d77-78)一 单表操作: 1 mysql数据库:settings里配置 'default': { # key值必须都是大写 'ENGINE': 'django.d ...
- day44前端开发2之css基础
web前端开发1一.前端三剑客之css 1.选择器:由标签/类/id单独或组合出现 2.作用域:{}内部区域 3.样式块:满足css链接语法的各种样式 eg:引入的基本样式 <head> ...
- Python-Thread(通俗易懂)
此类表示在单独的控制线程中运行的活动,有两种方法可以指定该活动,一是将可调用对象传递给构造函数,二是通过覆盖子类中的run()方法. 如果你对线程不太理解,我们可以打个比方,把线程数看作车辆数,我们来 ...
- IntelliJ IDEA 破解Jrebel6.3.0安装
首先下载所必要的两个文件(jrebel3.6.0和cracked文件) 密码:pvsd 注意:如果不是该版本的Jrebel该破解文件可能无效. 步骤1:安装 解压文件得出两个压缩包 在idea中选择 ...
- dax学习
增长率 = (DIVIDE(SUM('业绩达成'[实际业绩]),CALCULATE(SUM('业绩达成'[实际业绩]),PREVIOUSMONTH('业绩达成'[周期])))-1)*100上月业绩 = ...