Web前端 — CSS之盒模型以及margin负值、塌陷重叠问题

卡皮巴拉

已于 2023-08-25 02:54:49 修改

阅读量101

点赞数 1

分类专栏： Web前端开发面试题（以练带学）文章标签：前端 css 学习面试 css

于 2023-08-03 23:48:01 首次发布

本文链接：https://blog.csdn.net/upgrade_bro/article/details/132090368

版权

Web前端开发面试题（以练带学）专栏收录该内容

11 篇文章 1 订阅

订阅专栏

所有命运馈赠的礼物，都已在暗中标好了价格。——茨威格

1.什么是盒模型？

说一下你对CSS盒模型的理解。

css的盒子模型（box model），

可以把每个可视的HTML元素看作是一个矩形盒子，也就是一个盛装内容的容器。

这个盒子由里到外包括：content（内容）、padding（内边距）、border（边框）、margin（外边距）四个部分。

2.盒模型的类型

盒模型有两种，标准盒模型和IE盒模型（也称怪异盒模型）

（1）标准盒模型（宽高 = 内容部分）

format,png

（2）IE盒模型（宽高 = 内容+内边距+边框）

format,png

（3）box-sizing属性

在CSS中，可以通过box-sizing属性来指定盒模型的类型。

box-sizing属性有两个可选值：content-box和border-box。

默认值是content-box，表示使用标准盒模型。

如果将box-sizing设置为border-box，则使用IE盒模型。

/* 标准模型（默认） */
box-sizing:content-box;
 /*IE模型*/
box-sizing:border-box;

（4）题目：计算盒子模型的宽度

<style>
    .div {
        width: 100px;
        height: 100px;
        padding: 10px;
        border: 1px solid #ccc;
    }
</style>
<html>
    <div class="div">
    <!-- 请问.div盒子的宽度是多少？ -->
</html>

①div盒子的宽度是多少？

答案是122px，默认情况下，.div为标准盒子模型，

width属性设置的是content的宽度，

计算公式为 offersetWidth = content + padding-left + padding-right + border-left + border-right

= 100 + 20 + 2

= 122px

（offsetWidth、offsetHeight表示元素在页面中所占用的总宽度、总高度）

②如何让offsetWidth = width

如何让offsetWidth = 100px?

<style>
    .div {
        width: 100px;
        height: 100px;
        padding: 10px;
        border: 1px solid #ccc;
        box-sizing: border-box;
    }
</style>
<html>
    <div class="div">
</html>

添加 box-sizing: border-box;