盒子模型包括:margin border padding content
在标准盒子模型中 conten不包括border和padding 就是他自身内容所包含的区域。
在IE盒子模型中 content包括border和padding 是内容和border padding之和。
关于盒子边框重叠颜色设置问题：
代码语言：javascript复制//就拿下列标签来说
<ul>
<li class="on">房产</li>
<li>家居</li>
<li>二手房房</li>
</ul>
css:
li{list-style: none;
display: inline-block;
border: 1px solid #4c6fe2;
border-bottom: none;
width:80px;}
ul{border-bottom:2px solid #6e442c;
height:px;
width:400px;
display: inline-block;
}
.on{
border-bottom:40px solid red;
} 因为ul没设定宽度所有加border的时候会撑开父元素宽度：效果如下
给父元素ul设置height
代码语言：javascript复制ul{border-bottom:2px solid #6e442c;
height:28px;
width:400px;
display: inline-block;
}效果如下：
再缩小ul的高度：
把颜色设置为#fff 白色：
。
由此可见content内容区域的大小是固定不变的。border变大也只是外面去增加，而不会往里面增加。
给父元素设置高度的时候，只要border的宽度超过父元素ul的时候就会覆盖父元素的边框。
刚好覆盖如何设置：
代码语言：javascript复制li{list-style: none;
display: inline-block;
height:28px;
border: 1px solid #4c6fe2;
border-bottom: none;
width:80px;
}
ul{border-bottom:2px solid #6e442c;
height:29px;
width:400px;
display: inline-block;
}
.on{
border-bottom:2px solid red;上面把li的border-top设置为1px height设置为28 没有设置padding和下边框 那么只要把ul height设置为28 1 的时候 再把li的border设置为1px solid #fff；
时候刚好可以覆盖ul的的下边框。如下：
如果li没设置height怎么实现border覆盖？
代码语言：javascript复制 li{list-style: none;
display: inline-block;
border: 1px solid #4c6fe2;
border-bottom: none;
width:400px;
}
ul{border-bottom:2px solid #6e442c;
height:29px;
width:400px;
display: inline-block;
}
.on{
border-bottom:2px solid red;
padding-bottom:10px;
}可以设置padding-bottom，把border往外退 效果如下：
