CSS常见问题
我在使用CSS中遇到的一些问题，记录如下：
1、text-align:center无效，不居中
解决：如果不是文字，还得加上
margin:auto;
width:100%;
max-width:400px;（以自适应化代码为例，也可以直接使用width:400px;）
2、li不对齐，加入：margin:0即可
3、li宽度自适应：
电脑展示多列，手机浏览宽度不够，自动换到下一行（参考网海拾贝）
一种是文字不限制宽度：
.linkbox ul{width:100%;}
.linkbox ul li{
float:left;
border:1px solid #DBDBDB;
text-align:center;
line-height: 200%;
list-style:none;
margin:5px 10px 5px 0;
}
一种是文字长度等宽：
.linkbox { float:left; width:100%;}
.linkbox li{width:180px;
/* 总宽度960px，超过180px，手机浏览一个li一行。如果设置20%，手机浏览五个一行，过密 */
height:40px;
line-height:40px;
float:left;/* 必要 */
text-align:left;
overflow:hidden;}
4、CSS代码制作跟随滚动的顶部导航栏
要求：顶部只有一个且只需要移动一个导航栏
实现思路: 给导航栏添加固定定位(fixed)，这时候脱离了标准流浮动起来了;
问题: 底下的盒子会往上跑占据导航栏原来的位置
解决办法: 给导航栏下面的盒子添加顶部内边距(padding-top)，值等于导航栏的高度。
.top-nav {
/*顶部导航栏*/
background: rgba(244, 245, 246, .95);
position: fixed;/*这里是关键*/
width: 100%;
height: 100px;
z-index: 10;}
.banner {
/*滚动广告幅*/
padding-top: 100px;
margin: 0 auto;
width: 1920px;
height: 711px;
position: relative;}
5、电脑端的浏览器缩小到最窄，可以预览网页在手机上的效果。
如果发现哪些元素需要修改，却找不到，可以使用火狐浏览器+Firebug来定位div，再修改。
6、为什么dw打开显示的效果和浏览器打开不同？
原因之一：
这样写dw不能正常显示：<footer><p>麦田</p></footer>
这样写dw正常显示：<div class="footer"><p>麦田</p></div>
7、li前面的实心圆超出边框
解决：对 ul 加个padding-left: 10px；
8、普通<span style="color:#6C0">一段话中某些字体颜色不同</span>颜色
普通<span class="red">其他颜色的字</span>颜色
.red{ color:#F00}
9、少数内容链接使用特殊的css
html部分：<p class="big"><a href="com/" >商城</a></p>
css部分：
.big a:link{
font-size: 22px;
text-decoration:none;
color:#FF6A6A;
line-height: 200%;
target:new front;
}
.big a:hover{
font-size: 22px;
text-decoration:underline;
color:#FF6A6A;
}
如果是<a href="com/" class="abig" >商城</a>，css部分就要去掉big后面的a字母
