年前做了一个测试题 https://www.wenjuan.com/s/VjaEva/，里面有一道题目涉及到了margin和padding单位为百分比的情况。写出来记录一下以防止自己忘记。

　　

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style type="text/css">
  7.          .warp{
  8.              width:500px;
  9.              height:300px;
  10.              overflow: hidden;
  11.              background-color: #279186;
  12.              position: relative;
  13.          }
  14.          .ctx{
  15.              padding:10%;
  16.              margin:10%;
  17.              width:100px;
  18.              height:50px;
  19.              background-color: #A56D1C;
  20.          }
  21.          .top{
  22.              position: absolute;
  23.              width: 100%;
  24.              top:50px;
  25.              left:0;
  26.              padding:0;
  27.              margin:0;
  28.              color:#333;
  29.              height:1px;
  30.              border:0 none;
  31.              background-color: #333;
  32.          }
  33.          .left{
  34.              position: absolute;
  35.              width:1px;
  36.              height:100%;
  37.              left:50px;
  38.              top:0;
  39.              background-color: #333;
  40.          }
  41.      </style>
  42.  </head>
  43.  <body>
  44.      <div class="warp">
  45.          <div class="ctx"></div>
  46.          <!-- 辅助线 -->
  47.          <hr class="top " />
  48.          <div class="left "></div>
  49.      </div>
  50.  </body>
  51.  </html>

在浏览器里表示为

可以见到，padding和margin的单位，都可以用百分比来表示。

之后我又在其他浏览器里测试了一下兼容性，虽然这种百分比单位的方式在PC端用的不是很普遍。

只有IE6下出现了问题。 ie6下marginTop的距离是不对的 IE6效果如下

但是在chrome，IE 7 8 9 10 ，FireFox浏览器上都表现良好

margin、padding单位百分比的更多相关文章

  1. css之margin,padding的百分比

    注意:上下内边距与左右内边距一致:即上下内边距的百分数会相对于父元素宽度设置,而不是相对于高度. PS:而且是基于父元素内容的宽度(width属性的大小),不是基于父元素整个框架的宽度

  2. 移动端网页巧用 margin和padding 的百分比实现自适应

    一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素 ...

  3. 巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）

    本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...

  4. 巧用margin/padding的百分比值实现高度自适应

    原文:https://segmentfault.com/a/1190000004231995 一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padd ...

  5. 关于margin padding

    margin padding设置百分比是以父元素的宽度作参考. 定位的left,top等取百分比 则以参照定位元素的padding+width做参考 margin 四个同时设定 以margin-lef ...

  6. css之margin && padding讲解

    margin && padding盒子模型: margin是模块与模块的空隙,padding是内容与边框的空隙 注: 1.margin:边缘.空白 2.padding:填充 margi ...

  7. margin/padding百分比值的计算

    1.百分比介绍 一般元素的宽度用百分比值表示时,元素的总宽度包括外边距取决于父元素的width,这样可能得到"流式"页面,即元素的外边距会扩大或缩小以适应父元素的实际大小.如果对这 ...

  8. css007 margin padding border

    css007 margin padding border 1.理解盒模型(盒模型:就是把一些东西,包括html各种标签都包含在一个 看不见的盒子里) 1/在web浏览器中任何标签都是一个盒子,内容的周 ...

  9. 总结那些有默认margin,padding值的html标签

    一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16, ...

随机推荐

  1. 基于Python实现matplotlib中动态更新图片(交互式绘图)

    最近在研究动态障碍物避障算法,在Python语言进行算法仿真时需要实时显示障碍物和运动物的当前位置和轨迹,利用Anaconda的Python打包集合,在Spyder中使用Python3.5语言和mat ...

  2. Javascript里的if判断与逻辑运算符(||, &&)和比较运算符的特别之处

    写JS时不可避免要用到 if 与 逻辑运算符( ||, &&). 如果你经常阅读Js的第三方组件源码, 会发现有一种写法作为初始化变量的方法经常出现. var variable = v ...

  3. 初学者易上手的SSH-hibernate03 三大状态与缓存

    这章主要来浅的学习下hibernate三大状态与缓存.首先来看下三大状态: 如上图,三大状态分别为临时状态(Transient),持久化状态(Persistent),游离状态(Detached).那么 ...

  4. UWP 磁贴设置

    一:需求 一款好看好用的应用,对于UWP来说,动态的磁贴必不可少. 二:TileUpdateManager类 和TileUpdater类 如果需要更改或更新应用的磁贴,那么首先需要获得TileUpda ...

  5. 借助csv用PHP生成excel文件

    当你将xml文件改为csv后缀会发现原先的表格结构都变成用逗号隔开的一行一行数据,就像这样 编号,姓名,年龄 001,王宇,28 002,刘三,20 由此看来,如果能将PHP数据输出为这样的格式,然后 ...

  6. Java语言实现机制

    Java语言实现机制 1.Java虚拟机(Java Virtual Machine) Java虚拟机(JVM)是在一台计算机上由软件模拟也可以用硬件来实现的假想的计算机.它定义了指令集(相当于中央处理 ...

  7. Leetcode题解（十一）

    31.Next Permutation 题目 这道题目的意思是给定一个序列,找出其按照字典顺序的下一个顺序,如果给定顺序是字典中的最后一个顺序,其下一个顺序则为字典中的第一个顺序.比如: 1,2,3, ...

  8. 5.volatile的应用

    volatile是轻量级的synchronized,它在多处理器开发中保证了共享变量的"可见性".可见性的意思是当一个线程修改一个共享变量时,另外一个线程能读到这个修改的值.如果v ...

  9. 深入分析Android动画（一）

    动画的分类: ①View动画 View动画顾名思义其作用对象为View,包含平移.缩放.旋转.透明,这四类变化分别对应着Animation的子类TranlateAnimation.ScaleAnima ...

  10. PaaS 调研:GAE与 AWS（上）

    欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:韩伟 起因 PaaS作为"云"的概念,已经流行了很久.从使用的角度上看,似乎就是:写一个PHP,然后可以直接传到服务 ...