css提高开发效率的必备代码

这篇文章主要总结了一下css 2.0 一些常用/提高开发效率的代码块，都是在实际项目中遇到的。望点赞丫~

 

清除浮动

总的来说，浮动给我们实际开发带来了很高的效率，但是同样的也有很多的麻烦。其中最大的问题就是使其父元素高度塌陷，解决的办法有很多。

 

第一种：　在同级元素下添加空标签 <div style=“clear：both"> </div>

　　　　　但是这样会造成大量的空标签，形成无用代码（不建议使用）

第二种：　在父级元素添加 overflow： hidden；

　　　　　最简单的一种方式，但是会隐藏定位在盒子外的元素（不建议使用）

第三种： 　用：after伪元素解决浮动问题，如果当前层级有浮动元素，在父元素添加 .clearfix类样式即可

　　　　　.clearfix::after {

　　　　　　　　content: “ ”；

　　　　　　　　display: block;

　　　　　　　　height: 0;

　　　　　　　　clear: both;

　　　　　　　　visibility: hidden;

　　　　　　　　overflow: hidden;

　　　　　　}

 

垂直水平居中：

 

css中使元素垂直水平居中的方式有很多，都有各自的优缺点，单都不能达到兼容性好，破坏力小的目标，介绍几个实际开发常用的方式：

 

1. 子绝父相 ： 父级添加绝对定位并且已知宽高

①position：absolute;

top: 0; left: 0; bottom: 0; right: 0;

margin: auto;

②position: absolute;

top: 50% ; left: 50%;

margin-left:   - 子集盒子宽度的一半px；

margin-top： - 子集盒子高度的一半px；

 

2. 一般简单的块类元素 margin： 0 auto；

 

3.flex轻松实现垂直居中：

　display：flex；

align-items: center;

jutify-content: center;

 

文本末尾添加省略号：

 

当文本的内容超出容器的宽度的时候，我们下网在默认添加省略号达到内容区省略显示的效果（俗称“省略号三连”）

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

 

 

持续更新 loading~