CSS笔记（四）一些常见问题及技巧

一、盒子之间有空隙

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 500px;
				height: 30px;
				background-color: #F798DB;
				font-size: 0px;    /* 在父元素中设置大小为0px，此时子元素会继承父元素的样式 */
			}
			li{
				list-style-type: none;
			}
			.content ul li{
				line-height: 30px;   
				display: inline-block;
				width: 50px;
				background-color: aqua;
				font-size: 20px;   /* 再在子元素中设置文本的大小 */
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="content">
				<ul>
					<li>商城</li>
					<li>商城</li>
					<li>商城</li>
					<li>商城</li>
					<li>商城</li>
					<li>商城</li>
				</ul>
			</div>
		</div>
	</body>
</html>

效果如下：

第一步：在父元素中设置大小为0px，此时子元素会继承父元素的样式
第二步：再在子元素中设置文本的大小

二、文本垂直居中对齐

line-height: 30px;

注意：line-height的值要和该文本区域的值一样

三、块元素在浏览器水平居中

1.定宽的

2.不定宽的

			.box{
				height: 6.25rem;
				background-color: coral;
				background-image: ;
				display: table;
				margin: 0 auto;
			}

display: table 在表现上类似 block 元素，但是宽度为内容宽。

四、单行文本的超出隐藏,并且转换为省略号

.box{
    width:300px;  
    overflow: hidden; 
    text-overflow:ellipsis; 
    white-space: nowrap; 
}

五、多行文本的超出隐藏,并且转换为省略号

.box{
    height:50px;
    width:50px;
    overflow:hidden;
    white-space:normal;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
}

兼容性不是很好，需要带上前缀

总结：

将会持续更新