今天帶大家快速理解盒子模型，直接上代碼：

css盒子我的css盒子測(cè)試模型

上面代碼沒(méi)有任何難度，只是寫(xiě)了一個(gè)div標(biāo)簽，大家已經(jīng)知道，div標(biāo)簽是塊級(jí)元素，所以會(huì)占滿(mǎn)一行：

但是我們也注意到了圖片的左側(cè)其實(shí)還是有一些間隙的：

這個(gè)間隙在我們預(yù)期中是不應(yīng)該存在的，這種間隙基本上就是出在margin或者padding或者border上。

我們先看開(kāi)發(fā)者工具的右側(cè)：

上面有一個(gè)element.style{}，下面有一個(gè)div標(biāo)簽的屬性，默認(rèn)display: block。上面那個(gè)是干什么用的呢？我們修改一下代碼：

我的css盒子測(cè)試模型

然后再刷新頁(yè)面看：

這下我們就知道了，這個(gè)element.style就是我們寫(xiě)在代碼里的屬性。但是我們一般不會(huì)這么寫(xiě)，也就是大家在寫(xiě)代碼的時(shí)候把所有屬性都放到css文件中為好，不要讓這個(gè)element.style有任何內(nèi)容。

下面還有一個(gè)方框：

這個(gè)框就是目前這個(gè)css盒子的具體屬性，比如寬度等信息。

• margin：外邊距
• border：邊框
• padding：內(nèi)邊距

也就是說(shuō)一個(gè)完整的盒子模型大小是由這三個(gè)參數(shù)值共同決定的。現(xiàn)在我們修改代碼：

lesson4.html

我的css盒子測(cè)試模型

原代碼不變，只是給div加一個(gè)id。

index.css

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

然后我們刷新頁(yè)面：

下面盒子區(qū)域也會(huì)隨之變化：

我們看到內(nèi)容區(qū)域大小變成了100*100，而padding、border、margin都為0，我們來(lái)修改這三個(gè)值，再看效果：

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

盒子大小由原來(lái)的100*100變?yōu)?20*120了。

padding為內(nèi)邊距，我們看到文字和邊緣有了10像素的距離：

從上面圖片看到，padding屬性也是分為上下左右的，所以這個(gè)padding其實(shí)是分為padding-left、padding-right、padding-top、padding-bottom。

如果四個(gè)方向邊距都不一樣，我們寫(xiě)四個(gè)有點(diǎn)太累贅了，所以我們可以這樣寫(xiě)：

padding: 10px 20px 30px 40px;

可以看到，四個(gè)值從左到右分別代表：上、右、下、左，也就是順時(shí)針走的邊距。只要這樣寫(xiě)的方式，都是這種順時(shí)針代表的。

如果你寫(xiě)

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像素、實(shí)線、紅色。如果要四個(gè)邊框不一樣就只能一個(gè)一個(gè)寫(xiě)了：

#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以后盒子大小也會(huì)變化：

由于現(xiàn)在瀏覽器有可能會(huì)自動(dòng)給你的代碼加上margin或者padding，我們經(jīng)常在css文件中先設(shè)置一下這兩個(gè)屬性值為0：

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

此時(shí)，我們?cè)倏匆幌?#xff0c;樣式：

lesson4.html

Css盒子模型我的css盒子測(cè)試模型

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;}

此時(shí)，樣式就會(huì)緊貼著瀏覽器邊緣了：

有時(shí)候我們也會(huì)這樣寫(xiě)：

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;}

這樣一來(lái)，我們盒子模型的大小就會(huì)隨著瀏覽器窗口的大小而自適應(yīng)了。再來(lái)說(shuō)一下外邊距——margin，我們修改我們的代碼為：

lesson4.html

Css盒子模型我的css盒子測(cè)試模型1 我的css盒子測(cè)試模型2

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;}

我們看一下效果：

兩個(gè)盒子分別在兩行出現(xiàn)，那么如果我想把這兩個(gè)盒子放到一行，我要怎么辦呢？我的第一個(gè)想法是把display屬性改為inline，但是發(fā)現(xiàn)改后樣式變?yōu)?#xff1a;

這是因?yàn)樾袃?nèi)元素是不能修改寬和高的，這時(shí)候我們用display: inline-block就可以了：

現(xiàn)在又出現(xiàn)了另一個(gè)問(wèn)題，就是大家發(fā)現(xiàn)上面兩個(gè)盒子中間多了一個(gè)空白的地方，而且空白地方無(wú)法選中，說(shuō)實(shí)話如果你用inline-block那么中間這個(gè)間距就是默認(rèn)自帶的了(如果非要去掉就要加float: left或者margin: -10;)。

現(xiàn)在我們盒子和瀏覽器邊緣是沒(méi)有間距的，現(xiàn)在我們希望它離瀏覽器有一段距離，我們加一個(gè)margin: 10px;屬性，然后再看：

我們看到它和瀏覽器之間有了邊距，我們?cè)賮?lái)看一下現(xiàn)在盒子的大小：

盒子現(xiàn)在的大小是160*140

可以看到盒子的大小是沒(méi)有計(jì)算最外層的margin屬性的也就是

160=100+202+102；140=100+102+102

所以說(shuō)margin是盒子的外邊距，在盒子外面，不算做盒子大小的。

現(xiàn)在大家就掌握了盒子模型的所有基礎(chǔ)概念了。

如果對(duì)接口、性能、自動(dòng)化測(cè)試、面試經(jīng)驗(yàn)交流等感興趣的，可以關(guān)注我的頭條號(hào)，我會(huì)不定期的發(fā)放免費(fèi)的資料，這些資料都是從各個(gè)技術(shù)網(wǎng)站搜集、整理出來(lái)的，如果你有好的學(xué)習(xí)資料可以私聊發(fā)我，我會(huì)注明出處之后分享給大家。歡迎分享，歡迎評(píng)論，歡迎轉(zhuǎn)發(fā)。需要資料的同學(xué)可以關(guān)注小編+轉(zhuǎn)發(fā)文章+私信【測(cè)試資料】

總結(jié)

以上是生活随笔為你收集整理的两个相邻盒子的边框怎么只显示一个_一篇文章带你快速理解盒子模型「经典案例」...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。