CSS的奇淫技巧！！！

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

代碼：

<style type="text/css">
    .hot-imgs{
        width: 100%;
        overflow: hidden;
    }
    .hot-imgs li{
        float: left;
        width: 100%;
        height: 0;
        padding-bottom: 100%;        //關鍵所在
        overflow: hidden;
        background:url(../res/images/haha.png) center/100% 100% no-repeat;
    }
    .hot-imgs li img{
        width: 100%;
    }
</style>
<ul class="hot-imgs">
    <li></li>
</ul>

效果圖：

原理：元素的padding的百分比數值是根據當前元素的寬度來計算的

注：padding只能取top或者bottom，其值要和寬一致

二、多列等高（2016.12.29）

代碼：

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

效果圖：

原理：padding補償法

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

注：

1. padding-bottom、margin-bottom之和要等于0
2. overflow: hidden為什么有清除浮動的作用？
   答：overflow: hidden要有寬度或者高度才會溢出部分隱藏，如果外部盒子沒有寬度或者高度，里面又是浮動元素，就會被撐開。
3. 代碼中子元素單位用em是為了做gif效果更明顯

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

三、（待更新！！！）

茂茂 不定期更新的 CSS奇淫技巧