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, ...
随机推荐
- kafka 的 createDirectStream
一入大数据深似海,脑袋不够用了,先留下只言片语. kafka api中给出2类直接获取流的接口:createStream和createDirectStream. createStream比较简单,只需 ...
- json解析eval()中文乱码问题的解决
只需要后台post请求中添加: resp.setContentType("text/html;charset=utf-8"); req.setCharacterEncoding(& ...
- LeetCode 66. Plus One（加1）
Given a non-negative integer represented as a non-empty array of digits, plus one to the integer. Yo ...
- module、export、require、import的使用
module 每个文件就是一个模块.文件内定义的变量.函数等等都是在自己的作用域内,都是自身所私有的,对其它文件不可见. 每个文件内部都有一个module对象,它包含以下属性 id: 模块的识别符,通 ...
- 【问题排查】fastjson线上排坑记
前言 版本上线时发现fastjson的toString方法的返回的字符串与与之前版本的toString方法返回的字符串不相同,这导致依赖toString进行md5计算所得到的结果不相同,更进一步导致其 ...
- [译]ASP.NET Core 2.0 路由引擎
问题 ASP.NET Core 2.0的路由引擎是如何工作的? 答案 创建一个空项目,为Startup类添加MVC服务和请求中间件: public void ConfigureServices(ISe ...
- Debug 运行正常，Release版本不能正常运行总结（转）
引言 如果在您的开发过程中遇到了常见的错误,或许您的Release版本不能正常运行而Debug版本运行无误,那么我推荐您阅读本文:因为并非如您想象的那样,Release版本可以保证您的应用程 ...
- IIS下自定义错误页面配置的两种方式（亲测可行）--IIS服务器
网站自定义错误页面的设置,大家应该都知道它的重要性……不多说,下面带大家一步步在IIS下设置网站自定义错误页面…… 1.首先进入你的网站主页,找到[错误页](注意是IIS下的错误页不是.NET错误页) ...
- WuKong
WuKong Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submis ...
- 暑假练习赛 007 E - Pairs
E - Pairs Description standard input/outputStatements In the secret book of ACM, it’s said: “Glory f ...