前段时间在慕课 "闲逛" 的时候, 突然看到了张鑫旭老师所写的 CSS 小技巧."我勒个擦!" 全身被突然而来的洪荒之力打的只剩下一片树叶了....
浏览器支持
所有浏览器都支持 padding 属性.
注释: 任何的版本的 Internet Explorer (包括 IE8) 都不支持属性值 "inherit".
定义和用法
padding 简写属性在一个声明中设置所有内边距属性.
说明
这个简写属性设置元素所有内边距的宽度, 或者设置各边上内边距的宽度. 行内非替换元素上设置的内边距不会影响行高计算; 因此, 如果一个元素既有内边距又有背景, 从视觉上看可能会延伸到其他行, 有可能还会与其他内容重叠. 元素的背景会延伸穿过内边距. 不允许指定负边距值.
注释: 不允许使用负值.(以上来自 w3school)
padding 变化是否会影响容器的尺寸
1. 对于 block 元素
如果宽度非 auto 那么容器会变大, 如果容器宽度自适应或者设置了 box-sizing:border-box, 并且值在可控区间内是不会影响内容宽度的, 如果值暴走那么容器肯定会变化.
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>DEMO</title>
- <style>
- *{padding: 0;margin: 0;}
- .test {width: 300px;background: blue;box-sizing: border-box;padding:0 300px;}
- .test2 {width: 300px;background: yellow;}
- </style>
- </head>
- <body>
- <div class="test"> 文字在那里 </div>
- <br><br>
- <div class="test2"> 文字在那里 </div>
- </body>
- </html>
上面的代码运行说明了当 padding 值暴走的时候里面的文本只按照最小的单个字体作为一行 content 区域的宽度已经被充没了.
2. 对于内联元素
内联元素的 padding 只会影响左右尺寸, 上下尺寸不影响但是背景色会显现, 当上下值暴走的时候会影响外容器的高度.
利用这一特性我们可以做类似于: 注册 | 登陆 这种中间的间隔线
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>DEMO</title>
- <style>
- *{padding: 0;margin: 0;}
- span {padding: 12px 4px 2px;margin-left: 8px;border-left:2px solid;font-size:0;}
- </style>
- </head>
- <body>
- 注册 < span></span > 登陆
- </body>
- </html>
padding 百分比值的特殊用法
从 W3C 标准中我们可以看到他是这么描述的: 规定基于父元素的宽度的百分比的内边距. 注意这里是基于父元素的宽度.
对于移动端来说我们考虑响应式的时候可以做一个正方行或者固定比例的区域用于填充背景.
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>DEMO</title>
- <style>
- *{padding: 0;margin: 0;}
- .test {width: 500px;margin: auto;}
- .test div {padding: 50%;background: blue;}
- </style>
- </head>
- <body>
- <div class="test">
- <div></div>
- </div>
- </body>
- </html>
padding 绘制小图标
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>DEMO</title>
- <style>
- *{padding: 0;margin: 0;}
- .icon1 {width: 50px;height: 50px;border-radius: 50%;padding: 10px;border: 10px solid #000;background: #000;background-clip: content-box;float: left;}
- .icon2 {width: 50px;height: 10px;padding: 10px 0;border-top: 10px solid #000;border-bottom: 10px solid #000;background: #000;background-clip: content-box;float: left;margin:20px 20px;}
- </style>
- </head>
- <body>
- <div class="icon1"></div>
- <div class="icon2"></div>
- </body>
- </html>
当然 padding 的用法肯定还有很多, 像什么三栏两栏或者等比例自适应布局等等. 这些都是大家常用的方法我就不单个列举了. 视频里还提到了 label 标签 for 属性的用法, 有兴趣的同学可以去研究一下.
来源: http://www.qdfuns.com/article/23515/bb35f0f7f57c1cda17dfbd3a0870aed8.html