padding妙用

最新推荐文章于 2025-09-11 08:51:15 发布

原创最新推荐文章于 2025-09-11 08:51:15 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

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+