不定期更新的CSS奇淫技巧（一）

小小茂茂發表於2018-06-06
CSS

一、CSS寫自適應大小的正方形

程式碼：

<
style type="text/css">
以圖片為例background 寫法 .img{ 
 width: 100%;
  height: 0;
  padding-bottom: 100%;
  //關鍵所在  overflow: hidden;
  background:url(../res/images/haha.png) center/100% 100% no-repeat;
 
  } .img img{ 
 width: 100%;
 
  }img 寫法 .img{ 
 position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  //關鍵所在  overflow: hidden;
 
  } .img img{ 
 position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
 
  }<
/style>
<
div class="img">
<
/div>
複製程式碼

效果圖：

不定期更新的CSS奇淫技巧（一）

原理：

元素的padding的百分比值四個值均根據當前元素的寬度來計算的

padding只能取top或者bottom，自適應正方形其值要和寬一致，當然其他不同比例的矩形可以通過設定不同比例的padding就能得到

二、多列等高

程式碼：

<
style type="text/css">
 .web_width{ 
 width: 100%;
  overflow: hidden;
   //關鍵所在 
  } .left{ 
 float: left;
  width: 20%;
  min-height: 10em;
  background: #66afe9;
  padding-bottom: 2000px;
  //關鍵所在  margin-bottom: -2000px;
  //關鍵所在 
  } .right{ 
 float: right;
  width: 80%;
  height: 20em;
  background: #f00;
 
  }<
/style>
複製程式碼

效果圖：

不定期更新的CSS奇淫技巧（一）

原理：

padding補償法

在高度小的元素上加一個數值為正padding-bottom和一個數值為負margin-bottom，再在父級加上overflow: hidden隱藏子元素超出的padding-bottom

注：

  1. padding-bottom、margin-bottom之和要等於0（建議值不要太大，夠用就行）
  2. 程式碼中子元素單位用em是為了做gif效果更明顯

（在我的筆記裡面翻出來了，用這個解決了很多佈局問題）

三、繪製三角形

程式碼

<
style type="text/css">
.demo { 
width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 50px solid red;

  }<
/style>
複製程式碼

效果圖：

不定期更新的CSS奇淫技巧（一）

原理：

利用盒模型中的border屬性

注：

  1. 當盒模型的width/height為 0 時，border 邊的形狀是一個三角形，通過只設定三條邊的 border ，並將所繪製的三角形相鄰兩邊的 border 的顏色設定為 transparent, 最後通過調整border-width的比例繪製自己所需要的三角形

繪製三角形詳解地址

四、隱藏滾動條（這個算比較無聊的，主要當時有個需求非要隱藏）

程式碼

<
style type="text/css">
 * { 
 margin: 0;
  padding: 0 
  }  section { 
 width: 300px;
  height: 500px;
  margin: 20px auto;
  overflow: hidden;
 
  }  div { 
 width: calc(100% + 20px);
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
 
  }  p { 
 width: 100%;
  height: 200px;
  background: #999;
  overflow: hidden 
  } p:nth-child(2n){ 
 background: #f60;
 
  }<
/style>
<
section>
 <
div>
  <
p>
1<
/p>
  <
p>
2<
/p>
  <
p>
3<
/p>
  <
p>
4<
/p>
  <
p>
5<
/p>
 <
/div>
<
/section>
複製程式碼

效果圖：

不定期更新的CSS奇淫技巧（一）

原理：

父元素超出部分隱藏，將滾動元素的width超出父元素的width，從而達到隱藏滾動條

五、邊框字型同色（2018.06.06）

程式碼

<
style>
 #app {  width: 200px;
  height: 200px;
  color: #000;
  font-size: 30px;
    /*方案一*/  border: 50px solid currentColor;
    /*方案二*/  border: 50px solid;
   /*或*/  border-width: 50px;
  border-style: solid;
 
  }<
/style>
複製程式碼

效果圖：

不定期更新的CSS奇淫技巧（一）

原理：

  1. 方案一：CSS3 currentColor 表示當前的文字顏色
  2. 方案二：border 的預設值 (initial) 就是 currentColor, 可以直接寫成 border: 50px solid;
    省掉 color 的值

currentColor-CSS3超高校級好用CSS變數

六、顯示節點的層次結構（2018.06.11）

這個可以說是真奇淫技巧了，話不多說，上菜

程式碼：

/*手動新增*/* { 
background-color: rgba(255,0,0,.2);
 
  }* * { 
background-color: rgba(0,255,0,.2);
 
  }* * * { 
background-color: rgba(0,0,255,.2);
 
  }* * * * { 
background-color: rgba(255,0,255,.2);
 
  }* * * * * { 
background-color: rgba(0,255,255,.2);
 
  }* * * * * * { 
background-color: rgba(255,255,0,.2);
 
  }/*JS新增 在控制檯執行*/const m_style = document.createElement('style');
const m_style_text = '*{background-color:rgba(255,0,0,.2)
  }* *{background-color:rgba(0,255,0,.2)
  }* * *{background-color:rgba(0,0,255,.2)
  }* * * *{background-color:rgba(255,0,255,.2)
  }* * * * *{background-color:rgba(0,255,255,.2)
  }* * * * * *{background-color:rgba(255,255,0,.2)
  }';
m_style.appendChild(document.createTextNode(m_style_text));
document.getElementsByTagName('head')[0].appendChild(m_style)複製程式碼

效果

不定期更新的CSS奇淫技巧（一）

原理：CSS萬用字元選擇器（*）選擇器配合後代選擇器

無聊水知乎看到的——原文地址

以上內容均來自於踩坑找方案的總結，不喜勿噴，謝謝合作

如有其它好用的小技巧歡迎評論區交流

注：評論區提到的小技巧等試驗完畢後會加上，畢竟發文要用心，總不能隨隨便便就水經驗，各位小哥哥小姐姐們不要捉急

前兩條原文地址

來源：https://juejin.im/post/5b12ae3de51d4506d73f0bb4

相關文章