css中的盒子模型

時間 2019-12-18

標籤 css 盒子模型欄目 CSS 简体版

原文原文鏈接

盒子模型

概念瀏覽器

所謂盒子模型，就像一個盒子，一個標籤就是一個盒子，能夠經過6大屬性（有margin（外邊距），border（邊框）,padding（內邊距），widht（寬度），height（高度），background（背景））來設置這個盒子。spa

典型的盒子模型

1.W3C的標準盒子模型

在標準盒子模型中，width指的是content
2.IE的盒子模型

在IE的盒子模型中，width表示content+padding+border這三部分的寬度。

塊級元素和行內元素與盒子模型的揪扯

對塊級元素來講，6大屬性都有做用
對行內元素來講，width，height不起做用，padding和margin再水平方向上有做用，在垂直方向上沒有做用。margin還具備重疊問題。

如何計算盒子模型在網頁上佔據的大小？這種盒子模型有什麼很差的地方？

在網頁上佔據的寬度：左右的margin+左右的padding+width
在網頁上佔據的高度：上下的margin+上下的padding+height
若是一個div沒有設置width，它佔父元素的100%。假如個人父元素是960px。div也佔960px。div的這個960是指div的內容寬度仍是指它在頁面上佔據的空間？960px = 左右的margin+左右的border+左右的padding+width這裏面的div佔960是指div所佔用的空間。那若是我把這個div又加了一個10px的邊框。那麼這個div的內容寬度width = 960-20px = 940px

代碼演示

<style>
.father{
    width: 960px;
    height: 100px;
    background: red;
}
.son{
    background: yellow;
    height: 50px;
}
</style>
<body>
<div class="father">
    <div class="son">
</div>
</div>
</body>
複製代碼

效果圖

爲何很差？

若是一個男盒子沒有設置寬度，它的寬度是父元素的100%，這裏的100%是指這個盒子所佔頁面寬度。若是又增長了這個盒子的margin,padding,border，那麼這個盒子的內容寬度必定會減少，若是margin,padding,border不斷地增長，盒子的內容寬度不斷地被壓縮，若是壓縮到了極限，瀏覽器會強迫你元素的寬度增長。因此默認狀況下的盒子模型也有不足之處。

margin的重疊

重疊前提：塊級元素垂直3d
兄弟元素之間的重疊：code
- 上盒子的margin-bootom和下盒子的margin-top 會重疊 ---> 取大優先
解決：塊級元素-->非塊級元素浮動設置一方盒子margin，不要兩個都設置cdn
父子（第1個子或最後1個子）元素之間的重疊：blog
- 父的margin-top 和子的margin-top ---> 取大優先it
- 父的margin-bottom 和子的margin-bottom ---> 取大優先io
解決：男-->非男 border paddingclass

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。