從頭開始複習css之盒子模型

吃完午餐，來寫一篇比較簡單的文章吧，消化一下吧。

1、 什麼叫盒子模型

盒子模型這個名詞來自英文裏面的Box modelmodel。怎麼理解盒子模型呢？我認爲凡是裏面能夠盛裝其餘內容的標籤，咱們均可以稱之爲盒子。例如：div,p,span等等標籤均可以往裏面再添加元素，咱們均可以稱之爲盒子模型，相反例如img，input等等 裏面是沒法盛裝其餘元素，咱們就能稱之爲盒子。

關於盒子，主要有如下幾個要點：

• width/height：內容的寬高
• padding：內邊距
• border：邊框
• margin：外邊框

2、 如今存在的盒子模型標準

因爲歷史和技術遺留緣由，如今存在的盒子模型主要有兩種：

2.一、 標準盒子模型

2.二、 IE盒子模型：

由上圖咱們能夠清楚的發現，ie盒子和標準盒子之間的區別，整理以下：

• 在 標準盒子模型中，width 和 height 指的是內容區域的寬度和高度。增長內邊距、邊框和外邊距不會影響內容區域的尺寸，可是會增長元素框的總尺寸。
• IE盒子模型中，width 和 height 指的是內容區域+邊框+內邊距的寬度和高度。

其實這一點Android就好多了，一家獨大，標準就一套。

3、 不一樣盒子模型的轉化

ie盒子和標準盒子設計出來確定有其設計出來的意義，衆所周知，現代瀏覽器廣泛使用的都是標準盒子，可是做爲一個Android開發工程師，我不少狀況下 仍是會認同ie盒子的一些標準，那麼是否在開發中必定要用標準盒子呢？首先來看下面一段代碼：

<div class="parent">
		<div class="son"></div>
		<div class="son2"></div>
	</div>
// css
		.son {
			width: 100px;
			height: 100px;
			padding: 10px;
			margin: 10px;
			border: 5px solid blue;
			background-color: red;
			box-sizing: content-box;
		}
		.son2 {
			width: 100px;
			height: 100px;
			padding: 10px;
			margin: 10px;
			border: 5px solid red;
			background-color: blue;
			box-sizing: border-box;
		}
複製代碼

效果以下：

從上面圖上能夠發現：界面上面出現了兩種不一樣規則的盒子，查糾其代碼，發現起做用的方式是：box-sizing屬性。咱們來看一看box-sizing吧：

box-sizing : content-box|border-box|inherit;

• **content-box ：**默認值，可使設置的寬度和高度值應用到元素的內容框。盒子的width只包含內容。

  即總寬度=margin+border+padding+width

• **border-box ：**設置的width值實際上是除margin外的border+padding+element的總寬度。盒子的width包含border+padding+內容，即ie盒子

• inherit： 規定應從父元素繼承 box-sizing 屬性的值

4、 最後來談談我在實際開發中遇到的有關盒子的問題

4.一、 盒子內的第一個子元素和最後一個子元素的margin會印象父盒子的位置

首先咱們在開發的時候常常會遇到這樣的狀況，來看下面一段代碼：

// css
		.son {
			margin-top: 100px;
			width: 100px;
			height: 100px;
			background-color: red;
		}
// html
	<div class="parent">
		<div class="son"></div>
	</div>
複製代碼

按照我這個常常作Android的見解，應該是父佈局不懂 而後子盒子對應父盒子向下平移100px纔對呀。可是實際效果並無。這種問題的解決辦法是：

• 給父元素加邊框border 代碼以下：

.parent {
			border-top: 1px solid;
		}
複製代碼

效果以下：

• 給父元素設置padding值 （這個就再也不贅述了）
• 將父盒子設置成BFC

4.二、 一些默認的元素是帶padding，margin的

這種狀況比較常見，例如ul標籤在Mozilla中默認是有padding值的，而在IE中只有margin有值。針對這種狀況，咱們通常都添加一個：

*{
  margin:0;
  padding:0;
}
複製代碼

來清除各個元素的默認margin，padding屬性

4.三、 用盒子畫三角形。

我看在面試裏面常常考的一個點，我這裏就簡單的畫一下，我以前也用僞類畫過，咱們如今盒子畫一下：

.parent {
            width : 0;
            height: 0;
            border : 100px solid transparent;
            border-top : 100px solid red; /*方向本身定義*/
}
複製代碼

效果以下：

說在最後

一箇中午的時間也寫不了多少文章，可是自從昨天寫完了那篇BFC以後，就總感受要寫一篇文章來介紹一下盒子，正好今天中午不怎麼想睡覺，就寫了出來。 接下來，按照本身制定的軌跡來講，還有變換、動畫、預處理器三個知識點。寫完了就開始從頭至尾複習js了，若是我在複習上面存在有什麼遺漏的知識點，請以評論、私聊的方式聯繫我。