1、利用內聯元素的padding實現高度可控的分隔線

如下圖效果，

程式碼部分

 <header>
     <a href="">首頁</a>
     <a href="">風景</a>
     <a href="">關於</a>
   </header>

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;
       }