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;
}