CSS 小技巧

简介

CSS 总会遇到一些麻烦的问题，有些代码段非常好用，所以在这里记录下来，方便下次遇到同样的问题可以快速解决，同时也加深自己的印象。

清除浮动

为父元素增加 clearfix 类，即可强制包住浮动元素。
这个很好理解，使用 after 伪类在元素结尾增加一个元素，设置它的 clear:both;，接下来只要不让它显示出来就好。

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

画个三角形

指定盒子的四条边框宽度，设置宽高为 0，然后将其他 3 条边的颜色设置成透明，这样就可以得到一个三角形了，之后可以配合 position:absolute; 套在别的 div 的边框上，可以形成一个突出箭头的效果。

arrow.png

#test {
    border: 12px solid;
    content: "";
    border-color: transparent transparent transparent black;
    width:0;
    height:0;
}

可以有类似的用法，就是为边框加一个突出的箭头，不过效果可能不是很好，需要微调。
之所以要同时指定 after 和 before，是因为三角形是填充满颜色的 (可见上图)，为了达到三角边框的效果，需要一个正常边框颜色的三角形，和一个白色的三角形，进行覆盖显示，才能达到这个效果。top:50%; transform:translateY(-50%); 是为了垂直居中。

arrow2.png

#test3 {
    border: 2px solid orange;
    position: relative;
    width: 50px;
    height: 50px;
}
#test3:after {
    border: 8px solid;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-color: transparent transparent transparent white;
}
#test3:before {
    border: 12px solid;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-color: transparent transparent transparent orange;
}   

变态的中文对齐需求

    用户名
    

    密码

需求是想要不同中文字数的文本两端对齐，思路如下：

1. 把 span 设置为固定宽度。
2. 使用 text-aign: justify (但是这个属性只有在多行文本的情况下才会有效)。
3. 使用 after 伪类创建一行文本。
4. 把创建的文本隐藏掉。

bt.png

#test span{
    border: 1px solid black;
    width: 80px;  /* 固定的宽度 */
    display: inline-block; /* 内联元素设置不了宽度，所以使用 inline-block */
    text-align: justify; /* 文字两端对齐 */
    height: 20px;   /* 设置固定的高度，好让创建的一行文本被挤出去 */
    overflow: hidden; /* 直接干掉被挤出去的文本 */
}
#test span:after {/* 创建一行文本 */
    content: "";  
    width: 100%;
    display: inline-block;
    /* 调试的时候方便观察  border: 1px solid blue; */
}

    用户名
    

    密码