我不知道的CSS盒子

好久以前學習css的時候，我只看到盒模型四你們族——content,padding,border,margin，以及他們分別表明什麼，氣什麼做用，不一樣瀏覽器上對於width屬性的計算方式不同。

而後到如今，我才反應過來，哪有這麼簡單！！！（對不起是我太菜了）

固然理解盒模型的四你們族也很重要，可是有些細節的地方被我忽略到了，因此想在這裏再梳理一下。

盒子與display

關於display的值，咱們都曉得block，inline, inline-block,list-item,none, table...

就行爲來看：

• 值爲block:一個水平流上只單獨顯示着一個元素
• 值爲inline：好幾個inline的元素能夠顯示在一個水平流上，可是不能設置width/height
• 值爲inline-block： 能和圖文顯示一行，又能直接設置width/height
• list-item: 一行一個，而且會在每一條前面顯示小圖標

可是爲何是這麼展現的呢？固然是由於css盒子

1. 爲了list-item

由於在一開始的時候呢，只有兩種盒子，塊級盒子和內聯盒子，塊級盒子控制結構，內聯盒子控制內容，簡單和諧，直到有一天出現了list-item這個東西，咋顯示呢，太難了，那加一層盒子吧，因而給list-item加了一個標記盒子，用來放前面的小圖標

2. 爲了inline-block

好的list-item搞定了，但是inline-block咋整，又要顯示在一行，又要有寬高，好像是咱們成年人什麼都要同樣，可是人家是真的啥都要了還必須得有

那就再加一層盒子，也就是每一個元素都會有兩個盒子，一個外在盒子，一個內在盒子，外在盒子用來控制是獨自霸佔一行仍是我能夠跟別人在一行顯示，內在盒子負責我有多高多寬內容是什麼。

好比block， 外在盒子我理解成是block的，內在盒子也是block的。

inline的話呢，就是外在盒子是inline的，而內在盒子也是incline的

因此inline-block我就能夠理解成外在盒子是inline的，內在盒子是block的，就既能夠跟小夥伴們在一行，又要跟別人保持距離，妙啊。

到這裏也忽然反應過來，元素的width也就是做用在內在盒子上的。 可是關於width， 也有不少以前理解不到位的地方，好比with:100%, widht:auto, box-sizing等等，好的我去學習了。