首先，在接受這個知識之前我們要弄清楚乙個問題，那就是什麼是盒子模型以及盒子模型能夠為我們解決什麼問題？
盒子模型主要是針對頁面布局的時候來使用了，它規範我們的頁面的所有元素的乙個布局標準是由外向內進行布局，在這個布局過程當中，這由外向內分別為5層，我們可以通過這5層的模型來快速的去識別出當前這個元素的外邊框，內邊框，元素的邊框以及元素的大小，而這些大大的加強了元素在布局的時候的可識別性盒子模型由外向內
margin(外邊距)—>border(邊框)---->padding(內邊距)---->content(元素)
我們在進行css樣式書寫的時候，經常會用到乙個屬性就是邊距，我們的邊距分為兩種，一種是外邊距，一種是內邊距，現在我們就來看一下外邊距的使用
外邊距在css當中，我們使用margin這乙個屬性
邊距有四個方向是margin-top/margin-right/margin-bottom/margin-left這四個方向，通過這四個方向，我們可以設定元素的四個方向邊距
當margin的屬性為乙個的時候，它代表四個方向的值都一樣
當margin的屬性值為2個的時候，它代表上下，左右這兩個方向
當margin的值為3個的時候margin:10px 0px 20px，則會出現上邊10px,左右為0，下邊20px
當margin的值為4個的時候，分別是設定上、右、下、左這四個方向（順時針）
有值 ，我們就去賦值，沒值我們就按照箭頭所指參照賦值重點margin這個屬性可以接收具體的畫素單位，也可以接收百分比，這些都是固定的，但有乙個值非常特殊，它就是auto
當我們給乙個margin-left:auto這個時候，你會發現，元素跑到瀏覽器右邊去了
根據這乙個原理，當我們在這裡在設定乙個margin-right:auto的時候，它就會處於正中間
.div1
上面的**是設定乙個div左右居中上面的**如果使用margin來直接賦值，如下：
.div1
上邊的**，我們可以進一步的簡化為
.div1
.div1
說明：當乙個元素的上下外邊距設定為0與設定為auto其實表現形式都是一樣的現在margin就有兩個值了，有了兩個值 以後，我們同樣可以轉變成乙個值
上邊簡化後的**，在設定的時候，可以做進一步的簡化，因為上面的margin為0的時候，左右為auto，我們可以直接省略掉前面的0
.div1
**注意：**到後期，我們會學到乙個脫流現象（浮動與定位），乙個元素脫流以後，就不能使用margin:auto進行居中了
margin穿透（margin摺疊）現象
當我們在乙個元素的內部設定另乙個元素的margin時，為出現這個邊框跑到外邊的情況，這種現象叫margin穿透（margin摺疊）
解決方法：
設定外邊元素的邊框，並且同步設定box-sizing:border-boxoverflow:hidden通過設定這個css樣式也可以解決margin穿透的問題
padding代表的是盒子內邊距，它與上面的margin一樣，都有四個方法，分別是padding-top/padding-right/padding-bottom/padding-left,同時也可以通過padding直接賦值是個方法
當我們在設定padding的時候，我們會發現，盒了的大小會發生改變，這是因為我們設定的是內邊距，內邊距又是在border邊框裡面的，這個時候，我們的盒子大小會被我們的內邊距撐開，為了解決這個問題，我們需要改變內容區域的大小，但是這樣做非常麻煩
為解決這個問題，css3出了乙個新的屬性叫box-sizing,它專門用來解決padding內邊距的問題，當我們設定box-sizing:border-box的時候，這個時候，再設定padding的大小，盒子就不會撐開了
這些五個特性，我們的w3c把它們畫成乙個模型，這個模型由外向由分別是position-margin-border-padding-content
在html裡面，每乙個html標籤都會有乙個自己特有的樣式資訊，例如select全呈現出下拉框，而input會呈現出輸入框，而p標籤會呈現出段落，這些都是html本身具備的樣式資訊，這些樣式資訊不用我們自己書寫，是它自自帶的系統樣式
display屬性
display這個屬性是用來控制元素在頁面上面的顯示方式，當我們去設定display:none的樣式時，元素就會在頁面上面不會顯示出來
在網頁當中，我們的元素可以劃分為三種型別，分別是「行內元素」，「塊級元素」，「行內塊級元素」,這三種型別的元素通過display這乙個屬性來控制，他們三個型別的元素分別具備不同的顯示方式塊級元素
在網頁當中，我們經常看到有些元素預設情況之下，寬度為100%，高度由內容決定，並且，預設不會書寫在一行裡面，這一種元素我們叫塊級元素，如div，p,ul,table等標籤,這些標籤我們就屬性塊級元素標籤
特點：
乙個元素如果要表示為塊級元素，那麼，它必定會有乙個css屬性為display:block
行內元素
在網頁裡面，行內元素缺省會排在一行，它不可以通過width與height來設定它寬度與高度，寬的寬度與高度由時面的內容來決定
特點：
乙個元素如果表現為行內元素，那麼，肯定是通過display:inline來實現的，但是這個屬性預設不會呈現在css樣式裡
####行內塊級元素
顧名思義，行內塊級元素就是既具備行內元素的特點，又具備了塊級元素的特點
特點：
行內塊級元素，我們是通過display:inline-block來實現的
元素型別的互相轉換
行內元素與塊級元素的居中方案
css 深入淺出定位
這一對的問題我們應該怎麼解決。還沒有開始定位啊.應該怎麼辦了？大家看看這個東西其他他就是乙個普通流。html裡面的寫法就是從上到下，從左到右的排版布局。每個非浮動塊級元素都獨佔一行，從上到下排列，內聯元素則從左到右排列。如果當前行不能排列下來，則另一起一行然後浮動排列。大家知道文件流後對於後面的定位...
深入淺出之STL
c stl 標準模板庫 是一套功能強大的 c 模板類，提供了通用的模板類和函式，這些模板類和函式可以實現多種流行和常用的演算法和資料結構，如向量 鍊錶 佇列 棧。c 標準模板庫的核心包括以下三個元件 元件描述 容器 containers 容器是用來管理某一類物件的集合。c 提供了各種不同型別的容器，...
css之盒子模型
一 前言 盒子模型，英文即box model。無論是div span 還是a都是盒子。但是，表單元素一律看作是文字，它們並不是盒子。這個很好理解，比如說，一張裡並不能放東西，它自己就是自己的內容。盒子中的區域 乙個盒子中主要的屬性就5個 width height padding border mar...