html border线条重叠,关于border边框重叠颜色设置问题
盒子模型包括: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整理(設置邊框/字體/顏色/加粗/居中/) 2016年12月02日 11:05:23 吃奶的牛 閱讀數:34324 ? HSSFWorkbook wb = new HSSFW ...
iPhone 6/plus iOS Safari fieldset border 邊框消失
問題:iPhone6 plus 手機瀏覽網頁,fieldset border 邊框消失. 示例代碼:
總結
以上是生活随笔為你收集整理的html border线条重叠,关于border边框重叠颜色设置问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 三顾讯时--对讯时新闻发布系统的艰难突破
- 下一篇： TVLoss理解