一些CSS常用样式

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情

前言

本人学习总结的一些常用CSS样式，活到老学到老，以后会继续更新此文。

垂直水平居中

position定位+transform

不需要知道宽高，要考虑transform浏览器兼容问题

.parent {      
    position: relative;  
}  
.son {      
    position: absolute;      
    left: 50%;      
    top: 50%;      
    //向上与向左移动自身长宽的50%，使其位于中心     
    transform: translate(-50%, -50%);      
    //translate沿着X轴、Y轴进行变换 
}

position定位+marign: auto;

这种方法不需要知道宽高，也不用考虑浏览器兼容问题。

.parent {      
    position: relative;  
}  
.son {      
    position: absolute;      
    top: 0;     
    left: 0;     
    bottom: 0;     
    right: 0;     
    margin: auto; 
}

flex伸缩布局

.parent {     
    display:flex;     
    justify-content:center;     
    align-items: center; 
}

清除浮动

万能清除法：after伪元素（推荐）

.clearfix:after {      
    /*生成内容作为最后一个元素*/      
    content: "";      
    /*使生成的元素以块级元素显示,占满剩余空间*/      
    display: block;      
    /*清除浮动元素对当前元素的影响*/      
    clear: both;           
    /*避免生成内容破坏原有布局的高度*/      
    height: 0;      
    /*使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互*/      visibility: hidden;  
}  
.clearfix {      
    /*用于兼容IE, 触发IE hasLayout*/      
    *zoom:1;  
}

BFC包含浮动元素（推荐）

通过改变包含浮动子元素的父盒子的属性值，overflow：hidden触发BFC，以此来包含子元素的浮动盒子。在父盒子里添加：

.parent {     
    overflow:hidden;     
    *zoom: 1; 
}

给父盒子设置高度即可

.parent {
    height： 20px;
}

给父盒子添加clear:both

注：margin属性会失效

.parent {
    clear：both;
}

外墙法

在两个盒子之间添加一个块级空盒子

注：上一个盒子的margin-bottom无效，可以使用下一个盒子的margin-top

但是推荐给新添加的盒子设置高度

.empty {
    height: 20px; 
    clear: both;
}

内墙法

在第一个盒子的所有子元素的最后添加一个块级空盒子

注：上一个盒子的margin-bottom和下一个盒子的margin-top都有效,给空盒子添加高度会撑开父盒子

.empty {
    height: 20px; 
    clear: both;
}

line-height的继承问题

• 写具体数值，如30px，则继承该值
• 写比例，如2/1.5，则继承该比例（子元素font-size * 2）
• 写百分比，如200%，则继承计算出来的值（父元素font-size * 200%）

最后

作为个人学习与工作笔记吧，以后会继续更新的，不仅更新常用样式，考虑扩展好看的css颜色、特效、动画等；敬请期待(没更就是在工作:grin:)。