CSS:盒子_每个元素都有两个盒子（《CSS世界》笔记-块级元素）

CSS:盒子_每个元素都有两个盒子（《CSS世界笔记》-块级元素）

1）CSS世界只有"块级盒子（block-level box）"和"内联盒子（inline box）"。块级盒子就负责结构，内联盒子就负责内容。

 

2）每个元素都两个盒子，外在盒子和内在盒子。"外在盒子"负责元素是可以一行显示，还是只能换行显示；"内在盒子"负责宽高、内容呈现什么的。"内在盒子"也可以叫作“容器盒子”。

现在，大家应该明白为何display属性值是inline-block的元素既能和图文一行显示，又能直接设置 width/height 了吧！因为有两个盒子，外面的盒子是 inline 级别，里面的盒子是 block 级别。实际上，如果遵循这种理解，display:block 应该脑补成 display:block-block，display:table 应该脑补成 display:block-table，我们平时的写法实际上是一种简写。

 

思考

-width/height 作用在哪个盒子上？

“内在盒子”即“容器和盒子”。参考上面的笔记2。

 

来自《CSS世界》-张鑫旭◎著，本书籍网站https://www.cssworld.cn/。