1.带着问题出发
如果设置盒模型的box-sizing为border-box的话,那么元素的宽度就一定是设置的width吗?不是的,比如当padding设置的过大的时候,如下所示:
1 2 3 4 5 6 7 8 9
| <div class="box"></div> <style type="text/css"> .box { width: 300px; height: 300px; background: yellow; padding: 500px; } </style>
|
对于上面这种情况,box的宽度便是1000px。
判断下面这段代码的输出:
1 2 3 4 5 6 7 8 9 10 11
| <span class="sp"></span> <div class="box"></div> <script type="text/javascript"> window.onload = function () { let box = document.querySelector('.box'); let sp = document.querySelector('.sp'); console.log('box', box.clientWidth, box.clientHeight); console.log('sp', sp.clientWidth, sp.clientHeight); } </script>
|
输出结果为box,1000,1000;和sp,0,0。对于内联元素来说,它的可视宽度和可视高度永远是0。
padding是否会影响内联元素垂直方向的行为?就表现上来说,你会发现设置padding并没有改变上下两行之间的间距,这给我们造成的错觉就是padding不会改变上下两行内容之间的间距。对于内联元素来说,垂直方向的行为完全受line-height和vertical-align的影响。对应到这里就是说内联元素的padding的确不对位置产生影响效果。尽管设置padding对内联元素垂直方向的定位不会产生什么影响,但是对元素的尺寸影响还是在的。
可以利用内联元素的padding效果来做些什么?
1).增大点击面积,既然他不会影响布局,但是又会影响尺寸的话,那么把padding设置的足够大可以很好地增大点击面积。
2).实现垂直分隔符的效果,代码如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
| <a href="#">登录</a> <a href="#">注册</a> <style type="text/css"> a+a:before { content: ''; font-size: 0; padding: 9px 1px 2px; margin: 0 6px; border-left: 1px solid grey; } </style> ```html
### 2.padding非百分比值
**padding属性的值也能够使用百分比来进行计算,但是百分比值无论是设置水平方向的padding还是设置垂直方向的padding都是相对于元素自己的宽度进行计算。**
可以使用块元素的padding相对单位为自身宽度来实现一些什么效果呢?答案是可以用来实现适配良好的头图效果,如下所示:
```html <div class="box"> <img src="sthPath" alt="头图" /> </div> <style type="text/css"> .box { position: relative; padding: 10% 50%; } .box > img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } </style>
|
上面的关键点是.box设置了相对定位,然后根据padding: 10% 50%设置了1:5长宽比(是的position: relative,默认宽度上的表现类似于box-sizing: border-box;width: 100%,默认高度则是默认为0)。
消除幽灵空白节点,设置font-size为0。
3.利用padding效果实现一个菜单按钮
1 2 3 4 5 6 7 8 9 10 11 12 13
| <i class="menu"></i> <style type="text/css"> .menu { display: inline-block; width: 60px; height: 10px; padding: 15px 0; border-top: 10px solid grey; border-bottom: 10px solid grey; background: grey; background-clip: content-box; } </style>
|
其中background-clip: content-box的意思是指背景只是应用在content-box上面。
4.利用padding制作一个镂空圆点
1 2 3 4 5 6 7 8 9 10 11 12
| <div class="dot"></div> <style type="text/css"> .dot { width: 80px; height: 80px; padding: 10px; border: 10px solid grey; border-radius: 50%; background: grey; background-clip: content-box; } </style>
|