其实在网页中有看不见的基线，就像作业本上面的一行一行的线，但是我们看不见。
div是块状元素，独占一行，用div控制文字的颜色会使得文字换行，使用float可以改善，但是它不会浮在相应的位置；
<style>
#test1{
color:red;
float:left;
}
#test2{
color:blue;
}
</style>
</head>
<body>
<div>
北方有<div id="test1">佳人</div>，绝世而独立。</br>
一顾倾人城，再顾倾人国。</br>
宁不知倾城与倾国，<span id="test2">佳人</span>难再得。</br>
</div>
</body>
span行内元素，只在一行中发挥作用，设置高宽此时没有作用，因为行高已经定了；
<style>
#test1{
color:red;
}
#test2{
color:blue;
}
</style>
</head>
<body>
<div>
北方有<span id="test1">佳人</span>，绝世而独立。</br>
一顾倾人城，再顾倾人国。</br>
宁不知倾城与倾国，<span id="test2">佳人</span>难再得。</br>
</div>
</body>