1、利用内联元素的padding实现高度可控的分隔线
如下图效果,
代码部分
<header>
<a href="">首页</a>
<a href="">风景</a>
<a href="">关于</a>
</header>
css部分
a + a:before{
content:'';
font-size:0;/*因为内联元素的高度完全由font-size大小控制,把font-size设置为0不仅可以去掉默认高度,也可以去掉“幽灵空白节点”*/
padding:15px 5px 1px;/*当没有设置宽度的时候,元素宽度就等于padding值5*2=10*/
margin-left:10px;/*要分隔线左右相等就要设置和上面左右padding相加一样的值*/
border-left:1px solid #ccc;
}
小结:要改变分隔线的高度,只需改变padding-top和padding-bottom的值
2、利用padding 的百分比值实现小屏幕下头图高度天然等比例缩小
知识点:padding百分比值无论是水平方向还是垂直方向都是相对于宽度计算的
比如我们要实现一个正方形,只需设置 padding:50%即可
而要实现如下图效果的等比例缩放的头图效果,只需按需要设定padding的上下左右百分比值
html部分:
<div class="padding">
<div class="box">
<img src="img/timg.jpg" alt="">
</div>
</div>
css部分
.padding{
width:100%;
}
.box{
padding:10% 50%; /*宽高比为5:1*/
position:relative;
}
.box>img{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}
小结:此方法没有任何js代码,却依然适配良好
3、padding实现“三道杠”小图标 和双层原点图形
三道杠小图标
HTML代码
<i class="icon-line"></i>
CSS代码
.icon-line{
display:inline-block;
width:100px;
padding:20px 0;
height:10px;
border-top:10px solid;
border-bottom:10px solid;
background-color:currentColor;/*可实现鼠标hover是颜色变化一致*/
background-clip:content-box;
}
双层圆点效果:
HTML代码
<i class="icon-dot"></i>
css代码
.icon-dot{
display:inline-block;
width:40px;
height:40px;
padding:10px;
border:10px solid;
border-radius:50%;
background-color:currentColor;
background-clip:content-box;
color:#ff8fa7;
}
小结:此两种方法都需要考虑兼容性。支持IE9+