标签：exp 好的 破坏 visible 复选框 移动端 不同 应该 不兼容
水平padding会影响尺寸，垂直padding不影响尺寸，但是会影响背景颜色（占据空间变大）
使用这一特性，可以实现高度可控的分割线
/*使用inline padding实现 注册 | 退出登录 */ <!--------------HTML代码--------------> 注册<span></span>登录 <!--------------CSS代码--------------> span{ padding:16px 6px 1px; margin-left:12px; border-left:2px solid; font-size:0; }
1、padding不支持任何形式的负值
2、padding百分比相对于宽度计算
/* block元素实现移动端屏幕题图占一半 */ <div class="container"> <div class="example"> <h2>padding..</h2> <h3>margin...</h3> </div> </div>
<!---------------CSS代码--------------->
.container { padding:50%; //使图片占据移动端屏幕的一半，不用计算各种移动端设备的宽和高 background: url(exp.jpg); background-size: 100%; position:relatvie; } .example { position:absolute; top:0; right:0; bottom:0; left:0; }//文字充满整个屏幕显示
3、inline水平元素的padding百分比值
.同样相对于宽度计算
。默认的高度宽度细节有差异
。padding会断行
inline就算是空白元素，padding高和宽也不想等
是因为：inline元素的垂直padding会让“幽灵空白节点”显现，也就是规范中的"strut"出现。
1、ol/ul列表
i.ol/ul元素内置padding-left，但是单位是px而不是em；
ii.所以如果字号很小/很大，间距就会很开 （平时开发font-size:是12/14，padding-left:22/25px相对合适）
2、所有浏览器input/textarea输入框内置padding
3、所有浏览器botton按钮内置padding
4、所有浏览器radio/checkbox单复选框无内置padding
5、button按钮元素的padding最难控制!
在不同浏览器上使用不同的padding
i.chrome浏览器 padding:0;即可以
ii.FireFox浏览器设置padding:0 左右依然有padding! 可以设置 button:-moz-focus-inner{padding:0;}
iii.IE浏览器下 按钮文字越多，左右padding逐渐变大 button{overflow:visible;}
！！！更好的是利用<label>标签模拟按钮，但是有时需要button提交，所以，利用<button>的可用性并可访问性隐藏
<button id="btn"></button> <label for="btn">按钮</label> label{ display:inline-block; line-height:20px; padding:1px; } #btn{ z-inde:-1;//藏在背景色之下 } 或者#btn{ absolute:-999em;//藏在屏幕之外}
1、使用百分比单位构建固定比例布局结构
2、配合margin实现等高布局
3、实现两栏自适应布局
/* padding设置在容器上*/ <div class="pbox"> <img src="abc.jpg">本例子实现的是，图片宽度固定，然后后面的文字自适应的效果。原理如下： 容器有个固定的padding-lfet值，此时图文应该在120px处显示，但是，由于图片margin负值浮动（或者绝对定位）到容器左上角，因此，文字.../> </div> <!------------------CSS代码----------------> .pbox{ padding-left:120px;//图文距离容器边缘120px处显示 } .pbox img{ float:left;//让文字浮动，所以不占据空间; margin-left:-120px;//图片与文字之间的距离 }
/* padding在子元素上 */ <div> <img src="abc.jpg"> <div class="auto">本例子实现的是，图片宽度固定，然后后面文字信息自适应的效果。
原理如下:两栏元素均有自己的标签，其中文字栏有个固定的padding-left值，此时文字应该在距离容器120像素处显示，但是，由于图片浮动，不在流中，所以文字。。。</div> </div> <!----------------------------CSS代码-----------------> img{ float:left;//破坏了容器 } .auto{ padding-left:120px;//设置padding值，使其距离容器边缘120px显示； }
标签：exp 好的 破坏 visible 复选框 移动端 不同 应该 不兼容
原文地址：http://www.cnblogs.com/siestakc/p/6485886.html
