一篇文章帶你快速理解盒子模型【經典案例】

時間 2020-05-28

原文原文鏈接

今天帶你們快速理解盒子模型，直接上代碼：css

<!doctype html><html> <head> <meta charset="utf-8" /> <title>css盒子</title> <meta name="keywords" content="關鍵詞,關鍵詞" /> <meta name="description" content="" /> <link rel="stylesheet" href="css/index.css" /> </head> <body> <div>個人css盒子測試模型</div> </body></html>

上面代碼沒有任何難度，只是寫了一個div標籤，你們已經知道，div標籤是塊級元素，因此會佔滿一行：html

可是咱們也注意到了圖片的左側其實仍是有一些間隙的：面試

這個間隙在咱們預期中是不該該存在的，這種間隙基本上就是出在margin或者padding或者border上。瀏覽器

咱們先看開發者工具的右側：less

上面有一個element.style{}，下面有一個div標籤的屬性，默認display: block。上面那個是幹什麼用的呢？咱們修改一下代碼：工具

<div style="border: 1px solid red">個人css盒子測試模型</div>

而後再刷新頁面看：測試

這下咱們就知道了，這個element.style就是咱們寫在代碼裏的屬性。可是咱們通常不會這麼寫，也就是你們在寫代碼的時候把全部屬性都放到css文件中爲好，不要讓這個element.style有任何內容。spa

下面還有一個方框：3d

這個框就是目前這個css盒子的具體屬性，好比寬度等信息。code

margin：外邊距
border：邊框
padding：內邊距

也就是說一個完整的盒子模型大小是由這三個參數值共同決定的。如今咱們修改代碼：

lesson4.html

<div id="mydiv">個人css盒子測試模型</div>

原代碼不變，只是給div加一個id。

index.css

*{}#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff;}

而後咱們刷新頁面：

下面盒子區域也會隨之變化：

咱們看到內容區域大小變成了100*100，而padding、border、margin都爲0，咱們來修改這三個值，再看效果：

*{}#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; padding: 10px;}

盒子大小由原來的100*100變爲120*120了。

padding爲內邊距，咱們看到文字和邊緣有了10像素的距離：

從上面圖片看到，padding屬性也是分爲上下左右的，因此這個padding實際上是分爲padding-left、padding-right、padding-top、padding-bottom。

若是四個方向邊距都不同，咱們寫四個有點太累贅了，因此咱們能夠這樣寫：

padding: 10px 20px 30px 40px;

能夠看到，四個值從左到右分別表明：上、右、下、左，也就是順時針走的邊距。只要這樣寫的方式，都是這種順時針表明的。

若是你寫

padding: 10px 20px;

就表明上下10px，左右20px。

這些你們試一下就知道了。

border表明邊框。

#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; padding: 10px 20px; border: 10px solid red;}

border: 10px solid red;表明上下左右都是10像素、實線、紅色。若是要四個邊框不同就只能一個一個寫了：

#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; padding: 10px 20px; border-top: 10px solid #f00; border-left: 10px solid #0f0; border-right: 10px solid #00f; border-bottom: 10px solid #bbb;}

增長了border之後盒子大小也會變化：

因爲如今瀏覽器有可能會自動給你的代碼加上margin或者padding，咱們常常在css文件中先設置一下這兩個屬性值爲0：

html, body{ margin: 0px; padding: 0px; }

此時，咱們再看一下，樣式：

lesson4.html

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Css盒子模型</title> <meta name="keywords" content="key1, key2"> <meta name="description" content=""> <link rel="stylesheet" type="text/css" href="css/index.css"></head><body> <div id="mydiv">個人css盒子測試模型</div></body></html>

index.css

*{}html, body{ margin: 0px; padding: 0px;}#mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; padding: 10px 20px; border-top: 10px solid #f00; border-left: 10px solid #0f0; border-right: 10px solid #00f; border-bottom: 10px solid #bbb;}

此時，樣式就會緊貼着瀏覽器邊緣了：

有時候咱們也會這樣寫：

index.css

*{
    margin: 0px; padding: 0px; } html,body{ width: 100%; height: 100%; } #mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; padding: 10px 20px; border-top: 10px solid #f00; border-left: 10px solid #0f0; border-right: 10px solid #00f; border-bottom: 10px solid #bbb; }

這樣一來，咱們盒子模型的大小就會隨着瀏覽器窗口的大小而自適應了。
再來講一下外邊距——margin，咱們修改咱們的代碼爲：

lesson4.html

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Css盒子模型</title> <meta name="keywords" content="key1, key2"> <meta name="description" content=""> <link rel="stylesheet" type="text/css" href="css/index.css"></head><body> <div class="mydiv">個人css盒子測試模型1</div> <div class="mydiv">個人css盒子測試模型2</div></body></html>

index.css

*{
    margin: 0px; padding: 0px; } html,body{ width: 100%; height: 100%; } div.mydiv{ width: 100px; height: 100px; background-color: #000; color:#fff; padding: 10px 20px; border-top: 10px solid #f00; border-left: 10px solid #0f0; border-right: 10px solid #00f; border-bottom: 10px solid #bbb; }