CSS笔记（3）

CSS的元素显示器

元素显示模式

块元素

常见h1,p,ul,div等。
1.比较霸道，自己独占一行。
2.高度，宽度，外边距，内边距都可以控制。
3.是一个容器盒子，里面可以放行内元素或者块级元素。
4.宽度默认是父级元素的100%

注意：文字类型元素内不能使用块级元素， 如p，h1等。

行内元素（内联元素）

常见a，span等。
1.一行可以显示多个。
2.高宽直接设置无效。
3.默认宽度就是它本身内容的宽度。
4.行内元素只能容纳文本或其他行内元素。

注意：链接里面不能再放链接。特殊情况链接a里面可以放块级元素，但是给a转换一下块级模式最安全。

行内块元素

img,input,td等同时具有块元素和行内元素的特点。
1.一行可以显示多个，但是他们中间会有空白空隙。
2.默认宽度就是他们本身内容的宽度。
3.高度，行高，外边距以及内边距都可以控制。

元素显示模式转化

一个模式元素需要另一种模式的特性

a {
width: 150px;
height: 50px;
/*把行内元素转化为块级元素*/
display:block;
}

div {
width: 150px;/*无效*/
height: 50px;/*无效*/
/*把块级元素转化为行内元素*/
display: inline;
}

span {
width: 150px;
height: 50px;
/*把行内元素转化为行内块级元素*/
display: inline-block;
}

单行文字垂直居中

CSS中没有给我们提供文字垂直居中的代码。
解决方案：让文字的行高等于盒子的高度。

	a {
			display: block;
			height: 40px;
			line-height: 40px;
		}