首页 > Web开发 > 详细

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

时间:2019-09-22 00:31:20      阅读:156      评论:0      收藏:0      [点我收藏+]

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/
 
 

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

原文:https://www.cnblogs.com/runrunrun/p/11565471.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!