CSS三角形&&containing block

CSS浏览

用CSS画一个三角形

一个红色的三角形

<style>
    .bottom-triangle {
      width: 0;
      height: 0;
      border-top: 40px solid transparent;
      border-left: 40px solid transparent;
      border-right: 40px solid transparent;
      border-bottom: 40px solid #ff0000;
    }
</style>
<div class="bottom-triangle"> </div>

一个带边框的三角形

思路： 两个三角形的叠加

<style> 
    .border-triangle {
      width: 0;
      height: 0;
      border-top: 40px solid transparent;
      border-left: 40px solid transparent;
      border-right: 40px solid transparent;
      border-bottom: 40px solid #ff0000;
    }
    .padding-triangle{
      width: 0;
      height: 0;
      border-top: 39px solid transparent;
      border-left: 39px solid transparent;
      border-right: 39px solid transparent;
      border-bottom: 39px solid white;;

    }
  </style>

  <div class="border-triangle">
    <div class="padding-triangle"></div>
  </div>

containing block

CSS包含块（Containing Block）也可以理解为一个矩形，这个矩形的作用是为它里面包含的元素提供一个参考，用于计算元素的尺寸和位置。

Containing Block是定位参考框或定位坐标参考系，元素一旦定义了position定位（absolute或relative或fixed），它所包含的定位元素都将以该包含块为坐标系进行定位和调整。

带有position属性带元素，其containing block的计算方式

• position:static/relative：containing block 是它的父元素的内容框(即去掉padding的部分)；
• position:fixed：containing block 为initial containing block及根元素（html/body）；
• position:absolute：先找到祖先元素中position不为static的元素，然后再做判断：
  • 若此元素为inline元素，则containing block 取决于祖先的 direction 属性。
    • 如果direction是 ltr（左到右），祖先产生的第一个盒子的上、左padding边界是containing block的上方和左方，祖先的最后一个盒子的下、右padding边界是containing block的下方和右方。
    • 如果direction是 rtl（右到左），祖先产生的第一个盒子的上、右padding边界是containing block的上方和右方，祖先的最后一个盒子的下、左padding边界是containing block的下方和左方。
  • 若此元素为block元素，则containing block 由该祖先元素的 padding框构成。
  • 如果都找不到，则containing block 为 initial containing block。