css笔记-各种盒子

初始阶段，只有：

1.块级盒子（box-level-box）

2.内联盒子 （inline-box）

块级负责结构，内联负责内容；

突发情况：

有个list-item 默认显示项目符号，一个盒子解释不了；

那就再加一个盒子，叫附加盒子；

list-item元素会出现项目符号是因为生成了一个附加盒子；

学名 标记盒子 专门来放原点，数字这些符号；

IE浏览器下伪元素不支持list-item也许就是无法创造这个标记盒子导致的；

又有突发情况：

出现了 display:inline-block 元素

现有的盒子又不够了！

再加一个盒子！

每个元素都有俩盒子：

外在盒子：负责是可以一行显示还是只能换行显示

内在盒子（容器盒子）：宽高，内容呈现；

于是 按照display的属性不同，

值为 inline-block的元素

由外在的 内联盒子 和内在的块级容器盒子组成；

所以 display 为inline-block 既能图文一行显示；

又能直接设置 width/height

因为俩盒子

外面的是 inline 里面是 block