盒子模型

最新推荐文章于 2022-06-23 15:57:52 发布

快秃头的小猿子

最新推荐文章于 2022-06-23 15:57:52 发布

阅读量105

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/minjiayanm/article/details/103019839

本文详细解析了网页布局中的盒模型原理，包括inline、inline-block和block元素如何在浏览器中占据空间。阐述了边框盒子（IE默认）和内容盒子（谷歌默认）的区别，以及它们在计算宽度和高度时的不同方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

盒模型原理：对所有的盒子，在浏览器中所占据的空间进行计算
盒子：只要在浏览器中占据位置的元素，都是我们计算的盒子
->inline inline-block block
盒子模型使用什么计算盒子在浏览器中占据的位置
width height border margin padding

    盒子分类：边框盒子(IE默认)和 内容盒子(谷歌默认)

    边框盒子在浏览器中占据空间  =   width * height
    内容盒子在浏览器中占据空间  =   (width + border + padding +margin) * (height + border + padding +margin)

    结论：内容盒子：会变大
          边框盒子：不会变