盒模型

時間 2019-11-07

標籤模型简体版

原文原文鏈接

　　學一點前端頗有必要，簡單總結下。css

　　在咱們網頁上的每個元素，一個按鈕，一段文本，一張圖片等等，瀏覽器都將它們當作一個「盒子」看待，並把這樣的盒子稱爲盒模型（box model）。既然是模型，一定有矩可循，若是各不相同就不能叫模型了。html

　　使用Chrome（固然FireFox也行）的右鍵->審查元素對某個網頁上的元素看下，就可獲得相似這樣一張圖，這就是盒模型的縮影了。前端

　　組成盒模型主要是這幾個要素：外邊的外邊距margin、中間的邊框border、裏邊的內邊距padding（我的喜歡叫內填充）（再往裏就是包圍元素實體的寬、高了）。在padding這個塊裏面，包括實體元素的寬高，就是背景background橫行的地方，通常咱們所添加的背景圖片、背景顏色會充滿padding這裏面的一塊區域，因此padding變大，背景會跟着擴張，固然前提是沒有精確控制背景的位置、平鋪方式等參數。瀏覽器

　　CSS的盒子是包括margin的，可是按照人的看圖思考方式，至少我以爲將border到裏邊看作成生活中的盒子更符合常理嘛。我情願把CSS的盒子轉換成生活中的盒子，固然這個盒子能夠隨時改尺寸，border是盒子邊框厚度，width跟height規定盒子中放的物體的寬高，至因而不是剛好等於實際物體的寬高本身定，小於的話就以實際物體爲準了，padding規定盒子的邊框到盒子裏面堆放物體的範圍（寬x高，上圖中藍色區域）的距離，設置一個padding值，避免內容被生硬的裝在盒子中，與邊框保持一點距離，能夠顯得不那麼擁擠，因此border和padding是不能爲負值的，硬給一個負數瀏覽器也歸爲零。margin是規定其餘的標籤與本標籤的距離，即其餘的盒子與本盒子之間的邊距，彷彿是在宣誓主權：方圓xx距離的地方是爺的地盤，別過來！固然有時並不是如此，由於margin能夠爲負值。less

　　從圖中看出，CSS的盒模型是四四方方的，因此對盒子的修飾的margin、border等是有四個方向的。好比margin樣式的添加，一般是這樣：優化

    margin: 5px;
    margin: 5px 10px;
    margin: 5px 10px 15px 20px;

　　第一種是上下左右均爲5像素，第二種是上下5像素，左右10像素，第三種最具體的，順序上（margin-top）、右（margin-right）、下（margin-bottom）、左（margin-left）的設置外邊距，順指針轉，上在前，因此記不清第二種的是上下5像素仍是左右5像素就很好辦了，反正順時針轉，上最早開始，因此第二種寫法前面天然就是指上下外邊距了。固然也可針對各個具體的方向具體設置。網站

　　若是設置爲auto就是讓瀏覽器自動給值了，好比當要使某段居中時能夠這樣（倔強的不考慮-IE6+，不想碰這個魔鬼）搜索引擎

    .txt{
　　　　　width:760px;
         margin:0 auto;    
    }

　　上下外邊距是0，左右邊距是auto，意在讓瀏覽器本身計算，瀏覽器根據當前父元素寬度，假定就是body，來把760像素寬的元素放在上面，並計算保證它的左右邊距的差值始終爲0，因此類名爲txt的元素就在網頁上居中了。url

　　仍是先說盒子，瀏覽器將每個元素都當盒子來處理，但不是全部的盒子都同樣，主要分兩種類型：行內盒子（inline box）和塊級盒子（block box）。它們對應着兩種標籤：行內標籤和塊級標籤。塊級標籤的先後會產生一些空格，如div、h一、p、table等，先後會直接換行，若是不作處理，它們老是單獨霸佔一行，而行內標籤先後不會產生空格，不作處理時標籤後邊有多少內容就接多少，好比strong、em、a、input等。spa

　　大多數狀況，瀏覽器對這兩種盒子的處理是一致的，都可添加左右外邊距、左右邊框、左右內填充，且真正作到與其餘元素隔開必定的距離，margin-top爲10像素時，真的就離上邊的對象10像素遠。可是有一種狀況例外，能夠試試下面代碼：

<!DOCTYPE html>
<html>
    <head>
        <title>inline test</title>
        <style type="text/css">
            .segment{
                width:400px;
                margin:0 auto;
                padding:5px;
                border:2px solid #509ddd;
            }
            .txt{
                margin:10px;
                padding:10px;
                border:1px solid #e61f44;
            }
        </style>
    </head>
    <body>        
        <p class="segment">
            The human species' use of technology began with the conversion 
            of natural resources into simple tools. The prehistorical 
            discovery of the ability to control <strong class="txt">fire increased</strong> the 
            available sources of food and the invention of the wheel helped humans in 
            travelling in and controlling their environment. Recent technological 
            developments, including the printing press, the telephone, and the 
            Internet, have lessened physical barriers to communication and allowed 
            humans to interact freely on a global scale.
        </p>
    </body>
</html>

　　選擇一段文本中間的幾個單詞用strong標籤修飾，給了一個類txt，整段文字居中，strong包圍的單詞在樣式分別給了margin、padding、border，是否是這兩個單詞的上下左右都會有必定的間距？效果

　　能夠看出fire increased的左右確實增長了margin和padding，由於紅色邊框左右都有一些空白，margin和padding是以border爲邊界，上下的border邊框則直接與上下的文本重合了，padding給了卻沒有產生間距，這就是由於span是行內標籤（inline），對待行內標籤，上下邊距給了也是白給，不會產生效果，這是行內標籤的特性（我還曾傻傻的使勁增大margin=_=），固然這個地方能夠用line-height來增大行間距。

　　而塊級標籤就不一樣，瀏覽器把它當成一個總體，一個塊，因此它的先後有換行，它的margin、padding不管哪一個方向都起做用，都會產生距離。天生就是行內標籤怎麼辦，難道註定一輩子上下受欺壓？固然不是，css有個屬性display，展現方式，好比當它爲none時能夠將元素總體隱藏起來，它還有另外的值，如block、inline、inline-block...若是給上邊的txt類添加display:block;屬性值，它會單獨佔一行，也許給它加個背景更醒目，效果

　　還有一種inline-block，字面意思是行內塊，不妨將上面的txt類選擇器中的display值改成inline-block看看

　　改成inline-block屬性值後，它的先後沒有換行，可是在這一行內它的margin、padding都產生了效果，因此它是介於inline和block之間的一種，既能維持在一行以內，先後不換行，還能在這一行內被當作是一個塊，看上去就像是這一行跟其餘的行的行間距相比變大了，由於他的間距，行內其餘的單詞也跟上下隔開了。

　　這就是三種主要的display狀態，對於日常簡單的應用夠了，固然它還有其餘值，都去看不整死我的-_-

　　元素背景，頗有意思，上面說過，background是跟着padding的大小走的，若是你沒有精確控制背景的位置，好比簡單設置一個background-color

<html>
  <head>
    <title>background</title>
    <style type="text/css">
    * {
      margin:0;
      padding:0;
      border:0;
    }
    #d1 {
      width:100px;
      height:100px;
      padding: 10px;
      background-color:red;
    }
    </style>
  </head>
  <body>
    <div id="d1"></div>
  </body>
</html>

　　用Chrome的審查元素查看（或者Firefox的查看元素），padding爲10px，雙擊它逐漸增大或減少，就能夠看到，background-color是跟着padding走的，padding變大顏色塊跟着變大，padding值不能爲負，強制給padding一個負數的話，是不合法的，border也是如此。

　　background的簡寫是相似這樣的

    background:url(images/bg.png) no-repeat 1px 1px #deddd6;

　　掛一個背景圖片，圖片路徑在url參數的括號裏，不重複顯示，位置在距左內邊距（padding）1像素，距上內邊距1像素，若是這個圖片不存在，則使用最後一個十六進制顏色填充。這裏對背景圖片作了精確控制，距上邊1px，左邊1px，這個值能夠是百分比，如0%距頂部0像素，50%則是把圖片的中間放在元素上，奇妙的是這裏的距離值能夠給負數，因此可使得背景圖片只在元素中顯示一部分，甚至將圖片移出元素，能夠試試。這點很重要，好比在有的網站的導航時，進入網站是一個圖標，鼠標滑過（hover）時換成另外一個圖標，就能夠這樣弄

<html>
  <head>
    <title>background</title>
    <style type="text/css">
    * {
      margin:0;
      padding:0;
      border:0;
    }
    .link{
      width:32px;
      height:34px;
      display:block;
      padding-left: 28px;
      text-decoration: none;
      background:url(./CSS2e_MM/09/nav_bar/images/nav.png) no-repeat 0% 0%;/*中間時以背景圖中心點爲準*/
    }
    a.link:hover{
      background:url(./CSS2e_MM/09/nav_bar/images/nav.png) no-repeat 0% 50%;
    }
    </style>
  </head>
  <body>
    <a class="link" href="#">link</a>
  </body>
</html>

　　進入頁面是這樣，鼠標滑過期是這樣，真正的背景圖（nav.png）實際上是這樣。

　　核心就在於，鼠標滑過連接時（a.link:hover選擇器），好比這裏，將背景圖的位置，距離頂部設置成50%，即將圖片的中間，css會保證背景圖片的中心點位於元素的中間（這裏背景圖片的高度是大於當前a標籤的高度的），所以只是可視位置移了一下而已，就可達到一個動態效果，圖片總體仍是一張，這就是由於背景圖片的可視範圍是padding所指定的區域，出了這個範圍咱們就看不到了，其實不少網站都用到了。背景處在它所在的標籤下方，會遭到元素內容的覆蓋。

　　元素的寬高，不設置時，默認爲自適應元素的所佔的實際寬高值，好比直接p標籤貼上一段文本，可是網頁上常常分塊放置，每一塊都是寬高是計算好的，特別是有時真實圖片可能太大，用img標籤裝載一張圖，設置一個小的width和height，網頁上顯示的就是一張縮小後的圖片，固然也能放大。因此咱們看到的圖片大小可能不是真實的圖片尺寸。關於寬高的一個常見的現象，就是溢出，好比

<!DOCTYPE html>
<html>
    <head>
        <title>inline test</title>
        <style type="text/css">
            .segment{
                width:200px;
                height:100px;
                margin:0 auto;
                padding:5px;
                border:2px solid #509ddd;
            }
        </style>
    </head>
    <body>        
        <p class="segment">
            The human species' use of technology began with the conversion 
            of natural resources into simple tools. The prehistorical 
            discovery of the ability to control fire increased the 
            available sources of food and the invention of the wheel helped humans in 
            travelling in and controlling their environment. Recent technological 
            developments, including the printing press, the telephone, and the 
            Internet, have lessened physical barriers to communication and allowed 
            humans to interact freely on a global scale.
        </p>
    </body>
</html>

　　　　效果：

　　對於這種溢出，由於寬高可能設置過小，可使用overflow屬性，它有幾個經常使用值：hidden（隱藏）、scroll（滾動條）、auto（自動，超過寬高範圍自動出現滾動條），好比scroll

　　也能夠設置hidden，將超過範圍的內容隱藏掉，這就徹底看狀況了。

　　對於邊框，它是分隔margin和padding的一道牆，也能夠說背景是以它爲界的。border的設置跟其餘的相似。border屬性值的設置有個特色就是，若是沒有設置邊框線的風格，邊框線便不會出現，風格沒有默認值，因此能夠是border:1px solid;，黑色爲默認邊框顏色，但不能是border:1px #f00;，border:1px;就更不行了。固然你也能夠單獨設置樣式border-style、寬度border-width、顏色border-corlor，更具體的是針對某一邊的設置，如border-top-style，設置頂邊框的樣式等等。

　　對於margin，也是個有意思的東西，有意思的地方在於，它能夠是負值。通常的，咱們會設置一個正的margin值來進行「主權宣誓」，讓別的元素離它遠點，好比下邊

<!DOCTYPE html>
<html>
    <head>
        <title>margin test</title>
        <style type="text/css">
            .spanA{
                margin:5px;
                padding:5px;
                background-color:#accedd;
            }
            .spanB{
                margin:5px;
                padding:5px;
                background-color:#66cdaa;
            }
        </style>
    </head>
    <body>
        <span class="spanA">Hello</span>
        <span class="spanB">World</span>
    </body>
</html>

　　效果：

　　若是讓World所在的區域的margin爲負值會怎樣？修改spanB選擇器裏邊的margin值

　　.spanB{
        　　margin:-35px;
        　　padding:5px;
        　　background-color:#66cdaa;
       　 }

　　效果：

　　第二個單詞與第一個重疊，甚至覆蓋了它，因此對於第二個元素來講，形象點就是，「即使你驕傲的拒絕，我也要穿越人海找到你」（電視劇中常常發生），第一個元素是本能的拒絕的，由於它的margin爲正，已經告知別的元素請離我5像素的距離，但第二個元素的margin爲負，壓根不聽。若是再變化一下，好比像兩個選擇器的屬性值調整成下面的

　　.spanA{
        　　margin:5px;
        　　margin-left:40px;
        　　background-color:#accedd;
      　　}
　　.spanB{
        　　margin:-95px;
        　　background-color:#66cdaa;
      　　}

　　效果：

　　第一個和第二個元素的位置徹底對調過來了，可是原來html代碼沒有變，實際上World是在Hello的前面。因此頗有可能咱們看到的一些網站，好比左邊一個側邊欄，中間一塊主要內容，右邊可能還有一個側邊欄，看起來展現是這樣的順序，實際擺放的html源碼卻不是這樣，可能主要內容那一塊是在最前面。這麼作固然有優化的考慮，有的網頁內容太多，搜索引擎一次收錄的內容是有限的，可能到網頁中某個部分就中止了，搜索引擎讀取的就是html源碼，除了通常的meta標籤設置keywords、description提升網站識別度，主要內容也可能更能體現出這個網站的內容相關性，因此將主要內容這一塊源碼放在靠前的位置更能起到優化（seo）的做用，這是很是有意義的，固然了，也挺折騰=_=

　　既然margin爲負，能夠將元素提到其餘元素前面，那繼續給它大一點的負值呢，元素極可能就偏離出視區了，給隱藏掉了，就像背景圖片的精肯定位同樣，也能夠隱藏。好比給spanB的margin給一個-200px，就會發現World不見了，它就是偏到瀏覽器「外邊」去了，讓它暫時「消失不見」，可是它仍在代碼中，這點就頗有意思，好比下邊這個

　　如今有三個按鈕：綜合、公告、活動，每一個欄目下邊新聞條目幾乎沾滿這個寬度，是固定的，點擊公告時，當前新聞列表往左一拉，公告列表從右往左出如今視區中，原來的綜合列表新聞向左一拉消失不見了，css中有個left屬性，表示元素距離父元素左邊距的值，也能夠給負值，負值也會讓本元素偏離視區，想象一下，本來綜合、公告、活動三項對應下面的新聞列表已經存在於網頁之上，只是咱們看不到而已，如今點擊下公告（js更改left屬性），就將left的值設爲這一個塊的寬度值，只不過是負數，那麼原來的綜合列表向左一拉就「消失」了，出如今眼前的是公告下的列表，但實際上，它們早已存在，這就是一個負值有趣的應用了，跟margin給負值很像吧，感受被戲弄了-_-#

　　關於margin還有一點注意的地方就是：邊距衝突。看效果

<!DOCTYPE html>
<html>
    <head>
        <title>margin test</title>
        <style type="text/css">
            .back{
                width:760px;
                height:620px;
                margin:0 auto;
                border:2px solid #00a1f4;
            }
            .bloackA{
                width:100px;
                height:20px;
                background-color:red;
                margin-bottom:20px;
            }
            .bloackB{
                width:100px;
                height:20px;
                background-color:blue;
                margin-top:10px;
            }
        </style>
    </head>
    <body>
        <div class="back">
            <div class="bloackA"></div>
            <div class="bloackB"></div>
        </div>
    </body>
</html>

　　若是用Chrome的審查元素，將鼠標放在兩個塊html代碼上，就是這樣

　　　　上一個: 下一個:

　　代碼裏給上一個塊設置了20px的margin-bottom，下一個塊設置了10px的margin-top，但它們在上下排列的銜接處，並非30px寬，而只有20px，也就是說下邊塊的margin-top與上邊塊的margin-bottom合併了，這即是邊距衝突。針對上下方向的margin邊距，大的與小的碰到一塊兒時，大的邊距會將小的邊距合併，因此兩個塊之間的上下距離並非簡單的邊距相加。CSS還起了個名字：邊距摺疊（collapsing margin）。如何避免還沒搞清楚，看某本書上說，各自添加一個border，或設置少許padding，但在Chrome上，貌似沒起到做用...

相關標籤/搜索

每日一句

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