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, ...
随机推荐
- MySQL事务与锁
MySQL事务与锁 锁的基本概念 锁是计算机协调多个进程或线程并发访问某一资源的机制. 相对其他数据库而言,MySQL的锁机制比较简单,其最显著的特点是不同的存储引擎支持不同的锁机制.比如,MyISA ...
- iOS下OpenCV开发用OC还是Swift
本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃 其实标题中这个问题并不准确,准确的说法应该是iOS下的OpenCV开发是使用OC还是Swift ...
- Java基础笔记11
异常: 即java程序在运行时出现的意外情况. java如何处理异常. try{ //可能发生异常的地方 }catch(异常类型 对象){ //异常处理处 }catch(异常类型 对象){ }.. ...
- sqoop1.4.6导出oracle实例
1.导入odbj6.jar到$SQOOP_HOME/lib目录下. 2.sqoop import --append --connect jdbc:oracle:thin:@219.216.110.12 ...
- C++ regex库的三种正则表达式操作
关于正则表达式的语法和字符含义,网上已经有很不错的博客教学,我当初参考的是 读懂正则表达式就这么简单 - Zery - 博客(http://www.cnblogs.com/zery/p/3438845 ...
- 原生JS实现Ajax及Ajax的跨域请求
前 言 如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...
- C++ 设计模式 依赖倒置原则 简单示例
C++ 设计模式 依赖倒置原则 简单示例 /** * 依赖倒置原则(Dependency Inversion Principle) * 依赖于抽象(接口),不要依赖具体的实现(类),也就是针对接口编程 ...
- seajs源码
/*** Sea.js 3.0.0 | seajs.org/LICENSE.md 中文注释由 李祥威 添加,为个人对细节的理解,官方解释很详细的地方就不说了 难免有错漏,联系我: chuangweil ...
- 验证Oracle处理速度
(这是2009年写的东西了,在网上看到有人对数据库批量操作的'速度'比较关注,于是就把这篇老文章整理了一下) 一.环境及前提 在244上(一台稍好一些的机器,做了RAID,机械硬盘,Raid几忘了), ...
- apply和call的区别
每一个javascript中的Function对象都有一个apply()方法和call()方法,他们的基本用法为: /*apply()方法*/ function.apply(thisObj[, arg ...