盒模型和BFC

文章目录

• • 一、盒模型
  • • 1.什么是盒模型
    • 2.盒子模型有哪两种
    • 3.标准和怪异模型的转换
    • • 4.JS盒模型
    • 二、BFC
    • • 1.什么是BFC
      • 2.如何触发BFC？
    • 3.BFC的原理？(面试可不说，但要理解)

一、盒模型

1.什么是盒模型

• 在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。
  

2.盒子模型有哪两种

标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)
怪异模式下: 一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）（IE浏览器）

3.标准和怪异模型的转换

box-sizing:content-box; 将采用标准模式的盒子模型标准
box-sizing:border-box; 将采用怪异模式的盒子模型标准
box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。

4.JS盒模型

怎么获取和设置box的内容宽高
IE: dom.currentStyle.width/height
非IE: window.getComputedStyle(dom).width/height

var obj = document.getElementById("box");

var style = null;
if (window.getComputedStyle) {
    style = window.getComputedStyle(obj, null);    // 非IE
} else { 
    style = obj.currentStyle;  // IE
}
alert("width=" + style.width + "\nheight=" + style.height);

二、BFC

1.什么是BFC

BFC全称Block Formatting Contexts翻译过来就是块级格式化上下文
BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，我们可以利用它来解决外边距重叠的问题，BFC并不是专门用来解决这个问题而创的；

2.如何触发BFC？

在box属性值为这些的情况下，都会让所属的box产生BFC。

overflow: auto/ hidden;
position: absolute/ fixed;
float: left/ right;
display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

也可以用排除法：

overflow的值不是visible；
position的值不是static或relative
float的值不是none
display的值是inline-block 或 table-cell 或 flex 或 table-caption 或
inline-flex

3.BFC的原理？(面试可不说，但要理解)

1. BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
2. BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
3. BFC的区域不会与float重叠。
4. 计算BFC的高度时，浮动元素也被计算在内。