一二面_CSS盒模型

Posted 2021-07-24 煜成'Studio

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一二面_CSS盒模型相关的知识，希望对你有一定的参考价值。

一二面_CSS盒模型

题目：谈谈你对CSS盒模型的认识

答：基本概念：标准模型+IE模型，content padding border margin

题目：标准模型和IE模型的区别

答：计算宽度和高度的不同，标准模型的宽和高指的是content的宽的，不包含padding和border；IE模型的宽和高是计算padding和border的

题目：CSS如何设置这两种模型

答：box-sizing:content-box; //标准模型（浏览器默认的模式）
box-sizing:border-box; //IE模型

题目：JS如何设置以及获取盒模型对应的宽和高

答：

通过dom元素的style属性来获取宽和高（dom是获取的元素）
dom.style.width/height
但是它获取的只是dom元素的内部样式表（内联样式）的宽和高（CSS设置分为三种：行内样式表、内部样式表、外部样式表）
dom.currentStyle.width/height
三种方式通过浏览器渲染以后即时运行的结果
缺点：这个属性只有IE支持
window.getComputedStyle(dom).width/height
兼容firefox以及chrome，兼容更好一些
dom.getBoundingClientRect().width/height
获得的也是渲染完以后的
应用场所：计算元素的绝对位置（相对于视窗viewport左上角左顶点的位置），获得四个元素：left top width height

题目：实例题（根据盒模型解释边距重叠）:看代码

margin重叠的情况都有哪些？
父元素与子元素挨着，兄弟元素挨着，空元素（content为0时的margin-top和margin-bottom）

题目：BFC（很常见的应用方式是解决边距重叠的问题）
BFC的基本概念：块级格式化上下文；并列还有IFC（内联元素的格式化上下文）
BFC的原理：BFC的渲染规则：

BFC这个元素的垂直方向上的边距会发生重叠
BFC区域不会与浮动元素的box重叠（用来清除浮动）
BFC页面是个独立的容器，外面的元素不会影响到里面的元素，反过来，里面的元素也不会影响到外面的元素
计算BFC高度的时候，浮动元素也会参与计算
如何创建BFC？
overflow: hidden或者auto（overflow不为visible就行）
float的值不为none（float的默认值为none，只要设置了浮动，当前的元素就会创建一个BFC）
position的值为absolute或者fixed（position默认值为static）
display为table-cell,line-block,table等
BFC使用场景？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS盒模型</title>
    <!-- 清空浏览器默认样式 -->
    <style>
        html *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <section id="sec">
        <!-- 观察一下父元素的高度，此时发生margin重叠;若给父元素加一个overflow:hidden，则会产生一个BFC，再看此时父元素的高度-->
        <style>
            #sec{
                background: #f00;
                /* overflow:hidden； */
            }
            .child{
                height: 100px;
                margin-top: 10px;
                background: yellow;
            }
        </style>
        <article class="child">

        </article>
    </section>

    <!-- BFC元素内垂直方向边距重叠问题 -->
    <section id="margin">
        <style>
            #margin{
                background: pink;
                overflow: hidden;
            }
            #margin p{
                margin: 5px auto 25px;
                background: red;
            }
        </style>
        <p>1</p>
        <!-- 给第二个p元素增加一个父级元素，并给父级元素增加一个BFC，是三个p元素的垂直方向的margin不会产生重叠 -->
        <!-- <div style="overflow: hidden;"> -->
            <p>2</p>
        <!-- </div> -->
        <p>3</p>
    </section>

    <!-- BFC不与float元素重叠，布局，左边固定，右边自适应 -->
    <section id="layout">
        <style>
            #layout{
                background: red;
            }
            #layout .left{
                float: left;
                width: 100px;
                height: 100px;
                background: pink;
            }
            #layout .right{
                height: 110px;
                background: #ccc;
                /* 如果没有创建BFC，右侧多出的部分，会和左边的float重叠，在float元素左边下面出现 */
                /* 对于overflow属性来说，值不是visible就能创建BFC，hidden和auto都可以 */
                /* overflow: auto; */
            }
        </style>
        <div class="left"></div>
        <div class="right"></div>
    </section>

    <!-- 浮动元素不参与父级元素的高度计算，但是给父级元素加BFC，父级元素的高度计算就包含浮动元素了(BFC子元素即使是float也会参与高度计算) -->
    <section id="float">
        <style>
            #float{
                background: red;
                /* 给父级元素增加一个BFC */
                /* float: left; */
                /* 还可以下面语句 */
                /* overflow: auto; */                
            }
            #float .float{
                float: left;
                font-size: 30px;
            }
        </style>
        <div class="float">我是浮动元素</div>
    </section>
</body>
</html>

以上是关于一二面_CSS盒模型的主要内容，如果未能解决你的问题，请参考以下文章