css常用的使用技巧

清除浮动

• 主要为子元素浮动（float）之后，父元素无法撑起高度和宽度。

<!-- html -->
<div class="clear">
    <img src="demo.gif">
</div>

<!-- css -->
<style>
    img {
        float: left;
    }
    /* 清除浮动 */
    .clear::after {
      content: "";
      display: block;
      clear: both;
    }
</style>

文字少时居中，多时靠左

• 但是要注意，当p的内容为英文单词组成的时候，如果单词过长，而不是“ pppppppppppppppppppppppppppppp”这样的一次，会被视为一个单位而造成超过div的尺寸。

• 如果你想要英文字符也有中文字符的效果的话，在p使用“ word-break：break-all”

<!-- html -->
<div class="box">
    <p class="content"></p>
</div>

<!-- css -->
<style>
    .box {
        text-align: center;
    }
    .content {
        display: inline-block;
        text-align: left;
    }
</style>

任意高度元素展开

<!-- html -->
<div class="box"></div>

<!-- CSS -->
<style>
    .box{
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s; 
    }
    .box.active {
        max-height: 666px;  /* 需要足够大的值 (动态添加值，和元素，)*/
    }
</style

优雅的图片未加载或加载失败效果

• 需要注意的是，图片显示完成后，img会成为“替换元素”，而替换元素是无法设置伪元素的，因为内容被图片替换掉了；还需要注意attr里面的变量不能加双引号

<!-- html -->
<div>
    <img src="demo.gif" alt="lululu">
</div>

<!-- CSS -->
<style>
    div {
        width: 100px;
        height: 100px;
        overflow: hidden;
    }
    img {
        display: inline-block;
        width: 100%;
        height: 100%;
        position: relative;
    }
    img::after {
        /* 生成 alt 信息 */
        content: attr(alt);
        /* 尺寸和定位 */
        position: absolute; left: 0;bottom: 0;right: 0;
        /* 颜色 */
        background-color: rgba(0,0,0,.5);
        /* alt 信息隐藏 */
        transform: translateY(100%);
        /* 过渡动画效果 */
        transition: transform .2s;
        }
        img:hover::after {
        /* alt 信息显示 */
        transform: translateY(0);
    } 
</style>

CSS的悬浮图片替换效果

• 需要注意的是，如果快捷保存图片，保存的是src内的图片，而不是替换之后的。

<!-- html -->
<img src="demo.gif">

<!-- CSS -->
<style>
    img:hover {
        content: url(amazing.gif);   /* 这里放的是hover的时候，展示的图片 */
    }
</style>

利于seo的“替换元素”标题logo

• 用h1的原因主要是因为seo，语义化的问题。

<!-- html -->
<h1>Weismann's blog</h1>

<!-- CSS -->
<style>
    h1 {
        content: url(logo.gif);  /* 页面最终展示的图片 */
    }
</style>

高兼容性的加载效果

• 在IE6-IE9下是…，其他都是动态的；使用点的目的是语义化和低版本浏览器的兼容。

<!-- html -->
正在加载中<dot>...</dot>

<!-- CSS -->
    <style>
    dot {
        display: inline-block;
        height: 1em;
        line-height: 1;
        text-align: left;
        vertical-align: -.25em;
        overflow: hidden;
    }
    dot::before {
        display: block;
        content: '...\A..\A.'; 
        white-space: pre-wrap;
        animation: dot 3s infinite step-start both;
    }
    @keyframes dot {
        33% { transform: translateY(-2em); }
        66% { transform: translateY(-1em); }
    }
</style>

隐藏文字

• 说这个主要是为了说明，Chrome浏览器如果字体设置12px以下的大小（新版本已经不限制了），会被自动处理成12px，但是有一个值除外，0。

<style>
    p {
        font-size: 0;
    }
</style>

自动将输入的小写字母转换大写

<!-- CSS -->
<style>
    input {
        text-transform: uppercase;
    }
</style>

元素隐藏同时资源不加载

• 后续可通过script.innerHTML访问。

<!-- html -->
<script type="text/html">
    <img src="1.jpg">
</script> 

自定义光标

• 需要注意IE只支持cur文件。

<!-- CSS -->
<style>
    .cursor-demo {
        cursor: url(demo.cur);
    }
</style>