老师好，下边代码有4个问题需要请教下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
/*头部导航栏部分*/
.head{
width:100%;
height:100px;
background-color:black;
position: fixed;
top: 0;
}
.head img{ float: left; }
.head ul{
list-style: none;
margin-right: 30px;
float: right;
/*问题一：为什么这里设置浮动了还能对margin值进行设置，
* 脱离了文档流动的元素不能使用margin：0 auto进行居中设置不是吗？*/
}
.head ul li{
float: left;
height: 100px;
line-height: 100px;
padding: 0 10px;
}
.head ul li a{
text-decoration: none;
color: white;
}
/*中间主体图片部分*/
.body-top,.body-middle,.body-footer{
width: 100%;
font-size: 0;
/*问题二：为什么font-size能解决图片间隔空白的问题？*/
}
.body-top img,.body-middle img,.body-footer img{
width: 100%;
}
/*问题三：为什么使用下边position的形式不能达到固定导航栏的效果？*/
.body-top{
margin-top: 100px;
/*position: relative;
top: 100px;*/
}
.body-footer{ margin-bottom: 100px;}
/*页脚部分*/
.footer{
width:100%;
height:100px;
background-color:black;
position: fixed;
bottom: 0;
text-align: center;
}
.footer ul{
list-style: none;
margin: 0 auto;
}
.footer ul li{
height: 90px;
line-height: 90px;
padding: 0 10px;
/*问题四：无法居中
* position: absolute;
* left:0;
* right:0;
* margin: 0 auto;*/
float: left;
}
.footer ul li a{
text-decoration: none;
color: white;
}
</style>
</head>
<body>
<!--头部导航栏部分-->
<div class="head">
<a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" /></a>
<ul>
<li><a href="#">课程</a></li>
<li><a href="#">职业路径</a></li>
<li><a href="#">猿问</a></li>
<li><a href="#">实战</a></li>
<li><a href="#">手记</a></li>
</ul>
</div>
<!--中间主体图片部分-->
<div class="body">
<div class="body-top">
<img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg" />
</div>
<div class="body-middle">
<img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg" />
</div>
<div class="body-footer">
<img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg" />
</div>
</div>
<!--页脚部分-->
<div class="footer">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">企业合作</a></li>
<li><a href="#">人才招聘</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">友情链接</a></li>
</ul>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
同学，你好。
问题一：设置了浮动，确实不能使用margin：0 auto实现居中设置，但是单独的对margin值操作是可以的，比如margin-left，margin-right，margin-top，margin-bottom都是可以进行设置的。
问题二：所有display属性为inline ， inline-block 的盒模型都会有文字特性，间距就是由于两个标签之间的空白引起的。img的display属性为inline,因此img标签也有文字特性，设置font-size：0，可以解决文字之间的空白，因此img之间的空白也可以消除。
问题三：同学，你好。position属性的各个属性值作用是不一样的，
fixed是固定定位，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative是相对定位，生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
它们定位的对象不同，因此实现的效果也是不同的。
问题四:底部导航实现居中应该给ul设置固定的宽（各个li的宽加边距），然后设置margin：0 auto，如图：
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧