我不知道的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等等，好的我去学习了。