margin是可以三个参数的诶，有对称原则。
他说要少用float
绝大多数网站的主流文字大小为12px。 用户的浏览器默认渲染的文字大小是“16px”，那么12px也即是0.75em
实现一种选项卡：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nav1</title>
<style type="text/css">
/*横版显示*/
ul,
li {
margin: 0;
padding: 0;
}
ul#nav {
border: 1px solid cadetblue;
height: 500px;
}
ul#nav li {
display: inline-block;
margin-top: -1px;
margin-left: -1px;
margin-right: -6px;
}
ul#nav li a {
/*不管怎么作 a都是被限制在li中的*/
display: block;
border:1px solid cadetblue;
width: 100px;
height: 2em;
line-height: 2em;
text-align: center;
background-color: aliceblue;
color: cadetblue;
}
ul#nav li a:link {}
ul#nav a:visited {}
ul#nav li a:hover {
background-color: white;
border-bottom-color: white;
}
ul#nav li a:active {}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">技术</a></li>
<li><a href="#">生活</a></li>
<li><a href="#">作品</a></li>
</ul>
</body>
</html>
Q&A：
如何处理inline的margin呢？
inline和inline-block的区别？
* display:block
1.block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
2.block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
3.block元素可以设置margin和padding属性。
* display:inline
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
* display:inline-block
1.简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
案例分析：
1
ul#nav li {
display: inline;
border: 1px solid cadetblue;
margin-right: -6px;
}
ul#nav li a {
/*不管怎么作 a都是被限制在li中的*/
display: block;
width: 100px;
height: 2em;
line-height: 2em;
text-align: center;
background-color: aliceblue;
color: cadetblue;
}
（这种情况是为啥）
2
ul#nav li {
border: 1px solid cadetblue;
margin-right: -6px;
}
ul#nav li a {
/*不管怎么作 a都是被限制在li中的*/
display: block;
width: 100px;
height: 2em;
line-height: 2em;
text-align: center;
background-color: aliceblue;
color: cadetblue;
}
结果示意图：
两栏均浮动，左边加上
边框后 右栏位置不受影响故可能会产生重叠
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
