1、ul本身是块级元素，在实际运用中，我们不设定宽高的话，它的宽就是父元素的宽，它的高就是内容撑起来的高度。
2、在局部布局的时候，我们可以不用设定ul的宽度和高度，直接使用margin来巧妙布局。
3、上述如果设定了ul或者其他盒子的宽度以后，会出现一个问题就是margin-left的值过大，盒子接近了另外盒子的边缘，再设置margin-right的时候如果值超过显示的距离那么将无效。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
400px;
height: 250px;
border: 1px solid #E4E4E4
}
ul {
list-style: none;
padding: 0px;
margin-top: 20px;
margin-left: 10px;
border: 1px solid #eee;
margin-right: 10px;
}
li {
height: 29px;
line-height: 29px;
border:1px dashed #eee;
}
li.first{
color:red;
}
</style>
</head>
<body>
<div>
<ul>
<li class="first">首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
</ul>
</div>
</body>
</html>
效果：
