1.如何像淘宝页面一样，随着浏览器的减小而保持内容区大小不变，减少的只是两边的空白区大小呢？
通过内层div设置margin为0 auto就可以了！
1 ????????<style type="text/css"> 2 ????????????*{ 3 ????????????????margin:0; 4 ????????????????padding:0; 5 ????????????} 6 ????????????.wrapper{ 7 ????????????????height:30px; 8 ????????????????background-color: #123; 9 ????????????}10 ????????????.content{11 ????????????????width: 1200px;12 ????????????????height: 30px;13 ????????????????background-color: #0f0;14 ????????????????margin: 0 auto;/*这里的auto就是自适应的意思，它会随着浏览器框的缩小而减小*/15 ????????????}16 ????????</style>17 ????</head>18 ????<body>19 ?????????<div class="wrapper">20 ?????????????<div class="content"></div>21 ?????????</div>22 ????</body>2.HTML中的元素有三种：inline、inline-block、block
通常我们称凡是带了inline、inline-block的元素为文本类元素，也就是凡是带有inline的元素【inline、inline-block】都有文本类特点，所以我们称之为文本类元素！
3.span本来是行级元素，所以我们设置宽和高不好使，如下所示：
1 ????<head> 2 ????????<meta charset="UTF-8"> 3 ????????<title>Insert title here</title> 4 ????????<style type="text/css"> 5 ????????????span{ 6 ????????????????width:100px; 7 ????????????????height: 100px; 8 ????????????????background-color: red; 9 ????????????}10 ????????</style>11 ????</head>12 ????<body>13 ?????????<span>123</span>14 ????</body>效果如下所示：
如果我们给这个css代码加了：position：absolute或者 float:left/right，那么就会惊奇的看到对span标签设置的宽和高都好使了，如下所示：
1 ????<head> 2 ????????<meta charset="UTF-8"> 3 ????????<title>Insert title here</title> 4 ????????<style type="text/css"> 5 ????????????span{ 6 ????????????????width:100px; 7 ????????????????height: 100px; 8 ????????????????background-color: red; 9 ????????????????position: absolute;10 ????????????}11 ????????</style>12 ????</head>13 ????<body>14 ?????????<span>123</span>15 ????</body>这是为什么呢？
这是因为一旦我们设置了position：absolute或者 float:left/right，那么系统本身就会在底层自动将该HTML标签的inline转换为inline-block;所以你会看到，一旦我们设置了position:absolute或者 float:left/right，就可以给该标签设置宽和高了！
1 ????<head> 2 ????????<meta charset="UTF-8"> 3 ????????<title>Insert title here</title> 4 ????????<style type="text/css"> 5 ????????????*{ 6 ????????????????margin:0; 7 ????????????????padding:0; ????8 ????????????} 9 ????????????span{10 ????????????????font-size: 50px;11 ????????????}12 ????????</style>13 ????</head>14 ????<body>15 ?????????<div>16 ?????????????你们刘哥很帅<span>哈哈</span>17 ?????????</div>18 ????</body>你会看到，在一行文本里面，实际上文本是底对齐的！这是文本和文本之间的特点
如果我现在把文本和图片放在一起呢？
1 ????<head>2 ????????<meta charset="UTF-8">3 ????????<title>Insert title here</title>4 ????</head>5 ????<body>6 ?????????<img ?src="1.png">呵呵7 ????</body>
效果也是图片和文字是底对齐的！
同理，如果我将一个行级元素变成一个行级块元素，那么行级块元素和文字也是底对齐的！
1 ????<head> 2 ????????<meta charset="UTF-8"> 3 ????????<title>Insert title here</title> 4 ????????<style type="text/css"> 5 ????????????span{ 6 ????????????????display:inline-block; 7 ????????????????width:100px; 8 ????????????????height:100px; 9 ????????????????background-color: red;10 ????????????}11 ????????</style>12 ????</head>13 ????<body>14 ?????????<span></span>哈哈15 ????</body>上面也是底对齐的，这也没什么问题！但是如果我现在往span标签里面加点内容，如下：
1 ????<head> 2 ????????<meta charset="UTF-8"> 3 ????????<title>Insert title here</title> 4 ????????<style type="text/css"> 5 ????????????span{ 6 ????????????????display:inline-block; 7 ????????????????width:100px; 8 ????????????????height:100px; 9 ????????????????background-color: red;10 ????????????}11 ????????</style>12 ????</head>13 ????<body>14 ?????????<span>This</span>哈哈15 ????</body>你会看到，这里文字将不是底对齐了，它是和它里面的文字底对齐了！
这就是浏览器的另外一个特点：一旦一个行级块元素或者一个文本类元素里面包含文字了，那么外面的文字就会和它们里面的文字底对齐！
如果里面的文字很大的话，依然是和它里面的文字底对齐：
1 ????<head> 2 ????????<meta charset="UTF-8"> 3 ????????<title>Insert title here</title> 4 ????????<style type="text/css"> 5 ????????????span{ 6 ????????????????display:inline-block; 7 ????????????????width:100px; 8 ????????????????height:100px; 9 ????????????????background-color: red;10 ????????????????font-size: 50px;11 ????????????}12 ????????</style>13 ????</head>14 ????<body>15 ?????????<span>This</span>哈哈16 ????</body>那这里能不能调整一下对齐线呢，难道非要是底对齐么，当然可以调节，这里有个属性叫：vertical-align,该属性值可以为正数像素【3px】，也可以为负数【-5px】，当然也可以是middle、如下所示：
1 ????<head> 2 ????????<meta charset="UTF-8"> 3 ????????<title>Insert title here</title> 4 ????????<style type="text/css"> 5 ????????????span{ 6 ????????????????display:inline-block; 7 ????????????????width:100px; 8 ????????????????height:100px; 9 ????????????????background-color: red;10 ????????????????font-size: 50px;11 ????????????????vertical-align: -15px;12 ????????????}13 ????????</style>14 ????</head>15 ????<body>16 ?????????<span>This</span>哈哈17 ????</body>4.如何实现像淘宝这样的导航栏，一行文字中的内容一部分靠左，一部分靠右，实际上也很简单，最外层是一个大盒子，里面有两个小盒子，然后一个向左浮动，一个向右浮动就OK了，基本上都是这么实现的，如下所示：
1 ????<body>2 ?????????<div>3 ?????????????<ul style="float: left"></ul>4 ?????????????<ul style="float: right"></ul>5 ?????????</div>6 ????</body>
CSS几个要点补充
原文地址：http://www.cnblogs.com/python-machine/p/8010719.html