盒子模型

盒模型原理与计算

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

原创最新推荐文章于 2022-06-23 15:57:52 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

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

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

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

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

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