一个三角形引发的前端问题

• css画出三角形
• • 如果内部不设为0px，我们看一下图形
  • 设为0px后
  • 将三个边框透明即可
• 我们还可以用border-left这些来写
• • 隐藏两边
  • 隐藏一边
• margin和padding的区别
• • BFC的理解？
  • 如何构建BFC
  • BFC特性
  • • 案例一：
    • 案例二：避免marigin重叠
  • 通过BFC来包含浮动
  • • 案例一：浮动脱离父元素的包裹
    • 案例二：利用BFC包含

我们如何使用css画一个三角形是今天的问题，然后我们可以得到一系列的问题！

css画出三角形

先画一个正方形，然后将中间部分设为0px，然后隐藏三个边框，剩下一个边框就是三角形，我我们来看一下这个过程。

如果内部不设为0px，我们看一下图形

#tri{
    width: 50px;
    height: 50px;
    border: 100px solid #000;
    border-color: blue red yellow black;
}

可以看到他默认的指定顺序是上 右 下 左

设为0px后

#tri{
    width: 0;
    height: 0;
    border: 100px solid #000;
    border-color: blue red yellow black;
}

将三个边框透明即可

#tri{
    width: 0;
    height: 0;
    border: 100px solid #000;
    border-color: blue transparent transparent transparent;
}

由于ie6不支持transparent，所以没有透明效果，就需要把border-style：solid
dashed dashed dashed
这个边框的颜色位置也就对应了三角形的方向

我们还可以用border-left这些来写

隐藏两边

#tri {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

改变隐藏的和显示的边框方向可以改变三角形的方向。

隐藏一边

#tri {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

margin和padding的区别

既然引出了这个边框的问题，我们就来看一下margin和padding的区别：

• margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。（外边距）
• padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。（内边距）

这个可以打开F12查看随便一个元素都可以得到，任何一个元素都有内外边框

BFC的理解？

BFC是“Block Formatting Context”的缩写，即块格式化上下文。它是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。通俗的讲，BFC是web页面中一块渲染区域（或者说是一种渲染环境），对于环境内的盒子，有某些特定的渲染规则。

再通俗的讲，就是我们可以为某一个盒子赋予BFC渲染环境，盒子内的子盒子在这个渲染环境中进行渲染。

如何构建BFC

• 根元素或包含根元素的元素
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
• 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
• 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
• overflow 值不为 visible 的块元素
• display 值为 flow-root 的元素
• contain 值为 layout、content或 strict 的元素
• 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
• 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
• 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
• column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中

BFC特性

• 内部的Box（当然是块级盒子）会在垂直方向上沿边框一个接一个地放置；
• Box垂直方向上的margin由Box本身的margin决定，不是简单的两个相邻Box（同属同一个BFC中）的margin之和，而是取其中较大的那个margin，也就是所谓的Margin Collapse（margin重叠）;
• BFC 内部 float box 不会和同级的BFC区域重叠；
• BFC是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也是如此;
• 计算BFC的高度时，浮动元素也参与计算；

案例一：

  <div class="container">
    <p>Sibling 1</p>
    <p>Sibling 2</p>
  </div>

    .container {
      background-color: red;
      /* create BFC box */
      overflow: hidden;
      text-align: center;
    }

    p {
      background-color: lightgreen;
      margin: 10px 0;
    }

margin出现了一个重叠的效果

案例二：避免marigin重叠

    <div class="container">
        <p>Sibling 1</p>
        <p>Sibling 2</p>
        <div class="newBFC">
            <p>Sibling 3</p>
        </div>
    </div>

  .container {
    background-color: red;
    /* create BFC box */
    overflow: hidden;
    text-align: center;
  }

  p {
    background-color: lightgreen;
    margin: 10px 0;
  }
  .newBFC {
    overflow: hidden;
  }

这样利用BFC就不会出现重叠现象了

通过BFC来包含浮动

一个BFC可以包含浮动。很多时候我们会碰到这种情况，一个容器里有浮动元素。由于这个原因，容器元素没有高度（常被理解为元素浮动导致父容器坍塌），它的浮动孩子将会脱离页面的常规流。我们通常使用清除浮动来解决这个问题，最受欢迎的方法是使用一个clearfix的伪类元素。但我们同样可以通过定义一个BFC来达到这个目的。

案例一：浮动脱离父元素的包裹

 <div class="container">
    <div class="box"></div>
  </div>

 .container {
      padding: 10px;
      background-color: green;
    }

 .box {
      width: 100px;
      height: 100px;
      border-radius: 5px;
      background-color: lightgreen;
      float: left;
    }

案例二：利用BFC包含

上面子元素因为浮动脱离了父元素的包裹，为了使得父元素能够将子元素进行包裹，我们将父元素设置成BFC即可（利用的是特性里的第五条）：

.container {
    overflow: hidden;//添加的这句
    padding: 10px;
    background-color: green;
  }

  .box {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    background-color: lightgreen;
    float: left;
  }

标签：BFC,color,margin,前端,元素,引发,边框,三角形,border
来源： https://blog.csdn.net/qq_42136832/article/details/120117193