The CSS Box Model

簡單介紹下css和模型

前言：走進盒子，看看裏面的世界……

Box Model

二維盒子

大多數初學者心中的盒子都是二維的，就像下面這樣

那麼你在firebug下面看到的就是這樣的

具體代碼就實是下面這樣

<!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>margin3</title>
        <style style="text/css">
            body{
                margin: 0;
                padding: 0;
            }
            .margin3-box{
                margin: 10px;
                background-color: blue;
                border: 10px solid #0f9;
                padding: 10px;
                width: 240px;
                height: 240px;
            }
        </style>
    </head>
    <body>
        <div class="margin3-box"></div>
    </body>
    </html>

firebug下的情況：

我們通常使用下列的方式來計算盒子的大小：

size	number
Box of Width	width + padding-left + padding-right + border-left + border-right
Box of Height	height + padding-top + padding-bottom + border-top + border-bottom

三維盒子

如何設置我們的盒子呢？

如果你沒有設定margin、padding或者是border，系統就會默認爲0，但有的瀏覽器有自己的默認值（這些默認值不一定是0，所以我建議無論是否要使用這些值，請將他們他們重置爲默認值）

我們來看看幾個比較特殊的例子

1、默認width的塊級盒子且position = [static | relative | absolute]

如果你沒有聲明一個寬度（ Box of Width ），而且這個盒子的位置是靜態（static），或者是相對的（relative），那麼這個盒子（Box of Width）的寬度將會100%的填充在padding、border、width中，其是向內部延伸，而不是向外部。但是如果你明確的設置了一個盒子的寬度，那麼這個盒子的填充通常將會是向外部。

如果不是太明白，可以將下面的代碼複製進你喜歡的編輯器內，並運行它

<!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>margin2</title>
        <style style="text/css">
            body{
                margin: 0;
                padding: 0;
            }
            .margin2-box{
                margin: 10px;
                background-color: blue;
                border: 10px solid #0f9;
                padding: 10px;
                width: 1000px;
            }
            .static{
                position: static;
                margin: 10px 0 10px 300px ;
                background-color: red;
                border: 10px solid #0f0;
                padding: 10px;
                /*top: 20px; 
                left: 20px;*/
            }
            .relative{
                position: relative;
                margin: 10px;
                background-color: red;
                border: 10px solid #0f0;
                padding: 10px;
                /*top: 20px; 
                left: 20px;*/
            }
            .absolute{
                position: absolute;
                margin: 10px;
                background-color: red;
                border: 10px solid #0f0;
                padding: 10px;
                top: 20px;
                left: 20px;
            }
        </style>
    </head>
    <body>
        <div class="margin2-box">
            <div class="margin2-demo static"><pre>.static{
    position: static;
    margin: 10px 0 10px 300px;
    background-color: red;
    border: 10px solid #0f9;
    padding: 10px;
    /*top: 20px; 
    left: 20px;*/
}</pre></div>
            <div class="margin2-demo relative"><pre>.relative{
    position: relative;
    margin: 10px;
    background-color: red;
    border: 10px solid #0f9;
    padding: 10px;
    /*top: 20px;
    left: 20px;*/
}</pre></div>
            <div class="margin2-demo absolute"><pre>.absolute{
    position: absolute;
    margin: 10px;
    background-color: red;
    border: 10px solid #0f9;
    padding: 10px;
    top: 20px;
    left: 20px;
}</pre></div>
            <div class="margin2-demo"></div>
        </div>
    </body>
    </html>

效果圖應該是這樣的（爲了讓效果更易於明白，我把static的盒子margin-left設置爲300px）

當你運行了這段代碼，是不是更明白了呢

position屬性爲absolute的盒子的寬度是被內容撐大的，但是最終結果不盡如人意，原文處作者是這樣解釋的：

Absolutely positioned boxes that have no width set on them behave a bit strangely. Their width is only as wide as it needs to be to hold the content. So if the box contains a single word, the box is only as wide as that word renders. If it grows to two words, it’ll grow that wide.

This should continue until the box is 100% of the parent’s width (the nearest parent with relative positioning, or browser window) and then begin to wrap. It feels natural and normal for boxes to expand vertically to accommodate content, but it just feels strange when it happens horizontally. That strange feeling is warranted, as there are plenty of quirks in how different browsers handle this, not to mention just the fact that text renders differently across platforms.

2、默認width且浮動的塊級盒子

<!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>margin4</title>
        <style style="text/css">
            body{
                margin: 0;
                padding: 0;
            }
            .margin4-box{
                margin: 10px auto;
                background-color: blue;
                border: 10px solid #0f9;
                padding: 10px;
                width: 360px;
                height: 240px;
            }
            .margin4-box div:first-child{
                float: left;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="margin4-box">
            <div>
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
            </div>
        </div>
    </body>
    </html>

同樣精準的行爲也在沒有設定寬度的浮動元素上被發現。這個盒子僅僅和他容納的內容一樣寬，直到和他的父親元素一樣（並不需要去進行相對位置擺放）。由於這些缺少Width屬性的盒子有易碎的性質，所以我們不能輕易的拿走他們依賴的關鍵腳本，像是在整體的頁面佈局中。如果你懸浮一些列去當工具條，依靠一些元素（像是圖片）去對保持寬度負責，那我想你是在找麻煩。

3、內聯級元素

我們很容易就將塊級元素抽象化爲一個盒子，但是我們往往沒有想到聯機元素也是一個盒子，事實上確實如此。請將他們想象成一個非常非常長且非常非常細小的矩形，這些小矩形纏繞在每一行中。他們和其他的盒子一樣，同樣擁有margin, padding, border屬性。

這種包裝使得他變得模糊起來。也許你認爲一個左邊緣將一個盒子推到了右邊是不可信的，但是這個第一行是作爲這個盒子的開始。將背景屬性設置爲透明將能使你更加清晰的使用它。

參考以下博文：（感謝原博主的分享）

CHRIS COYIER原著
 耀耀翻譯版

節束語：人類絕大多數資料（原著）是英文文獻，所以說學好你的英語吧，騷年們！不要嘗試翻譯，不要嘗試翻譯，不要嘗試翻譯！對比原著和翻譯版你就知道了。。。。。。

Box Model

二維盒子

三維盒子

如何設置我們的盒子呢？

我們來看看幾個比較特殊的例子

1、默認width的塊級盒子且position = [static | relative | absolute]

2、默認width且浮動的塊級盒子

3、內聯級元素

移動端高清、多屏適配解決方案參考

學習MV*架構模式

javascript函數傳遞參數-----按值傳遞(google chrome)

2015（1025-1108）學習總結_AidanDai

javascript延長作用域鏈

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

The CSS Box Model

Box Model

二維盒子

三維盒子

如何設置我們的盒子呢？

我們來看看幾個比較特殊的例子

1、 默認width的塊級盒子且position = [static | relative | absolute]

2、默認width且浮動的塊級盒子

3、內聯級元素

1、默認width的塊級盒子且position = [static | relative | absolute]