CSS的奇淫技巧!!!(2016.12.29更新)

  • • 发表于 4年前
  • • 作者 茂茂
  • • 3197 人浏览
  • • 13 条评论
  • • 最后编辑时间 4年前
  • • 来自 [技 术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

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

分享到:
评论区(共13条评论)
13条评论
Ctrl+Enter
作者

茂茂

茂茂

APP:2 帖子:16 回复:198 积分:13513

已加入社区[1357]天

啦啦啦

作者详情》
Top