【CSS面试题】盒子模型的宽度如何计算？

最新推荐文章于 2023-10-19 21:11:55 发布

Milk595

最新推荐文章于 2023-10-19 21:11:55 发布

阅读量2.4k

点赞数 1

分类专栏： CSS 前端面试

本文链接：https://blog.csdn.net/weixin_43352901/article/details/107392057

版权

前端面试同时被 2 个专栏收录

55 篇文章 8 订阅

订阅专栏

CSS

26 篇文章 0 订阅

订阅专栏

盒子模型的宽度如何计算？

在这里插入图片描述
offsetWidth与offsetHeight有个特点，就是这两个属性的值只与该元素有关，与周围元素（父级和子级元素无关）。

它们的大小取决于元素的宽高、padding以及边框border，有无滚动条都没有影响，下面是他们的计算方式。

offsetWidth = (内容宽度 + 内边距 + 边框)，无外边距

因此，答案是122px

补充：如果让offsetWidth等于100px,该如何做？
在这里插入图片描述
做法：添加属性：box-sizing:border-box;

这个的意思就是：加了box-sizing:border-box属性，width就不仅仅是内容宽度，而是整个的boder-box宽度，什么叫border-box呢？就是到边框的box的宽度，加了此属性，width:100px就会包括内容宽度+内边距+边框，这个整体是100px;所以加了此属性，内容宽度会相应的缩小。

核心代码演示：

    <style>
    #div1{
        width: 100px;
        padding:10px;
        border: 1px solid #ccc;
        margin: 10px;
    }
    </style>
</head>
<body>
    <div id="div1">
        this is div1
    </div>
</body>

在这里插入图片描述

添加属性box-sizing；boder-box;后

在这里插入图片描述

Milk595

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【CSS面试题】盒子模型的宽度如何计算？

盒子模型的宽度如何计算？offsetWidth与offsetHeight有个特点，就是这两个属性的值只与该元素有关，与周围元素（父级和子级元素无关）。它们的大小取决于元素的宽高、padding以及边框border，有无滚动条都没有影响，下面是他们的计算方式。offsetWidth = (内容宽度 + 内边距 + 边框)，无外边距因此，答案是122px补充：如果让offsetWidth等于100px,该如何做？做法：添加属性：box-sizing:border-box;这个的意思就是：加了b
复制链接

扫一扫