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

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. leetcode第一刷_Best Time to Buy and Sell Stock III

    这道题还是挺难的,属于我前面提到的,给个数组,线性时间找出个什么东西,尽管上面的两个买卖股票也是这类.只是相比之下稚嫩多了.有关至少至多的问题比較烦人,不好想,等再做一些题,可能会发现什么规律.这道题 ...

  3. 【iOS开源码】(1):CCLHTTPServer

    我从没有见过比 CCLHTTPServer 更简单的 iOS HTTP server了.你甚至不用创建不论什么子类就可以使用它.对于大部分任务,这个小巧但强悍的server能够满足你的须要. 它简单到 ...

  4. Python基础——数据类型、流程控制、常用函数

    Python tutorial :Python网站上的对 Python 语言和系统的基本概念和功能进行的非正式的介绍. 在学习Python之前,我们需要学会在各个平台配置Python的运行环境,下文中 ...

  5. 信雅达面试题atoi函数实现

    atoi函数: 功 能: 把字符串转换成整型数. 名字来源:ASCII to integer 的缩写. 原型: int atoi(const char *nptr); 函数说明 参数nptr字符串,如 ...

  6. 项目问题总结2:GUID区分大写和小写吗?

    问题描写叙述: 近期在做项目的过程中,遇到一个问题,将从基础系统查询出来的课程ID作为參数去考评系统里查询考试信息,却什么也查不出来,调试了半天不知道什么原因. 问题分析: 静下心来思考一下,能够肯定 ...

  7. 正则_action

    http://wiki.ubuntu.org.cn/index.php?title=Python%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E6%93% ...

  8. Delphi通过Get获取来自PHP的返回值

    Delphi代码 unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Contro ...

  9. EasyUI+Python-flask实现CRUD应用

    1.需求分析 需求:应用easyui制作前端表格数据显示,flask制作后端路由 环境搭建略 2.easyui前端实现 2.1 easyui是前端实用的一个框架,这里我们要实现的是easyui的CRU ...

  10. POJ1077 Eight —— 反向BFS

    主页面:http://www.cnblogs.com/DOLFAMINGO/p/7538588.html 代码一:以数组充当队列,利用结构体中的pre追溯上一个状态在数组(队列)中的下标: #incl ...