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

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. cocos2dx 3.0打包android遇到的错误(持续更新)

    1.编译时遇到找不到文件的错误:比如fatal error: cocos-ext.h: No such file or directory    , fatal error: CocosGUI.h: ...

  2. Intel graphics processing units

    http://en.wikipedia.org/wiki/Comparison_of_Intel_graphics_processing_units Comparison of Intel graph ...

  3. Umbrella Header for Module Bolts does not include header 'XXXXXX.h'?

    在我们引入第三方Framwork时.有时会出现如标题的警告提示? 怎样解决? Framework 将在下面文件夹下创建一个Module/,并创建一个module.modulemap文件 waterma ...

  4. backtrace、backtrace_symbols、backtrace_symbols_fd-support for application self-debugging

    backtrace是库函数引入的应用自调试函数. 系列里的三个函数可以缓冲或输出栈帧. #include <execinfo.h> int backtrace(void **buffer, ...

  5. Appium basic UI check cases_from sample

    @Test public void testUIComputation() throws Exception { // populate text fields with values populat ...

  6. Axure Base 02

    (二)Axure rp的线框图元件 l  图片 图片元件拖入编辑区后,可以通过双击选择本地磁盘中的图片,将图片载入到编辑区,axure会自动提示将大图片进行优化,以避免原型文件过大:选择图片时可以选择 ...

  7. SVN地址正确,能在网页打开,但是检出失败解决方法

    TortoiseSVN缓存问题 右键点击TortoiseSVN -> Settings -> Saved Data, 点击个个“Clear”按钮,把本地缓存都清除了,点击“确定”: 再重新 ...

  8. 蓝牙协议(bluetooth spec)

    1.概述:   蓝牙协议规范遵循开放系统互连参考模型(OSI/RM),从低到高地定义了蓝牙协议堆栈的各个层次. SIG(Session Initiation Protocol)所定义的蓝牙技术规范的目 ...

  9. Python之如果添加扩展包

    1.首先下载好你需要的扩展包 下载地址是http://www.lfd.uci.edu/~gohlke/pythonlibs/ 2.将你下载好的.whl文件放在你的python文件夹中的Lib\site ...

  10. codeforces 437A. The Child and Homework 解题报告

    题目链接:http://codeforces.com/problemset/problem/437/A 题目意思:给出四个选项A.B.C.D选项的内容描述,要求选出符合以下条件的一项. (1)如果某个 ...