CSS的奇淫技巧！！！（2016.12.29更新）

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奇淫技巧