關于CSS你應該知道的基礎知識 - 盒模型篇

Jrain 發布于2019-08-30 15:53 / 2567人閱讀

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

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

Margin，Border，Padding

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

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


  
    box
  
  
    box
  
  
    box

box class被應用后的樣式如下：

margin 應用后元素與元素之間產生了相應的空間。

border 應用后元素的外邊框增加了寬度。

padding 應用后元素內的內容和邊框之間產生了相應的空間。

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

上栗中，我們將盒子四個方向的margin都設置成了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設置的語法與margin相同，這里就不列出了。border的設置比較特殊，有機會會找專門一個章節來介紹。

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

Margin 塌陷

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

.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這間的空間應該是30px + 60px = 90px，但實際上只有60px。原因是瀏覽器渲染元素時，垂直方向相鄰的元素margin值只會取設置的較大的那個值。這就是Margin Collapsing。在上栗中，最后計算結果是60px。通過Chrome的工具，我們可以驗證，如下圖：

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

block元素和inline元素

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


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

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

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


  我是inline


  我是inline

上下margin不起作用

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

上下margin起作用

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

盒模型長度和寬度的計算

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

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

box

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

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

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

* {
  box-sizing: border-box;
}

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

GPU云服務器云服務器你應該知道你知道數據分析知道你盒模型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116703.html

關于CSS你應該知道的基礎知識 - 盒模型篇

摘要：瀏覽器渲染引擎通過盒模型的方式來布局元素。應用后元素的外邊框增加了寬度。應用后元素內的內容和邊框之間產生了相應的空間。上面的代碼在中的計算結果如下上栗中，我們將盒子四個方向的都設置成了。關于盒模型的高度，可以通過屬性來設置。瀏覽器渲染引擎通過盒模型的方式來布局html元素。我們可以將每一個html元素都看做是一個盒子，每一個盒子都有長和款，多個這樣的盒子組成了我們的網頁。 Margi...

OnlyLing 2019-08-02 10:13 評論0 收藏0
css - 收藏集 - 掘金

摘要：絕對底部前端掘金來自國外的設計達人，純，可以實現當正文內容很少時，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設計達人，純CSS，可以實現: 當正文內容很少時，底部位于窗口最下面。當改變窗口高度時，不會出現重疊問題。甚至，創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案...

phpmatt 2019-08-29 12:41 評論0 收藏0
容易忽略的七個CSS知識點

摘要：樣式聲明通過一個稱為級聯的過程來解釋和決定。級聯級聯可能是中最容易被弄錯的屬性之一。因此很容易認為元素的視覺邊界等于其寬度，但情況并非如此。如果你在日常工作中使用CSS，那么你的主要目標很可能集中在使事情看起來是正確的。最終得到的正確結果遠比如何實現更重要。這意味著相比正確的語法和視覺效果我們更少關注CSS的實現原理。你可能還沒有意識到，但CSS的視覺效果通常是操縱隱藏屬性的間接結...

chanthuang 2019-08-02 16:16 評論0 收藏0
容易忽略的七個CSS知識點

摘要：樣式聲明通過一個稱為級聯的過程來解釋和決定。級聯級聯可能是中最容易被弄錯的屬性之一。因此很容易認為元素的視覺邊界等于其寬度，但情況并非如此。如果你在日常工作中使用CSS，那么你的主要目標很可能集中在使事情看起來是正確的。最終得到的正確結果遠比如何實現更重要。這意味著相比正確的語法和視覺效果我們更少關注CSS的實現原理。你可能還沒有意識到，但CSS的視覺效果通常是操縱隱藏屬性的間接結...

elina 2019-08-29 18:47 評論0 收藏0
HTML+CSS復習之CSS基礎篇

摘要：內容簡述關于，確實太繁雜了，內容多。寫好不易，基本上就這個調了。里面有許多屬性是可以繼承的，注意了，繼承一定是繼承父級元素的樣式在這里我就列出可以繼承的屬性，和不能繼承的屬性啦不可繼承的和。內聯元素可繼承。每個瀏覽器可能表現不一樣。內容簡述關于CSS，確實太繁雜了，內容多。寫好不易，基本上就這個調了。大家肯定聽過CSS奇淫技巧吧，關于這個我還沒有去深入了解，只是說普通的效果啥的，我...

Salamander 2019-08-29 12:38 評論0 收藏0