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, ...
随机推荐
- 接口测试思路，jmeter，接口测试流程
接口测试总结 一:接口测试思想 接口测试:通过向服务器端发送请求,获取响应与预期结果做对比的一种服务端黑盒测试过程. 解释:接口就是将浏览器,客户端,手机端,或者服务器调用另一个服务器的请求抽离出来测 ...
- Loadrunner Http接口Get/Post方法性能测试脚本解析
最近使用LoadRunner 11进行了一次完整的Http WEB接口性能测试,下面介绍下Http接口Get/Post方法性能测试脚本通用编写方法. 1. Http接口性能测试基本流程 首先定义了一个 ...
- Mybatis基本用法--下
Mybatis基本用法--下 第七部分 mybatis-spring-boot-starter 官网:http://www.mybatis.org/spring-boot-starter/mybati ...
- Spring Bean装配方式
Spring装配机制 在xml中进行显示配置 在Java中进行显示配置 隐式bean发现机制和自动装配 自动化装配bean 组件扫描(component scanning),Spring会自动发现应用 ...
- R语言进行机器学习方法及实例（一）
版权声明:本文为博主原创文章,转载请注明出处 机器学习的研究领域是发明计算机算法,把数据转变为智能行为.机器学习和数据挖掘的区别可能是机器学习侧重于执行一个已知的任务,而数据发掘是在大数据中寻找有 ...
- js获取本地ip和地区
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 微信小程序左滑删除功能
效果图如下: wxml代码: <view class="container"> <view class="touch-item {{item.isTou ...
- 基于Lua脚本解决实时数据处理流程中的关键问题
摘要 在处理实时数据的过程中需要缓存的参与,由于在更新实时数据时并发处理的特点,因此在更新实时数据时经常产生新老数据相互覆盖的情况,针对这个情况调查了Redis事务和Lua脚本后,发现Redis事务并 ...
- python抓去网页一部分
import sys, urllib2 headers = {'User-Agent':'Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9. ...
- Python基础学习参考（三）:内置函数
一:内置函数 在第一篇文章中,我们简单的认识了一下print()函数和input()函数,也就是输入和输出,这些函数我们可以直接的调用,不要自己定义或者引入什么,对吧?想这样的函数就叫做内置函数.这里 ...