css table設定邊框_CSS 盒模型

1.什麼是css模型？

css的盒模型由裡到外包括：content,padding,border,margin4部分,如圖所示。

css的盒模型有兩種：

IE盒模型和标準盒模型

。

2.兩種盒模型的差別

• W3C标準盒子模型(content-box)：内容就是盒子的邊界。
• W3C标準盒子模型(content-box)： width=内容寬度
• IE盒子模型(border-box)：邊框才是盒子的邊界。
• IE盒子模型(border-box)： width=内容寬度+padding+border

3.如何設定兩種盒模型

在不設定box-sizing的情況下，box-sizing預設是content-box。

/* 标準模型 */
           

4.margin合并

margin合并：如果兩個box都設定了外邊距，那麼在垂直方向上，兩個box的外邊距會發生重疊，以絕對值大的那個為最終結果顯示在頁面上。

哪些情況會發生margin合并

• 父子margin合并

如果子元素設定了外邊距，在沒有把父元素變成BFC的情況下，父元素也會産生外邊距，給父元素添加 overflow：hidden 這樣父元素就變為 BFC，不會随子元素産生外邊距，但是父元素的高會變化。

• 兄弟margin合并

同級（兄弟）元素在垂直方向上外邊距會出現重疊情況，最後外邊距的大小取兩者絕對值大的那個

注意：

行内元素沒有margin-top或margin-bottom，也就是說，在行内元素上設定margin-top或margin-bottom是不起作用的。

5.BFC

BFC(Fomatting Context)是塊級格式化上下文的意思。它是 CSS 2.1 規範中的一個概念，它決定了元素如何對其内容進行定位，以及與其他元素的關系和互相作用。

觸發BFC的條件

• 浮動元素(float除了node以外的值)
• 定位元素(position: absolute/ fixed)
• display(值為inline-block/ table-cell/- table-caption/ flex/ inline-flex)
• overflow(值為hidden/atuo/srcoll)設定有這些屬性的box，都會産生BFC

BFC特性

• 内部的盒子在垂直方向上一個接一個地放置
• 垂直方向上地距離由margin決定，在同一個BFC的box中，相鄰的兩個box邊距會重疊
• BFC的區域不會與float box重疊
• 計算BFC的高度時，浮動元素也參與計算
• BFC就是一個獨立的容器，裡面的子元素不受外面的元素影響

BFC的作用 1.解決margin重疊問題（添加獨立BFC）

看下面例子

未設定BFC之前

CSS代碼
 .child{
    width: 100px;
    height: 100px;
    background-color: orange;
    margin: 30px;
}
​
html代碼
<div class="child"></div>
<div class="child"></div>           

設定BFC後

CSS代碼
.child{
    width: 100px;
    height: 100px;
    background-color: orange;
    margin: 30px;
}
.bfc{
    overflow: hidden;
}
​
html代碼
<div class="child"></div>
<div class="bfc">
    <div class="child"></div>
</div>           

設定BFC後，第一個child的margin-bottom不會和第二個child的margin-top重疊，這也是BFC元素的另一個原則，不會影響到外邊的box，是一個獨立的區域。

效果圖對比

2.解決浮動高度塌陷問題（在父元素添加overflow：hidden）

當我們不給父元素設定高度，子元素設定了浮動的時候，會發生高度塌陷，代碼和效果圖如下。

效果圖：

CSS代碼
.father {
    border: 5px solid rgb(91, 243, 30);
    width: 460px;
    
}
.child{
    width: 200px;
    height: 200px;
    border:5px solid orange;
    float: left;
}
​
html代碼
<div class="father">
    <div class="child"></div>
    <div class="child"></div>
</div>           

當我們在父元素的樣式中加入overflow：hidden，就能解決float高度塌陷問題。

CSS代碼
.father {
    border: 5px solid rgb(91, 243, 30);
    width: 460px;
    overflow: hidden;
}
.child{
    width: 200px;
    height: 200px;
    border:5px solid orange;
    float: left;
}
​
html代碼
<div class="father">
    <div class="child"></div>
    <div class="child"></div>
</div>           

效果圖就會發生變化

以上便是對CSS盒模型的了解，如有不對的地方，請指出。