前端开发常用样式

开发常用样式

span标签超出换行或显示…

//自动换行
	span{
		word-break: break-all;
		white-space: normal;
	}
//超出显示省略号
	span{
		display:inline-block;
		width:200px;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		word-break:keep-all;
	}

span与字体图标垂直居中

	.content{
		width:20%;
		height:60px;
		border:1px solid red;
		text-align:center;
		}
	span{
		height:100%;
		vertical-align:middle;
		line-height:60px;
		}
	img{
		vertical-align:middle;
		}

	<div class="content">
		<img src="test.jpg">
		<span>测试</span>
	</div>

清除浮动

	.clearfix:before,.clearfix:after {  /*清楚浮动*/
	    content:"";
	    display:table;
	}
	.clearfix:after{
		clear:both;
	}
	.clearfix{
	    *zoom:1;/*IE/7/6*/
	}

#css中让图片铺满整个盒子

	.test{
		height: 400px;
		width: 600px;
		margin: 0px auto;
		background: url(../img/test.png) no-repeat;
		background-size: cover;
	}