CSS小结4 之文本特效等
1text-indent效果:
在<H1>标签中，把网站LOGO放到<H1>标签中，去掉文字，只看到图片，优化SEO,指定H1元素的长度和图片的长度一样，
设置h1的背景图片，使用text-indent:-9999px;
<styletype="text/css">
h1
{
width:300px;
height:100px;
background-image:url("images/logo.jpg");
text-indent:-9999px;
}
</style>
2text-align：对块元素不起作用，对文字，inline元素和inline-block元素起作用；margin:0:auto中，是块元素水平居中；
3line-height：两行文字基线间的距离
CSS中同样有顶线，中线，基线，底线的概念；
行距：指的是上一行的底线到下一行顶线间的距离：
内容区：行中顶线和底线之间的部分；
行框：两行文字“半行距分隔线”之间的距离；
CSS中定义height和line-height属性值相等，实现单行文字的垂直居中
<styletype="text/css">
div
{
width:240px;
height:60px;
border:1pxsolidgray;
font-size:12px;
text-align:center;
}
#div1{line-height:20px;}
#div2{line-height:40px;}
#div3{line-height:60px;}
</style>
</head>
<body>
<divid="div1">height为60px，line-height为20px</div>
<divid="div2">height为60px，line-height为40px</div>
<divid="div3">height为60px，line-height为60px</div>
</body>
4line-height的值为百分比的时候，当前元素的行高是相对于父元素的font-size计算的；
line-height=父元素的font-sixze*百分比
<styletype="text/css">
body{font-size:30px;}
#outer-box
{
/*父元素行高：30px×150%=45px*/
line-height:150%;
background-color:Red;
color:White;
}
#inner-box
{
/*子元素行高：30px×150%=45px（继承父元素的line-height）*/
font-size:20px;
background-color:Purple;
color:White;
}
</style>
</head>
<body>
<divid="outer-box">这是父元素
<divid="inner-box">这是子元素</div>
</div>
5vertical-align取值
A负值：元素相对于基线向下偏移2PX;
B百分比，比如vertical-align:50%,假如当前元素继承的line-height为20PX，则vertical-align等于vertical-align:10PX,相对
于基线向上偏移10PX；
6vertical中对于div元素，实现DIV中图片垂直居中；
<styletype="text/css">
div
{
display:table-cell;
vertical-align:middle;
width:120px;
height:120px;
border:1pxsolidgray;
}
</style>
</head>
<body>
<div><imgsrc="images/girl.png"alt=""/></div>