關於border邊框重疊顏色設置問題

盒子模型包括:margin border padding content

   在標准盒子模型中 conten不包括border和padding  就是他自身內容所包含的區域。

   在IE盒子模型中    content包括border和padding   是內容和border padding之和。

   關於盒子邊框重疊顏色設置問題：

   

//就拿下列標簽來說 <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

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往外退 效果如下：