盒子模型包括: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边框重叠颜色设置问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。