<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>导航条</title>
<!--控制导航条的CSS样式-->
<style type="text/css">
* {
margin: 0
padding: 0
font-size: 12px
text-aling: center
}
body{
background-color: #fff
}
#nav {
width: 700px
margin: 20px auto 0 auto
}
#nav li{
display: inline
list-style-type: none
}
#nav li a:link,#nav li a:visited {
float:left
margin-right:1px
height:26px
line-height:26px
padding:0 20px
text-decoration: none
color:#333
background:url(link.jpg)
}
#nav li a:hover {
color:#000
background: url(hover.jpg)
}
#home #nav li a#cur1,#divcss #nav li a#cur2,#csslayout #nav li a#cur3,#css20 #nav li a#cur4,#websites #nav li a#cur5,#moban #nav li a#cur6 {
color:#fff
background:url(current.jpg)
}
#topline {
width:100%
height:3px
overflow:hidden
background:#06f
}
</style>
<!--控制导航条的CSS样式结束-->
</head>
<body>
<body id="home">
<!--生成导航的无序列表-->
<ul id="nav">
<li><a href="index.html" id="cur1">首页</a></li>
<li><a href="#" id="cur2">作品展示</a></li>
<li><a href="#" id="cur3">设计网址</a></li>
<li><a href="#" id="cur4">联系我们</a></li>
<li><a href="#" id="cur5">酷站欣赏</a></li>
<li><a href="#" id="cur6">模板下载</a></li>
</ul>
<!--生成导航的无序列表结束-->
<!--导航底部的那条线-->
<div id="topline"></div>
</body>
</html>
相信大家对行内元素的认识大多是不换行，不能设置宽高，又或者是来自经典的垂直水平居中内联元素的面试题，把line-height设置成父盒子的高度，但在昨天练习切图的过程中，发现将一行内联元素在垂直方向上对齐很困难，特别是包含img元素，于是决定深入了解一下这行内元素的细节
1.分类：内联元素分为替换元素和非替换元素
MDN上对可替换元素是这么说的
翻译过来就是
这些特殊的行内元素，虽然不换行，但可以设置宽高，四周padding和margin
而普通的行内元素（非替换元素，向span，a等）不能设置宽高，四周margin无效，四周padding有效，
但上下padding比较特殊，不会撑大内容区，但会撑大行高(line-height),下面我们细说
！此处注意：虽然替换元素特殊，但也是行内元素，下面介绍行内元素的一些概念
每个行内元素都有一条基线，规则如下
1.非替换元素中的基线是英文字母x的下端，什么意思，如图，红色的就是这个非替换元素的基线
2.替换元素中的基线就是margin-bottom的外沿
有了基线的知识，我们现来说说一行的行内元素是怎么排列的，只有两步
1.找到本行第一个行内元素，确定它的基线
2.找到下一个行内元素，确定它的基线并与第一个基线对齐，以此类推，直到排完本行内的所有行内元素
等一行的行内元素都排完了，这一行的行框就确定了，为什么叫行框，那肯定是把一行的行内元素都包含进去的框嘛，所以说行框的高度就是本行内最高的行内元素的top line 到最低的行内元素的bottom line。
line-height就是行内元素的内容区+padding，也就是一个行内元素的top line 到bottom line的距离
所以设置line-height为父盒子高度的一半就可以把元素挤到中间。
设置行内元素和本行框基线的对齐方式
