關(guān)于CSS你應(yīng)該知道的基礎(chǔ)知識 - 盒模型篇

OnlyLing 發(fā)布于2019-08-02 10:13 / 1137人閱讀

摘要：瀏覽器渲染引擎通過盒模型的方式來布局元素。應(yīng)用后元素的外邊框增加了寬度。應(yīng)用后元素內(nèi)的內(nèi)容和邊框之間產(chǎn)生了相應(yīng)的空間。上面的代碼在中的計算結(jié)果如下上栗中，我們將盒子四個方向的都設(shè)置成了。關(guān)于盒模型的高度，可以通過屬性來設(shè)置。

瀏覽器渲染引擎通過盒模型的方式來布局html元素。我們可以將每一個html元素都看做是一個盒子，每一個盒子都有長和款，多個這樣的盒子組成了我們的網(wǎng)頁。

Margin，Border，Padding

每一個盒子都會有margin，border和padding屬性。我們可以通過CSS來指定這三個屬性的大小。例如：

.box {
  margin: 40px;
  padding: 20px;
  border: black 2px solid;
  text-align: center
}


  
    box
  
  
    box
  
  
    box

box class被應(yīng)用后的樣式如下：

margin 應(yīng)用后元素與元素之間產(chǎn)生了相應(yīng)的空間。

border 應(yīng)用后元素的外邊框增加了寬度。

padding 應(yīng)用后元素內(nèi)的內(nèi)容和邊框之間產(chǎn)生了相應(yīng)的空間。

我們同樣可以通過Chrome的Developer Tools來驗證相應(yīng)的屬性。上面的代碼在Developer Tools中的計算結(jié)果如下：

上栗中，我們將盒子四個方向的margin都設(shè)置成了40px。我們還可以只修改上下左右中的其中一個或幾個。

/* 具體指定上右下左的margin */
.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

/* 以簡寫的方式指定margin，依次為上，右，下，左 */
.box {
  margin: 10px 20px 30px 40px;
}

/* 以簡寫的方式指定margin，依次為上下，左右 */
.box {
  margin: 10px 20px;
}

padding設(shè)置的語法與margin相同，這里就不列出了。border的設(shè)置比較特殊，有機(jī)會會找專門一個章節(jié)來介紹。

這里還有一個小技巧，就是如果想將一個元素水平居中，可以將它的margin-left和margin-right屬性設(shè)置成auto。即左右兩邊的margin根據(jù)當(dāng)前窗口寬度自動調(diào)節(jié)到合適大小。

Margin 塌陷

下面這塊代碼中，盒模型的計算結(jié)果和我們預(yù)期的不太一樣：

.box1 {
  margin-bottom: 30px;
  border: black 2px solid;
  text-align: center
}

.box2 {
  margin-top: 60px;
  border: black 2px solid;
  text-align: center
}


  
    box 1
  
  
    box 2

如果按照前面的解釋，box1和box2這間的空間應(yīng)該是30px + 60px = 90px，但實際上只有60px。原因是瀏覽器渲染元素時，垂直方向相鄰的元素margin值只會取設(shè)置的較大的那個值。這就是Margin Collapsing。在上栗中，最后計算結(jié)果是60px。通過Chrome的工具，我們可以驗證，如下圖：

橘黃色部分為兩個盒元素的margin區(qū)域。圖例中可以看出margin的高度不是兩個元素marign相加，而是取較大的那個。

block元素和inline元素

html元素中，有一些元素是block元素，即元素的寬度會占滿整個窗口的寬度，例如div。還有一些是inline元素，即元素的寬度是根據(jù)自己內(nèi)容需要計算出來的寬度，且會緊貼在前一個inline元素的后面，例如span。


  
    我是block
  
  
    我是inline
  
  
    我是inline
  
  
    我是block

我們可以通過display屬性還改變元素的默認(rèn)顯示屬性。例如想將一個span以block形式展現(xiàn)，只需將其設(shè)置成display: block;

還有一點需要注意的是，以inline形式展現(xiàn)的元素，是不受上下margin屬性控制的，如果想給一個inline元素設(shè)置margin-top和margin-bottom則需要將display設(shè)置成inline-block.


  我是inline


  我是inline

上下margin不起作用

.inline {
  margin: 20px;
  border: red 1px solid;
}

上下margin起作用

.inline {
  margin: 20px;
  border: red 1px solid;
  display: inline-block;
}

盒模型長度和寬度的計算

盒模型的長度可以通過width屬性還設(shè)置，例如width: 200px。我們來看一個例子：

.box {
  margin: 10px auto;
  padding: 10px;
  border: red 1px solid;
  text-align: center;
  width: 200px;
}

box

我們設(shè)置了元素寬度是200px，但通過Developer Tools查看到最后的結(jié)果是222px。原因是瀏覽器渲染引擎默認(rèn)理解width屬性是內(nèi)容加上padding的寬度，整個元素寬度還要加上border和margin，即200px + 2 * 10px (margin) + 2 * 1px (border) = 222px。

這種對width屬性的處理很多時候會帶來一些不便，因為我們無法準(zhǔn)確的知道最后的元素到底有多寬。要解決這個問題，可以通過設(shè)置box-sizing: border-box;，這樣元素最后整體寬度就是我們設(shè)置的寬度了。如下圖：

我們在引用一些CSS框架時，大多數(shù)框架都會將所有元素的box-sizing設(shè)置成border-box。有興趣的同學(xué)可以看看Bootstrap等框架的源碼。

* {
  box-sizing: border-box;
}

關(guān)于盒模型的高度，可以通過height屬性來設(shè)置。而如何將設(shè)置垂直居中，還是建議使用flex-box來實現(xiàn)，網(wǎng)上關(guān)于flex-box的資料很多，有興趣的話可以去看看。

云服務(wù)器 GPU云服務(wù)器你應(yīng)該知道你知道數(shù)據(jù)分析知道你盒模型

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52202.html

發(fā)表評論

登陸后可評論

0條評論

OnlyLing

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow.org

閱讀 2552·2023-04-25 19:47
前端每日實戰(zhàn)：162# 視頻演示如何用原生 JS 創(chuàng)作一個查詢 github 用戶的應(yīng)用（內(nèi)含 2

閱讀 3396·2019-08-29 17:18
vue配置多頁面

閱讀 861·2019-08-29 15:26
微信小程序?qū)崿F(xiàn)連接藍(lán)牙設(shè)備跑步APP

閱讀 3368·2019-08-29 14:17
使用FormData對象上傳文件

閱讀 1145·2019-08-26 13:49
styled-components 中文文檔翻譯及不完全指北

閱讀 3346·2019-08-26 13:22
JS語句后加不加分號

閱讀 3034·2019-08-26 10:44
angular2 NgModel` 模塊

閱讀 2702·2019-08-23 16:51

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

關(guān)于CSS你應(yīng)該知道的基礎(chǔ)知識 - 盒模型篇

相關(guān)文章