CSS盒模型

2018-11-26  本文已影响0人  陈裔松的技术博客

题目：谈谈你对CSS盒模型的理解

基本概念：标准模型和IE模型

微信图片_20181126172514.png
微信图片_20181126174908.png

标准模型和IE模型的区别：计算宽高的方式不同

CSS如何设置这两种模型：box-sizing

js如何获取盒模型对于的宽和高

  1. dom.style.width/height // 仅适用于内联样式，也就是说嵌入样式和外联样式是不适用的
  2. dom.currentStyle.width/height // 仅IE浏览器支持，兼容性较差
  3. window.getComputedStyle(dom).width/height // Chorme和Firefox都支持，兼容性较好
  4. dom.getBoundingClientRect().width/height

BFC (Block Fromatting Context)

BFC学习：https://www.cnblogs.com/libin-1/p/7098468.html

基本概念，什么是BFC

BFC的意思是块级格式化上下文 (Block Fromatting Context)

BFC的原理(渲染规则)
  1. BFC在页面上是一个独立的容器，外面的元素不会影响里面的元素，反之里面的元素也不会影响外面的元素
  2. BFC元素的区域，不会与浮动元素的box重叠
  3. 计算BFC高度的时候，浮动元素也会参与计算
如何创建BFC

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
为了便于理解，我们换一种方式来重新定义BFC。一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：

  1. float的值不是none。
  2. position的值不是static或者relative。
  3. display的值是inline-block、table-cell、flex、table-caption或者inline-flex
  4. overflow的值不是visible
BFC的使用场景
  1. 第一个使用场景：解决垂直方向边距重叠问题
    先来看问题，从显示结果上可以看到，第一个p元素和第二个p元素之间，还有第二个p元素和第三个p元素之间，边距已经发生了重叠。彼此之间的间距是20px，而不是相加之后的30px。
    <section id="margin">
        <p>第一个p元素</p>
        <p>第二个p元素</p>
        <p>第三个p元素</p>
    </section>

        #margin{
            background-color: pink;
            overflow: auto;
        }
        #margin p{
            margin: 10px auto 20px;
            background-color: red;
        }

如果不想让第二个p元素的边距与上下相邻的元素发生重叠，该怎么做呢？其实，只需要为第二个p元素添加一个BFC的父元素就可以了。
我们来看下面的修改方案，从显示结果可以看到，三个p元素之间的间距已经变成30px了，也就是说，第二个p元素的边距已经不再与相邻的元素重合了。这是因为第二个p元素所在的父元素，是一个BFC元素(overflow: auto)，它是一个独立的容器，高度包括子元素（也就是第二个p元素）的边距，且不受到外界其他元素的影响。

    <section id="margin">
        <p>第一个p元素</p>
        <div style="overflow:hidden">
            <p>第二个p元素</p>
        </div>
        <p>第三个p元素</p>
    </section>

        #margin{
            background-color: pink;
            overflow: auto;
        }
        #margin p{
            margin: 10px auto 20px;
            background-color: red;
        }
  1. 第二个使用场景：使BFC不与float重叠
    先来看问题，从显示结果上可以看到，左边的元素是浮动的，而右边的元素由于比左边的高一点点（10px），那些多出来的部分会包裹在左边元素的下面。这个现象是左边元素的浮动属性造成的，浮动元素会脱离文档流。
    <section id="layout">
        <div class="left">left</div>
        <div class="right">right</div>
    </section>

        #layout{
            background-color: pink;
        }
        #layout .left{
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #layout .right{
            height: 110px;
            background-color: yellow;
        }

这显然不是我们想要的布局效果，怎样才能让右边元素自然的显示为一个方块呢？答案是，只要设置右边元素设为BFC元素就可以了。
我们来看下面的修改方案，从显示结果可以看到，右边元素的样式就比较舒服了，是我们想要的效果。这是因为右边元素被设置为BFC元素(overflow: hidden)之后，就不会再与浮动元素的box重叠了。

    <section id="layout">
        <div class="left">left</div>
        <div class="right">right</div>
    </section>

        #layout{
            background-color: pink;
        }
        #layout .left{
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #layout .right{
            height: 110px;
            background-color: yellow;
            overflow: hidden;   /* 增加了这个属性*/
        }
  1. 第三个使用场景：计算浮动元素的高度，清除浮动
    先来看问题，从显示结果上可以看到，父元素的背景颜色并没有显示，这是因为父元素的高度为0。而高度为0的原因，是因为子元素是浮动的，所以父元素在计算高度的时候，并没有把这个浮动的子元素高度计算进去，导致父元素本身的高度为0。
    <section id="float">
        <div class="float">我是浮动元素</div>
    </section>

        #float{
            background-color: pink;
        }
        #float .float{
            float: left;
            font-size: 30px;
        }

我们来看下面的修改方案，可以看到父元素的背景颜色已经显示出来了。
其实这就是清除浮动背后的原理，设置父元素为BFC元素。

    <section id="float">
        <div class="float">我是浮动元素</div>
    </section>

        #float{
            background-color: pink;
            overflow: hidden;  /* 增加了这个属性*/
        }
        #float .float{
            float: left;
            font-size: 30px;
        }

清除浮动总结：https://www.cnblogs.com/nxl0908/p/7245460.html

上一篇下一篇

猜你喜欢

热点阅读