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, ...
随机推荐
- 制作Windows服务项目详细攻略
1.在windows服务下面获得根目录: string assemblyFilePath = Assembly.GetExecutingAssembly().Location; string asse ...
- SpringMVC + Spring + Mybatis+ Redis +shiro以及MyBatis学习
SpringMVC + Spring + Mybatis+ Redis +shiro http://www.sojson.com/shiro MyBatis简介与配置MyBatis+Spring+My ...
- 关于EF Code First模式不同建模方式对建表产生的影响
今天在学EF Code First模式的时候,发现几个很有趣的问题,问题如下: 1.当编写玩实体后,不指定任何主键约束,EF会找长的最像Id的,然后设置其为主键,验证代码如下: //User类 cla ...
- C 返回函数与闭包的考虑
#include <stdio.h> typedef int (*fun)(); fun closure(int i) { int squ() { return i*i; } return ...
- 树莓派.安装系统+Node.js+MongoDB系列环境
1.先去树莓派官网下载最新的ROM https://www.raspberrypi.org/downloads/raspbian/ 这里选的是: RASPBIAN JESSIE WITH DESKTO ...
- LeetCode 216. Combination Sum III （组合的和之三）
Find all possible combinations of k numbers that add up to a number n, given that only numbers from ...
- .xlsx文件总是默认用2007 Microsoft Office component 打开，且无法更改用EXCEL打开的解决方法
之前装了OFFICE2003,后来改装了 OFFICE2007,之后XLSX文件双击总是用2007 Microsoft Office component 打开,导致无法打开. 解决方法: 打开注册表R ...
- 数据分析与展示——NumPy库入门
这是我学习北京理工大学嵩天老师的<Python数据分析与展示>课程的笔记.嵩老师的课程重点突出.层次分明,在这里特别感谢嵩老师的精彩讲解. NumPy库入门 数据的维度 维度是一组数据的组 ...
- ajax+php(环境搭建+测试)
在学习JavaScript,jQuery的ajax部分的时候,一直不明白要如何进行,不知道服务器要怎么弄,什么都不知道,当初在学ajax的时候,除了看一下ajax的内容,实践极少,因为,不知道要怎么做 ...
- Paint the Grid Reloaded（缩点，DFS+BFS）
Leo has a grid with N rows and M columns. All cells are painted with either black or white initially ...