margin、padding单位百分比
年前做了一个测试题 https://www.wenjuan.com/s/VjaEva/，里面有一道题目涉及到了margin和padding单位为百分比的情况。写出来记录一下以防止自己忘记。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.warp{
width:500px;
height:300px;
overflow: hidden;
background-color: #279186;
position: relative;
}
.ctx{
padding:10%;
margin:10%;
width:100px;
height:50px;
background-color: #A56D1C;
}
.top{
position: absolute;
width: 100%;
top:50px;
left:0;
padding:0;
margin:0;
color:#333;
height:1px;
border:0 none;
background-color: #333;
}
.left{
position: absolute;
width:1px;
height:100%;
left:50px;
top:0;
background-color: #333;
}
</style>
</head>
<body>
<div class="warp">
<div class="ctx"></div>
<!-- 辅助线 -->
<hr class="top " />
<div class="left "></div>
</div>
</body>
</html>
在浏览器里表示为
可以见到，padding和margin的单位，都可以用百分比来表示。
之后我又在其他浏览器里测试了一下兼容性，虽然这种百分比单位的方式在PC端用的不是很普遍。
只有IE6下出现了问题。 ie6下marginTop的距离是不对的 IE6效果如下
但是在chrome，IE 7 8 9 10 ，FireFox浏览器上都表现良好
margin、padding单位百分比的更多相关文章
- css之margin,padding的百分比
注意:上下内边距与左右内边距一致:即上下内边距的百分数会相对于父元素宽度设置,而不是相对于高度. PS:而且是基于父元素内容的宽度(width属性的大小),不是基于父元素整个框架的宽度
- 移动端网页巧用 margin和padding 的百分比实现自适应
一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素 ...
- 巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）
本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...
- 巧用margin/padding的百分比值实现高度自适应
原文:https://segmentfault.com/a/1190000004231995 一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padd ...
- 关于margin padding
margin padding设置百分比是以父元素的宽度作参考. 定位的left,top等取百分比 则以参照定位元素的padding+width做参考 margin 四个同时设定 以margin-lef ...
- css之margin && padding讲解
margin && padding盒子模型: margin是模块与模块的空隙,padding是内容与边框的空隙 注: 1.margin:边缘.空白 2.padding:填充 margi ...
- margin/padding百分比值的计算
1.百分比介绍 一般元素的宽度用百分比值表示时,元素的总宽度包括外边距取决于父元素的width,这样可能得到"流式"页面,即元素的外边距会扩大或缩小以适应父元素的实际大小.如果对这 ...
- css007 margin padding border
css007 margin padding border 1.理解盒模型(盒模型:就是把一些东西,包括html各种标签都包含在一个 看不见的盒子里) 1/在web浏览器中任何标签都是一个盒子,内容的周 ...
- 总结那些有默认margin,padding值的html标签
一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16, ...
随机推荐
- “华尔街之狼”：ICO是“史上最大骗局”
勘探船进村的那个夏季,父亲从城里带回了那把手电.手电的金属外壳镀了镍,看上去和摸起来一样冰凉.父亲进城以前采了两筐枸杞子,他用它们换回了那把锃亮的东西.父亲一个人哼着<十八摸>上路,鲜红透 ...
- Linux 快捷键汇总（偏基础）
自己最近才搭上Linux末班车,有一种想见恨晚的感觉,完全给你一种快速清爽的感觉! 因为需要,所以学习,记录自己在使用Linux系统上的点滴,偏基础! 1. 打开终端: Ctrl+Alt+T 2. 复 ...
- Tirp（状压DP）
Description 有一个N*N的迷宫,其中有一些宝藏,现在,小A要从入口(1,1)出发,到达出口(N,N),每次,小A只能从当前的格子走到上下左右四个格子,为了不空手而归,小A决定要拿到所以的宝 ...
- Java 获取SQL查询语句结果
step1:构造连接Class.forName("com.mysql.jdbc.Driver"); Connection con = DriverManager.getConnec ...
- Visual Studio插件Resharper 2016.1 及以上版本激活方法【亲测有效】
1.破解补丁下载:https://flydoos.ctfile.com/fs/y80153828783.下载下来解压之后的文件如下: 2.打开文件夹“IntelliJIDEALicenseServer ...
- 关于docker使用的几个小问题（一）
由于刚接触docker踩了几个坑,希望本文对网瘾少年有所帮助. Docker分CE版(社区版)和EE版(商用版),具体安装流程参考文档介绍,在此不再赘述.下面分Windows和Linux分别踩坑: 一 ...
- Building Block
Building Block Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...
- Circle
Circle Memory Limit: 32768KB 64bit IO Format: %lld & %llu Status Description Your task is so ...
- 剖析Linux系统调用的执行路径
在什么是操作系统这篇文章中,介绍过操作系统像是一个代理一样,为我们去管理计算机的众多硬件,我们需要计算机的一些计算服务.数据管理的服务,都由操作系统提供接口来完成.这样做的好处是让一般的计算机使用者不 ...
- Web前端性能优化全攻略[转载]
1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 作为第一条,可能也是最重要的一条.根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最 ...