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

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. mvc5新特性RouteAttribute特征路由

    mvc5新特性RouteAttribute特征路由,本文讲述如何开启mvc5的RouteAttribute路由功能并附上一个实例说明RouteAttribute是怎么工作的 mvc5新特性RouteA ...

  2. PHP读取excel(6)

    有时候我们只需要读取某些指定sheet,具体代码如下: <?php header("Content-Type:text/html;charset=utf-8"); //引入读 ...

  3. break 用法

    // break 在循环中的功能测试 # include <stdio.h> int main(void){ int i, j; for (i = 0; i<3; ++i) {  j ...

  4. linux 文件记录锁详解

    一: linux记录锁更恰当的称呼应该是范围锁,它是对文件某个范围的锁定. 关于记录锁的功能就是fcntl提供的第五个功能,具体使用如下: int fcntl(int fd, int cmd, str ...

  5. 【学生信息管理系统】EOF 和 BOF

    敲完学生信息管理系统时,在删除信息的时候,常常会出现下图这种错误,遇到问题就要解决这个问题.经过查阅理解了记录集Recordset的EOF和BOF属性,用这两个属性能够知道记录集中是否有信息存在. E ...

  6. 利用PHP判断iPhone、iPad、Android、PC设备

    首页那张大图确实是一个比较头疼的问题 在PC上显示是没问题的,可是到手机上就会超出页面一大截,如果做自适应,图片会被强制压缩 无奈只能用wp_is_mobile()函数在手机上隐藏了这张图,可是这函数 ...

  7. Hadoop每日一讨论整理版

    这是我在几个QQ群发起的Hadoop每日一讨论小活动,每天中午2点左右发出一个关于Hadoop的知识片段,在此做一个整理. [每日一讨论]之计算框架(2013-5-21) 就计算框架而言,Hadoop ...

  8. HDOJ--1869--六度分离(用三种算法写的,希望能比較出来他们之间的差别)

    六度分离 Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  9. 2016/06/09 ThinkPHP3.2.3使用分页

    效果图:

  10. UIPageControll 的属性和用法

    UIPageControll 是继承于UIControl的一个IOS系统UI控件,可以提供给开发者设计分页效果的功能. 初始化方法 UIPageControl * page = [[UIPageCon ...