盒子模型包括:margin border padding content
在标准盒子模型中 conten不包括border和padding 就是他自身内容所包含的区域。
在IE盒子模型中 content包括border和padding 是内容和border padding之和。
关于盒子边框重叠颜色设置问题：
//就拿下列标签来说
房产家居二手房房
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
ul{border-bottom:2px solid #6e442c;
height:28px;
width:400px;
display: inline-block;
}
效果如下：
再缩小ul的高度：
把颜色设置为#fff 白色：
。
由此可见content内容区域的大小是固定不变的。border变大也只是外面去增加，而不会往里面增加。
给父元素设置高度的时候，只要border的宽度超过父元素ul的时候就会覆盖父元素的边框。
刚好覆盖如何设置：
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覆盖？
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往外退 效果如下：
27.给input边框和背景颜色设置全透明
给input边框和背景颜色设置全透明,但是里面的字不会消失 1.让背景颜色变透明(二选一) background-color:rgba(0,0,0,0); background:rgba(0,0,0, ...
7.css3表格、列表、边框的样式设置--list/border
1.css表格: ①Border-collapse是否把表格边框合并为单一的边框.Separate默认值,collapse合并. ②Border-spacing分割单元格边框的距离. ③Caption ...
poi生成excel整理(设置边框/字体/颜色/加粗/居中/)
转: poi生成excel整理(设置边框/字体/颜色/加粗/居中/) 12月02日 11:05:23 吃奶的牛 阅读数:34324 HSSFWorkbook wb = new HSSFW ...
iPhone 6/plus iOS Safari fieldset border 边框消失
问题:iPhone6 plus 手机浏览网页,fieldset border 边框消失. 示例代码:
