HTML、CSS學習（二）CSS的盒子模型

CSS的盒子模型

在網頁的製做中，佈局是最重要的內容，而Div+Css則是主要的佈局方式，在之前的使用中，總認爲前端技術中，CSS和Html很是簡單，用到的時候，查一個手冊和文檔，就能夠了，沒有必要花費大量的時間去學習。如今才意識到了問題的嚴重性，在實際的操做中，總會出現不少的問題，所以，決定對CSS知識進行一個從新的梳理與學習，主要對一些難點進行學習，本文用來記錄本身的學習過程。

在學習中，感受最難掌握的就是盒子模型的定位、佈局、彈性盒模型、動畫、等內容，本次學習將主要針對這些方面。

1、盒子模型

在盒子模型中，最大的問題就是設置盒子的寬度和高度的問題，必定要注意width和height指的是盒子模型的淨寬和淨高，也就是說，

整個盒子的寬度=外邊距（margin)*2+邊框寬度(border)*2+內邊距(padding)*2，同理，其高度與寬度的計算方法相同。

2、box-sizing

該屬性主要用來設置如何計算盒子模型的寬度和高度。其值有如下幾個

content-box：默認行爲，寬度和高度指內容的寬和高，盒子總寬和高包括內、外邊距和邊框寬

border-box：整個盒子的寬度=外邊距*2+寬度，高度同理計算

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