面试：css盒模型

最新推荐文章于 2023-05-22 10:12:36 发布

原创最新推荐文章于 2023-05-22 10:12:36 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

122 篇文章

订阅专栏

面试官追问方式路线图：

标准模型和ie模型

标准模型

ie模型

css如何设置这两种模型

box-sizing: conten-box 默认标准盒模型

box-sizing: border-box 设置为ie盒模型

js如何设置盒模型的宽和高

dom.style.width / height 只能取到内联的样式，取不到外联和style节点

dom.cruuentStyle.width / height 只有ie支持。

window.getComputedStyle(dom).width 兼容火狐和chrome。通用性更好

dom.getBoundingClientRect().width / height 获取到的宽和高是包含border的

这个方法能获取 left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）。

如果你需要获得相对于整个网页左上角定位的属性值，那么只要给top、left属性值加上当前的滚动位置（通过window.scrollX和window.scrollY），这样就可以获取与当前的滚动位置无关的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js运行机制</title>
</head>
<style>
.div {
    width: 100px;
    height: 100px;
    background: red;
}
</style>
<body>
</body>
<div class="div" id="div"></div>
<script>
    var div = document.getElementById('div');
    console.log(div.style.width);
    console.log(window.getComputedStyle(div).width);
    console.log(window.getComputedStyle(div).background);
    console.log(div.getBoundingClientRect().width);
    console.log(div.getBoundingClientRect().left);
</script>
</html>

marign合并

定义：兄弟结构水平方向的margin正常，但是垂直方向上面的margin会合并，并且这里的取到的是较大的一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<style>
/* common style */
.wrapper {
    width: 400px;
    height: 400px;
    border: 2px solid red;
}
.wrapper > div {
    width: 100px;
    height: 100px;
    background: gray;
}

/* test style */
.top {
    margin-bottom: 100px;
}
.bottom {
    margin-top: 100px;
}
</style>
<body>
    <section class="wrapper">
        <div class="top">我在上面</div>
        <div class="bottom">我在下面</div>
    </section>
</body>
<script>
    
</script>
</html>

上下两个方块间隔应该是200px，实际还是100px，marign发生了合并。

一般情况下，margin合并我们可以不处理，合理安排垂直方向的margin就能达到需求效果。

margin塌陷

定义：父子结构的元素，垂直方向上的margin，会取最大那个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<style>
/* common style */
.wrapper {
    width: 400px;
    height: 400px;
    border: 2px solid red;
}
.father {
    width: 100px;
    height: 100px;
    background: gray;
}
.son {
    width: 50px;
    height: 50px;
    background: yellow;
}
/* test style */
.father {
    margin-top: 100px;
}
.son {
    margin-top: 50px;
}
</style>
<body>
    <section class="wrapper">
        <div class="father">
            <div class="son"></div>
        </div>
    </section>
</body>
</html>

解决margin塌陷问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<style>
/* common style */
.wrapper {
    width: 400px;
    height: 400px;
    border: 2px solid red;
}
.father {
    width: 100px;
    height: 100px;
    background: gray;
}
.son {
    width: 50px;
    height: 50px;
    background: yellow;
}
/* test style */
.father {
    margin-top: 100px;
    overflow: hidden;
    /* trigger BFC solve marign collapse */
}
.son {
    margin-top: 50px;
}
</style>
<body>
    <section class="wrapper">
        <div class="father">
            <div class="son"></div>
        </div>
    </section>
</body>
</html>

黄色小块移动到了灰色小块的下方

BFC（边距重叠解决方案）

面试会问的五个方面

基本概念：Block formatting context 块级格式上下文，它是一个独立渲染区域。
原理（渲染规则）：
1. （1）BFC元素垂直方向的边距会发生重叠。
2. （2）BFC的区域不会与浮动元素的box重叠。
3. （3）BFC在页面上是一个独立的容器，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素。
4. （4）计算BFC高度时，浮动元素也会参与计算。
如何创建BFC：
1. （1）float值不为none。
2. （2）position不是static或relative。
3. （3）display是table相关的。
4. （4）overflow不是visible
使用场景：
1. （1）解决margin塌陷。
2. （2）清除浮动。
3. （3）不与浮动元素相重叠。

不与浮动元素相重叠实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<style>
/* common style */
.wrapper {
    width: 400px;
    height: 400px;
    border: 2px solid red;
}
/* test style */
.left {
    width: 100px;
    height: 200px;
    float: left;
    background: gray;
}
.right {
    height: 220px;
    background: green;
}
</style>
<body>
    <section class="wrapper">
        <div class="left"></div>
        <div class="right"></div>
    </section>
</body>
<script>
    
</script>
</html>

发现有一个蔓延的效应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<style>
/* common style */
.wrapper {
    width: 400px;
    height: 400px;
    border: 2px solid red;
}
/* test style */
.left {
    width: 100px;
    height: 200px;
    float: left;
    background: gray;
}
.right {
    height: 220px;
    background: green;
    overflow: auto;
    /* trigger BFC */
}
</style>
<body>
    <section class="wrapper">
        <div class="left"></div>
        <div class="right"></div>
    </section>
</body>
<script>
    
</script>
</html>

加上overflow: auto会发现，不与浮动元素相重叠了。

清除浮动示例

bfc的子元素即使是float也会参与计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<style>
/* common style */
.wrapper {
    width: 400px;
    height: 400px;
    border: 2px solid red;
}
.container {
    margin: 10px;
    background: gray;
    /* overflow: auto; */
}
.floatelement {
    float: left
}
</style>
<body>
    <section class="wrapper">
        <div class="container">
            <div class="floatelement">this is float element</div>
        </div>
    </section>
</body>
<script>
    
</script>
</html>