前端小知识

1、padding:1px2px3px;则等效于什么？

上右下 左复制右

2、内边距的百分数值是这么计算的

根据父元素的宽度计算

3、那为什么不根据自己的宽度呢？而要根据父元素

如果不根据父元素，而是根据本身的宽度的话。那么当padding生效后，本身的宽度不就变大了吗？那么padding不是也要变大吗？这就陷入了死循环（哇塞！）。
或者要是本身没有宽度，那岂不是怎么设置padding都是无效的！

4、什么是BFC？

BFC就是“块级格式化上下文”的意思，也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响

5、那么BFC的原理是什么呢？

内部的Box会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。）
每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

6、BFC由什么条件创立?

float属性不为none
position属性为absolute或fixed
display属性为inline-block、table-cell、table-caption、flex、inline-flex
overflow属性不为visible（- overflow: auto/ hidden;）

7、BFC的使用场景有哪些呢

可以用来自适应布局。

<!-- BFC不与float重叠 -->
    <section id="layout">
        <style media="screen">
          #layout{
            background: red;
          }
          #layout .left{
            float: left;
            width: 100px;
            height: 100px;
            background: #664664;
          }
          #layout .right{
            height: 110px;
            background: #ccc;
            overflow: auto;
          }
        </style>
        <div class="left"></div>
        <div class="right"></div>
        <!-- 利用BFC的这一个原理就可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。 -->
    </section>

可以清除浮动：（塌陷问题）

<!-- BFC子元素即使是float也会参与计算 -->
<section id="float">
    <style media="screen">
      #float{
        background: #434343;
        overflow: auto;
      }
      #float .float{
        float: left;
        font-size: 30px;
      }
    </style>
    <div class="float">我是浮动元素</div>
</section>

解决垂直边距重叠：

<section id="margin">
    <style>
        #margin{
            background: pink;
            overflow: hidden;
        }
        #margin>p{
            margin: 5px auto 25px;
            background: red;
        }
        #margin>div>p {
            margin: 5px auto 20px;
            background: red;
        }
    </style>
    <p>1</p>
    <div style="overflow:hidden">
        <p>2</p>
    </div>
    <p>3</p>
    <!-- 这样就会出现第一个p标签的margin-bottom不会和第二个p标签的margin-top重叠，这也是BFC元素的另一个原则，不会影响到外边的box，是一个独立的区域。 -->
</section>

作者：阳光是sunny
链接：https://juejin.im/post/6880111680153059341
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。