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

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. 子结点childNodes

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  2. Intel Chipsets

    http://en.wikipedia.org/wiki/Chipset Chipset From Wikipedia, the free encyclopedia     A chipset is ...

  3. HDU 2108 Shape of HDU (判断是不是凸多边形 叉乘)

    Shape of HDU Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  4. Linux和Windows设备驱动架构比较

    毕业后一直在学操作系统, 有时候觉得什么都懂了,有时候又觉得好像什么都不懂,但总体来说自认为对操作系统实现机制的了解比周围的人还是要多一些.去年曾花了几个星期的晚上时间断断续续翻译了这篇对Linux和 ...

  5. CSS transform旋转问题

    我们都知道css的transform可以让旋转多少角度:transform:rotate(90deg),但是设置后只能旋转一次,如何想让它一直旋转下去怎么办?一种是使用matrix属性获取当前tran ...

  6. 设计模式学习笔记——Template Method模板方法模式

    可能是最简单的设计模式. 而且你我都用过而不自知. 因为,模板方法模式也者,就是面向对象中的继承.公用部分放在父类,子类继承父类,然后扩展.呵呵.

  7. Deep Learning 31: 不同版本的keras,对同样的代码,得到不同结果的原因总结

    一.疑问 这几天一直纠结于一个问题: 同样的代码,为什么在keras的0.3.3版本中,拟合得比较好,也没有过拟合,验证集准确率一直高于训练准确率. 但是在换到keras的1.2.0版本中的时候,就过 ...

  8. 20170223 遇到自建表里面相同key值数据不唯一

     我怎么发现这个表里 key值相同数据不唯一, 这两条看起来是完全相同的, 其实排序不能能合并已经说明问题.

  9. Unity3D集成腾讯语音GVoice SDK

    友情提示:最近发现腾讯GVoice有另一个官网,叫做腾讯游戏服务,经过对比发现这个网站才是最新的,下面我介绍的那个估计是已经废弃的,但不知道为啥老的网站没有直接链接到新网址而是仍然保留了.不过新官网的 ...

  10. vue实现单选多选反选全选全不选

    单选 当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选 <li v-for="(item,index) in radi ...