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

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. 关于Text Kit 一些事

    1. Text Kit 是什么? 在iOS7中,苹果引入了Text Kit--Text Kit是一个高速而又现代化的文字排版和渲染引擎.Text Kit在UIKit framework中的定义了一些类 ...

  2. [网页游戏开发]容器的使用及自定义Tab,RadioGroup,List,ViewStack

    Morn里面,容器和其他普通组件不同,无需皮肤,所以也不能从组件树种拖动创建(Tab,RadioGroup例外),只能转换而来 Morn的容器组件主要有Box,Container,Panel,Tab, ...

  3. Anaconda和Pycharm安装和配置教程

    1.下载Anaconda2 (最好选Python2.7的,兼容性好点)             在官网下载:https://www.continuum.io/downloads 2.安装Pycharm ...

  4. 2016/05/25 抽象类与API(接口)差别

    简单来说, 接口是公开的,里面不能有私有的方法或变量,是用于让别人使用的,而抽象类是可以有私有方法或私有变量的, 另外,实现接口的一定要实现接口里定义的所有方法,而实现抽象类可以有选择地重写需要用到的 ...

  5. TC SRM 583 DIV 2

    做了俩,rating涨了80.第二个题是关于身份证的模拟题,写的时间比较长,但是我认真检查了... 第三个题是最短路,今天写了写,写的很繁琐,写的很多错. #include <cstring&g ...

  6. update外联表,用另一个表数据更新本表数据

    update s set s.classbid = lc.itemidfrom    dbo.Lv_servers as s INNER JOIN dbo.Lv_LineChannel as lc O ...

  7. SWT 安装

    下载地址: http://www.eclipse.org/windowbuilder/download.php 看到页面如下:选择图片标记的 3.7 (Indigo)  update site lin ...

  8. sql 简单查询修改

    .group by order by from webdb where gathtrime between '2017-06-14 00:00:00' and '2017-06-14 23:59:59 ...

  9. 一步一步学Silverlight 2系列(17):数据与通信之ADO.NET Data Services

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  10. js 模拟a标签打开新网页

      在这里备份一下,方便以后查找.   var el = document.createElement("a"); document.body.appendChild(el); e ...