CSS 區塊模型是CSS 必學的基本觀念. 但是很可惜現在很多框架的輔助, 很多人都不知道這個基本觀念. But don't worry, 我現在來幫你複習.

Border-Box vs Content-Box

CSS 區塊有兩個屬性border-box 跟 content-box. Border-Box代表這個區塊padding 跟 border 都含在區塊裡面. Content-box 代表這個區塊padding 跟 border 不包含在區塊裡面. 在古早的時候(IE8以前)區塊是只有content-box, 所以以前切版很可憐, 必須把每一個區塊的padding 跟border 算好, 不然就會跑版. 現在有border-box 就不會有這個問題了.

分享一個小配步, 我會在我的css stylesheet 把所有的元件改成border-box屬性. 這樣就不用擔心content-box 的問題.

// * 代表說有的元件
* {
    box-sizing: border-box;
}

這是w3cschool的demo 這可以看到一樣的height跟width 但是用了不同屬性, size 就差那麼多.連結

Block vs inline

每個元件都會有一個display 屬性, 大部分都是 block 或 inline. Block 會以區塊方式呈現 , 並盡可能的撐滿容器. Inline均不換行, 同一行的意思. 有Block預設的元件有 , , , . 有inline預設的元件有, ,

如果inline屬性需要block 的特質譬如 width, height, margin (除了margin: auto 不行)
比如你如果要一個佔整行的button,你需要把inline-block 改成 block. 你可以來這裡玩玩看. 連結

// 原來

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

// 整行
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: block;
    width: 100%;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

參考連結

• Shayhowe - Opening the Box Model
• Learn Layout
• w3c HTML block