CSS小技巧

布局与居中

在CSS布局中，会经常将元素设置成浮动状态，而浮动以后的元素往往和预期的效果不一致，这时候通常会使用在浮动元素的父元素上添加样式来解决，这类样式通常被称为clearfix，下面就这类实现的一种写法。

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

布局过程当中也经常会碰到元素居中的需求，水平或垂直，css-tricks上的这篇文章就涵盖了绝大部分的居中需求，可以按需取用。这里提供几个相对简单的布局效果和代码：

布局和居中

    
    
    
    
    



    

        

            左
        
    
    

        

            中
        
    
    

        

            右
        
    



    

        

            左
        
    
    

        

            右
        
    



    
inline 水平居中


block 水平居中


    
inline 垂直居中（通过设置 父padding/子margin）

CSS “绘制”图形

借助CSS我们可以绘制出许多不同形状的规则图案，甚至是不规则的图案。例如下面这个这个话框

话框

.dialogBox {
display: inline-block;
background-color: #E6686A;
padding: 4px 10px;
color: white;
position: relative;
margin-bottom: 10px;
}

.dialogBoxTriangle {
border: 10px solid transparent;
border-top: none;
width: 0;
border-left-color: #E6686A;
position: absolute;
top: 100%;
left: 12px;
}


Hi CSS!

想了解更多有趣的图案可以参考 css-tricks上的 这篇文章