css要点补充

1. 实现浏览器往小缩进时，改变的是红色部分，绿色部分不变且居中

<div class="wrapper">
	<div class="content"></div>
</div>

*{
	margin:0;
	padding:0;
}
.wrapper{
	height:30px;
	background-color:#b00;
}
.content{
	margin:0 auto;
	width:1200px;
	height:30px;
	background-color:#0f0;
}

父子级都必须是块级元素。

使用 margin:0 auto; 实现，auto是自适应的意思。

2. 文本类元素

inline inline-block都叫文本类元素，凡是带有inline的元素都有文本的特点。

文本的特点，文本中的空格是文本分隔符，加多少空格都是一个文本分隔符。

所以文本类元素可以被文本分隔符分隔。

3. 内部被转换成inline-block

position:absolute;

float:left/right;

<span>123</span>

span{
	position:absolute;
	width:100px;
	height:100px;
	background-color:red;
}

加入position:absolute; 或 float:left/right; 之后

4. 文本类元素里面包含文字，外面的文字会和里面的文字底对齐

不同大小文本、图片和文本，对齐时都是底对齐

<span></span>呵呵

span{
	display:inline-block;
	width:100px;
	height:100px;
	background-color:red;
}

文本类元素里面包含文字后

• vertical-align:10px;可以调对齐线