almost 3 years ago

Css Box Model 規定了Element處理元素ContentPaddingbordermargin的方式 。

Box Model基本概念

這張圖就是在說明一個Element元素的Box Model,紅色框範圍內表代為Element內的各屬性距離,而橘色框的代表ElementElement之間的距離。

來看看下列的Html與Css

<!-- html -->
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

--------------------------------
<!-- Css -->
.box1{
    padding:10px;
    border: 5px solid red;
    margin:10px
}

顯示如下,其中Box 1文字到框線的距離為padding 10px,然後框線的寬度為5px
最後Box1Box2的距離為margin 10px

Chrome ToolsElements Style 的結果如下。

Box Model的寬度

如果在一個Element設置width,那麼該Element的寬度是指Box Model的那個範圍呢??根據W3C的標準定義Content Width,如下面Css我們在增加width:500px屬性。

.box1{
    width:500px
    padding:10px;
    border: 5px solid red;
    margin:10px
}

結果如下,width:500px所指的為content width,也就是Element的內容寬度。

Box-Sizing屬性

在上一段文章中有提到,在Element上增加width屬性實際上是指content width
所以有時後有人會很疑惑,明明寬度設了500pxXXXpx卻還是超過,這往往是Box Model不熟悉的問題。

Box-Sizing屬性的border-box值,就是指將width屬性從content width改成content + padding + border 的 with,如下Css,我們新增加了box-sizing : border-box

.box1{
    box-sizing : border-box
    width:500px
    padding:10px;
    border: 5px solid red;
    margin:10px
}


參考資料

← HTML5之走在平行時空的Web Worker CSS-Position觀念 →
 
comments powered by Disqus