标签：padding play text str 不兼容 计算 focus 默认 额外
padding 中规中矩，性格温婉平和！
CSS padding与容器的尺寸关系复杂
对于block水平元素 没有padding的时候 .gay{width:50cm;} padding影响元素尺寸 （理解为人身体的脂肪，人和人之间的距离）.gay{width:20cm;padding:0 12px;}
但是width:auto或box-sizing为border-box的时候 .gay{width:80cm;box-sizing:border-box;padding:0 15px;}
.text{width:8cm;box-sizing:border-box;padding:0 1.5cm;}这个时候padding不会影响元素尺寸，但是当padding大小超过宽高的时候，.text{width:8cm;box-sizing:border-box;padding:0 8cm; }这时候元素按内联元素最小宽度显示，此时padding同样影响了元素的尺寸。
结论：对于block水平元素
1.padding值暴走，一定会影响尺寸；
2.width：auto，padding影响尺寸；
3.width为auto或box-sizing为border-box，同时padding值没有暴走，不影响尺寸。
对于inline水平元素
水平padding影响尺寸，垂直padding不影响尺寸 .leader{padding:50px},但是会影响背景色（占据空间）。大到比父元素还大的时候，设置overflow：auto会出现滚动条
如何利用这一特性
高度可控的分割线
1.直接使用字符：注册|退出登录
2.inline-block控制：注册|退出登录
3.使用inline padding：注册|退出登录
注册<span></span>退出登录
span{padding:16px 6px 1px;margin-left:12px;border-left:2px solid font-size:0;}
1.关于padding的负值，padding不支持任何形式的负值。
2.关于百分比均是相对与宽度计算的。
如何实现这一特性，轻松实现一个正方形 div:padding:50%(相对百分比计算)
真实案例
<div class="container">
<div class="example">
<h2>你的指尖</h2>
<h4>慕课网</h4>
</div>
</div>
.container{padding:50%;background:url(exp.jpg);background-size:100%;position:relative;} .example{position:absolute;top:0;right:0;bottom:0;left:0;}实现一个正方形的响应式布局。
3.inline水平元素的padding百分比值
1.同样相对于宽度计算
2.默认的高度宽度细节有差异
3.padding会断行
inline元素的padding断行
span{padding:50%;}
<span syle="padding:50%;">内有文字若干</span>
如果是空的inline元素，高度还是要比宽度高
设置fon-size:0px；得到一个正方形。
为何会有额外的高度
inline元素的的那个会让“幽灵空白节点”显现，也就是规范中的strut出现。content-area，可以通过font-size:0px;让他不显示。
1.ol/ul列表
1.1 ol/li元素内置padding-left，但是单位是px不是em;
1.2 例如chrome浏览器下是40px;
1.3 如果字号很小，间距就会很开；
1.4 如果字号很大，序号回爬到容器外面
margin等一般em的。
2.表单元素的内置padding值
所有的浏览器input/textarea输入框内置padding
所有浏览器button按钮内置padding
部分浏览器select下拉内置padding，如firefox ie8+可以设置padding
所有浏览器radio/checkbox单选框无内置padding
button按钮元素的按钮是最难控制的。
1.chrome浏览器是没有问题的。
2.firefox浏览器 设置padding:0左右依然有padding！ 需要设置button::-moz-focus-inner{padding:0;}padding才为0
3.IE浏览器 ie7文字越多，左右padding逐渐变宽。设置overflow:hidden以后就正常了。
4.padding与高度计算的不兼容
button{
line-height:20px;
padding:10px;
border:none;
}
IE7 45px;
IE8 40px;
FireFox 42px;
Chrome: 40px;
button表单按钮padding
<button id="btn"></button>
<label for="btn">按钮</label>
label{display:inline-block;inline-height:20px;padding:10px;}
让button可见性隐藏。
实现3道杠——不借助伪元素，只用一个div
实现示意
<div class="line-tri"></div>
.line-tri{
width:150px;height:30px;
padding:15px 0;
border-top:30px solid;
border-bottom:30px solid;
background-color:currentcolor;
background-clip:content-box;
}
实现一个点
<div class="eye"></div>
.eye{
width:150px;
height:150px;
padding:10px;
border:10px solid;
border-radius:50%;
background-color:currentcolor;
background-clip:content-box;
}
1.使用百分比单位构建比较固定比例布局结构
移动端1:1头图布局
div{padding:50%;}
2.配合margin实现等高布局。
.box{overflow:hidden;resize:vertical;}
.child-orange,.child-green{
margin-buttom:-600px;
padding-bottom:600px;
}
.child-orange{
float:left;
background:orange;
}
.child-green{
float:left;
background:green;
}
3.padding实现两栏自适应布局
<div class="pbox">
<img src="mm.jpg" />
<div class="auto">
本例子实现。。。。
</div>
</div>
img{float:left;}
.auto{
padding-left:120px;
}
标签：padding play text str 不兼容 计算 focus 默认 额外
原文地址：http://www.cnblogs.com/zhongke/p/6597388.html
