css padding和margin的百分比
前段时间我同事对于margin和padding应用百分比值似乎有些误解，觉得可能是个普遍问题，所以觉得有必要拿出来单独写一下。
margin和padding都可以使用百分比值的，但有一点可能和通常的想法不同，就是 margin-top | margin-bottom | padding-top | padding-bottom 的百分比值参照的不是容器的高度，而是宽度 。
引用标准(2.1)原来的表达：
The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
宽度参照宽度这点毫无疑问，但高度参照的也是宽度这点，可能就和通常的思路相左，因为毕竟height应用百分比参照的，依然是容器的高度。
关于为什么标准要这么定义，有几种通常的解释，就一并(个人)分析一下。由于padding和margin类似，下文就只以padding-top为例。
第一种说法是，padding-top如果以容器高度为参照，那么子元素应用padding值将会继续加高容器的高度，容器高度的变化又会反过来继续影响子元素的padding-top，陷入一个无限循环。
对于不定高的容器来说情况确实如此，但对定高容器则并不成立，这点和height类似，这也是为什么height的容器也必须确定好高度。也就是说，如果padding-top要参照容器高度，就必须和height一样做两种处理。
第二种说法则更为可靠， 为了保持padding(margin)四个值的一统一 。
padding(margin)的值无论引用何种计量，四个值都一直保持统一，难道单独给百分比开特例？结合第一条的多情况处理，如果标准定义padding-top参照容器高度的话，恐怕要列出至少4条以上的例外说明——而这对无论谁，都没有好处:)
事实上，垂直padding参照体是宽度这点也非常有用。虽然早期固化像素的设计中百分比值几乎不应用在padding或者margin上，但随着移动自 适应的布局的需要，百分比也逐渐稀疏平常。比如配合background-sizing保持背景的比例，配合media query调整对应的间距，不一而足。这些应用都基于一个事实： 无论垂直还是水平，百分比值始终参考宽度 。
而宽度，实际上，正是自适应和现代web设计的灵魂。
css padding和margin的百分比的更多相关文章
- 【转】图解CSS padding、margin、border属性
http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(b ...
- CSS笔记——padding，margin为百分比计算时的参照对象
div的padding为百分比的两种情况 padding-top,padding-bottom,margin-top,margin-bottom是百分比时是按照当前元素的父级元素的宽度来计算的 1. ...
- CSS padding margin border属性详解
图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...
- CSS中的margin、border、padding区别
CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来 ...
- CSS padding margin border属性详解【转载】
本文转载自:http://www.cnblogs.com/linjiqin/p/3556497.html ,感谢相关博主. 图解CSS padding.margin.border属性 W3C组织建议把 ...
- 转-CSS padding margin border属性详解
原文链接:http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在 ...
- [html]CSS中的margin、border、padding区别
图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...
- css中padding与margin
CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来 ...
- CSS中padding、margin、bordor属性详解
一.图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以 ...
随机推荐
- TextureView+SurfaceTexture+OpenGL ES来播放视频（三）
引自:http://www.jianshu.com/p/291ff6ddc164 做好的Demo截图 opengl-video 前言 讲了这么多,可能有人要问了,播放视频用个android封装的Vid ...
- Local declaration of 'XXX' hides instance variable
今天调试程序遇到这么一个警告! Local declaration of 'XXX' hides instance variable 遇到这种原因,是因为本地变量跟函数参数变量同名.改变其一即可.
- Java的引用c++的引用和C指针的区别
Java的引用本质上就是C中的指针,而c++的引用则完全不同:有一个类 class Point { int x; int y;} 同样的一个Point p; 在Java中p表示一个引用,它等同于C语言 ...
- 实测switch支持的参数类型
@Test public void testSwitch() { switch (2) { case 1: System.out.println("int型:" + 1); bre ...
- 在Android studio中进行NDK开发
在Android studio中进行NDK开发 分类: Android平台 软硬件环境 ubuntu kylin 14.04 红米note增强版 Android studio 0.8.6 ndk ...
- World Finals 2003 UVA - 1025 A Spy in the Metro（动态规划）
分析:时间是一个天然的序,这个题目中应该决策的只有时间和车站,使用dp[i][j]表示到达i时间,j车站在地上已经等待的最小时间,决策方式有三种,第一种:等待一秒钟转移到dp[i+1][j]的状态,代 ...
- python socket编程---从使用Python开发一个Socket示例说到开发者的思维和习惯问题
今天主要说的是一个开发者的思维和习惯问题. 思维包括编程的思维和解决一个具体问题的分析思维,分析思路,分析方法,甚至是分析工具. 无论是好习惯还是不好的习惯,都是在者一天一天的思维中形成的.那些不好的 ...
- HDU 2546 饭卡 01背包变形
题目大意:中文题就不多说了 题目思路:由题意可知,只要高于5元,就可以随便刷,那我们就把最贵的留在最后刷.但是如果低于5元就什么也不能刷(哪怕你要买的物品价格不足五元),所以我们可以先求出(n-5)元 ...
- article标签
<html><head lang="en"> <meta charset="UTF-8"> <title>富士康 ...
- DataSet和List<T> 泛型之间互相转换 (转载, 作者写的很好)
/DataSet与泛型集合间的互相转换 //利用反射机制将DataTable的字段与自定义类型的公开属性互相赋值. //注意:从DataSet到IList<T>的转换,自定义类型的公开属性 ...