CSS盒模型、BFC

2021-09-06 09:34:46

盒模型

标准模型/IE模型

标准盒模型：content

width->content(不包含padding和border)

css设置：box-sizing：content-box；（浏览器默认的方式）

IE盒模型：content

width-->content+border+padding

css设置：box-sizing: border-box;

js如何设置获取盒模型对应的宽和高

（1）dom.style.width/height（只能取到内联样式）

三种设值方式：内联、<style><style>、外联

??三种拿到的是渲染后的样式属性即时应用(三种设样式方式的都能获取到)

（2）dom.currentStyle.width/height（IE支持）

（3）window.getComputedStyle(dom).width/height (兼容火狐、谷歌不兼容IE)

1 var div=document.getElementsByTagName("div")[0];
2 console.log(getStyle(div,"background-color"));
3 function getStyle(ele,attr){
4     if(window.getComputedStyle){
5         return window.getComputedStyle(ele,null)[attr];
6     }
7     return ele.currentStyle[attr];
8 }

（4）dom.getBoundingClientRect().width/height （即时应用拿到元素的绝对位置 left top width height）

IE、Firefox3+、Opera9.5、Chrome、Safari支持，在IE中，默认坐标从(2,2)开始计算，导致最终距离比其他浏览器多出两个像素，我们需要做个兼容

 1 document.documentElement.clientTop;  // 非IE为0，IE为2
 2 document.documentElement.clientLeft; // 非IE为0，IE为2
 3 //分别加上外边据、内边距、边框和滚动条，用于测试所有浏览器是否一致。
 4 functiongGetRect (element) {
 5      var rect = element.getBoundingClientRect();
 6      var top = document.documentElement.clientTop;
 7      var left= document.documentElement.clientLeft;
 8      return{
 9          top    :   rect.top - top,
10          bottom :   rect.bottom - top,
11          left   :   rect.left - left,
12          right  :   rect.right - left
13      }
14   }

BFC

概念：块级格式化上下文

（IFC 行内格式化上下文）

它是一个独立的渲染区域，只有Block-level box（块）参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干

其实就是一些规则集合的名称

FC 格式化上下文：是W3C CSS2.1规范中的一个概念，定义的是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用

我们页面的根元素HTML就是一个典型的遵循BFC规则的元素，还可以通过一些属性显示BFC规则

如：

float属性不为none
position为absolute或fixed（position 不为 relative 或 static）
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

BFC的显示规则

内部的box会在垂直方向一个接一个排列

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）

基本原理:（渲染规则）

垂直方向会发生重叠（不重叠解决方案：给子元素加一层父元素给父元素创建一个BFC 包起来设置overflow:hidden; ）

// BFC垂直方向边距重叠
<section class="layout overlap">
    <style>
      .son {
        height: 100px;
        width: 200px;
        margin: 10px auto 50px;
        background-color: blueviolet;
      }

      .parent { // 添加BFC 消除重叠
        overflow: hidden;
      }
    </style>
    <div class="son"></div>
    <div class="parent">
      <div class="son"></div>
    </div>
    <div class="son"></div>
  </section>

设置左浮动右边会超出左边因为BFC

解决：给右边子元素添加BFC overflow: auto; 解决

<!-- BFC不与float重叠 --> 
<section class="layout">
     <style>
       .left {
         background-color: brown;
         float: left;
         width: 100px;
         height: 100px;
      }
      .right {
        background-color: chartreuse;
         height: 110px;
         overflow: anto; // 解决BFC重叠问题(overflow 不为visible)
       }
     </style>
     <div class="left"></div>
     <div class="right"></div>
   </section>

计算BFC高度时，浮动元素也参与计算

划重点
这一点可以解决浮动带来的父元素高度塌陷问题哦~

<!-- BFC子元素即使是float也会参与高度计算 -->
  <section id="float">
    <style>
      #float {
       background-color:crimson;
       overflow: auto; /* 清除了浮动*/
       /* float: left; */
      }
      .float {
        float: left;
        height: 30px;
      }
    </style>
    <div class="float">我是浮动元素</div>
  </section>

CSS盒模型、BFC

码农公寓

盒模型

BFC

BFC的显示规则

相关文章