css 工作中实用技巧

记录工作中经常用到的一些东西，不足的希望大家能在评论上补充。直接干

上下左右居中

第一种

	//推荐使用
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; 
    width:100px;
	height:100px;
    margin: auto;

第二种

	//不推荐使用
	position: absolute;
	top: 50%;
	left: 50%;
	width:50%;
	height:30%;
	padding:20px;
	text-align:center;
	transform: translate(-50%, -50%);

我个人比较推荐第一种，因为兼容性比较好，第二种，在ios8（具体那个版本不记得了）会有兼容问题。

动态计算长度值
应用场景：一个div已经使用了position:absolute，同时又有padding，这时你设置width:100%；实际width不是100%，而是100%+padding，这时calc就可以用得上了。

	padding: 100px;
    position: absolute;
    width: calc(100% - 200px);

ps:减号前后一定要有空格，不然浏览器不能识别。

兼容的浏览器：

清楚浮动

.clear {
    clear: both;
    display: block;
    content: '';
    overflow: hidden;
    z-index: 1;
}

ps：其实我平常我很少使用float，使用比较多的是flex；但是有时候兼容ie8会用，如果不用兼容 ie8，我建议使用flex，flex我用的比较多的就是display:flex；作用是所用子元素并排在一起。还有justify-content:space-between，相两端对齐，只有两个元素时效果和float一个左一个右一样。flex功能很强大，教程我就不贴了，阮一锋大神讲得很详细了，百度搜索：flex布局阮一峰

自动补满剩下的宽度

应用场景：
搜索框旁边有个取消按钮，我们只需要设置取消按钮的宽度，input框就可以直接使用flex-grow这个属性了

html：

<div class="box">
    <input class="search" type="text">
    <div class="close">取消</div>
  </div>

css：

.box {
    display: flex;//必须要父元素设置
    padding: 0 .4rem;
  }
  .search {
    flex-grow: 1;
    margin-right: .266667rem;
  }

效果：

兼容的浏览器：

console.js
这个js用做真机调试，有些问题在浏览器打开没有显示，在真机上测试就会有bug，这时就需要console.js来辅助调试，看下那里报错。
用发：

	//直接引入
 	<script type="text/javascript" src="js/console.js"></script>

点击红框的按钮就能看到报错的信息了

遮罩层

	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background-color: rgba(#000, 0.5);

超出宽度显示…

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

剩下的，欢迎各位同学补充。