以下是自己学习过程中的总结,直接上结论:

1.margin/padding取值为百分比:

margin和padding四个方向上的取值为百分比都是参照父级元素的宽度来计算的。

2.margin取值为负值:
      比如 margin-top / right / bottom / left :  -100px; 为负值的情况讨论如下:

①:

②:若元素存在width:则正常:

比如 div { margin: 10px 2% -40px 0 } 表示该盒子顶边距为10px,右边距是父元素宽度的2%,下边距为-40px,左边距为0

3.padding取值为负值:padding不支持任何负值

关于margin和padding取值为百分比和负值的总结的更多相关文章

  1. 当margin和padding的值是百分比时,如何计算

    对元素的margin设置百分数时,百分数是相对于自身包含块的width计算(包含块传送门),不管是margin-top/margin-bottom还是margin-left/margin-right. ...

  2. 当padding/margin的取值形式为百分比时。。。。。

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

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

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

  4. css:margin和padding的百分之使用

    #app { position: fixed; width: 94%; height: 100%; background: pink; padding: 0px 3% 0px 3%;} 如上代码,最终 ...

  5. 网页CSS中*{margin:0; padding:0;}有什么用

    * 这东西叫“通配符”用来匹配页面上所有元素.*{margin:0; padding:0;} 像 2L 所说,body ,ul, li ,p,h1~h6,dd,dt 等……都有默认的margin 或p ...

  6. 关于网页布局中常见的margin: 0px ; padding: 0px; 总结

    我们在网页布局中常用到margin: 0px; padding: 0px;  但是在大型的网站布局中通常不这样写通常是按下面这种方式. ul, li, ol, dl, dt, dd, div, p, ...

  7. 使用盒子定位布局时margin和padding使用

    首先说的是区别: 如图所示,黄色padding,绿色margin,中间的content是内容,margin和padding的值是不计算在内容高宽的.这里补充的是在实际情况中边框宽度也是不计算在内的.这 ...

  8. 浅谈Margin和Padding值设置成百分数的布局

    转自:问说网http://www.uedsc.com/discussion-margin-and-padding-values.html Margin和Padding是我们在网页设计经常使用到的CSS ...

  9. HTML元素margin、padding的默认值

    HTML元素margin.padding的默认值 element margin(单位像素) padding html 0 0 body 8 0 div 0 0 h1 21 0 h2 19 0 19 0 ...

随机推荐

  1. 【转载】.NET Remoting学习笔记(二)激活方式

    目录 .NET Remoting学习笔记(一)概念 .NET Remoting学习笔记(二)激活方式 .NET Remoting学习笔记(三)信道 参考:百度百科 ♂风车车.Net 激活方式概念 在访 ...

  2. XML语法笔记

    XML(可扩展标记语言) XML的特点: XML是一种标记语言,适合跨平台.跨语种信息交互XML被用于存储.传输数据XML可扩展性良好,没有预定义标签,需要用户自定义标签XML具有自我描述性XML采用 ...

  3. Arrays.asList基本用法

    目录 说明 基本用法 陷阱 改观 说明 asList 是 java.util.Arrays 类的一个方法 public static <T> List<T> asList(T. ...

  4. VC 无边框对话框的任务栏右键菜单

    MFC ,基于对话框的程序,属性为:Border : none. 程序运行后,在任务栏里面点右键,不会弹出类似下面的菜单: 在对话框的OnInitDialog里面添加如下语句即可: ModifySty ...

  5. 设计模式学习笔记——Decorator装饰模式

    装饰模式的作用或动机就是,尽量避免继承,而使用关联.原因是层层继承下来,内容会越来越多,有失控的危险.就扩展性而言,用关联比用继承好.所谓的关联,A使用了B,就叫A关联了B. Component 抽象 ...

  6. 2016/06/16 phpexcel

      程序部分   require_once './phpexcel/PHPExcel.php';   // 首先创建一个新的对象  PHPExcel object $objPHPExcel = new ...

  7. fstab文件解析

    1 这个文件的用途 这个文件是启动时自动挂载指定的磁盘或者分区到系统目录下用的,提供给mount命令用. 2 文件解析 每一行是一次mount操作. 磁盘或者分区    挂载的目录     挂载的磁盘 ...

  8. Axure Base 10 动态面板滑动效果

    示例原型:http://pan.baidu.com/s/1mgjYahi 实现目标: 1.  点击登录滑出登录面板 2.  点击确定滑出动态面板 最终效果如下: 这种效果可以通过两种方法实现: 首先准 ...

  9. bzoj3462: DZY Loves Math II

    状态很差脑子不清醒了,柿子一直在推错.... ... 不难发现这个题实际上是一个完全背包 问题在于n太大了,相应的有质数的数量不会超过7个 假设要求sigema(1~plen)i pi*ci=n 的方 ...

  10. HDU2181 哈密顿绕行世界问题 —— DFS

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2181 哈密顿绕行世界问题 Time Limit: 3000/1000 MS (Java/Others) ...