前端面试准备--2.css盒模型

css盒模型

1.题目：谈谈你对css盒模型的认识（从理论转化到应用）

• 基本概念：标准模型+ IE模型
  border、margin、padding、content
• 标准模型
• IE模型

1、标准模型和IE模型区别

1.计算宽度和高度的不同，怎么不同的，怎么计算的；

• 标准模型的宽度是：content的宽度，不包含padding和border；
• IE模型的宽度是：宽和高是计算 border 和 padding 的。

css如何设置这两种模型：

box-sizing:content-box;（标准模型--浏览器默认）
box-sizing:border-box;（IE模型）

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

  1.dom.style.width/height(只能取内联样式的宽和高)
      ----getElementById('div').style.width/height
            
  2.dom.currentStyle.width/height
     (渲染之后的宽高--只有IE支持)
        
  3.window.getComputedStyle(dom).width/height
    (渲染之后的宽高--兼容性通用型更好一些)
            
 4.dom.getBoundingClientRect().width/height
       (适用场景：计算一个元素的绝对位置；这个绝对位置根据视窗
也就是左上角这个位置的绝对位置) 这个方法可以拿到四个元素：left top width height

实例题：（根据盒模型解释边距重叠）

一.要看父元素的盒模型怎么设置的：

1.父子元素边距重叠

overflow:hidden;解决重叠问题；相当于给父元素创建了一个BFC（块级格式化上下文）

    eg:子元素高度为100px，距父元素顶部10px，计算父元素的高度？
    1.因为父元素和子元素存在边距重叠，所以父元素高度为100px；
    2.设置了overflow：hidden；之后父元素高度为110px；

2.兄弟元素边距重叠

兄弟元素每个都有上边距或者下边距，发生重叠原则取最大值；

    eg:一个元素下边距为30px，下面那个元素上边距为5px，会合并成30px两者取最大值

3.空元素

空元素设置上下边距，margin-top\margin-bottom取一个最大值，作为它的一个边距

4.BFC（边距重叠解决方案）--另一种IFC

BFC基本概念：块级格式化上下文

• BFC的原理（渲染规则）：

1.在BFC这个元素的垂直方向的边距会发生重叠
2.BFC的区域不会与浮动元素的相重叠（清除浮动布局）
3.BFC在页面是一个独立的容器，外面的元素不会影响它里面元素，反过来一样
4.计算BFC高度的时候浮动元素也会参与计算

• 如何创建BFC？

1.overflow：hidden | auto | visible
2.float值不是null（只要有浮动，当前元素就创建了BFC）
3.position值不是static或者relative就创建了BFC（设置成absolute，fixed）
4.display属性是为inline-box，table-cell（也就是和table相关的）

• BFC使用场景有哪些？

1.父级元素里面有三个子元素，子元素margin：5px auto 25px;
之后就第一个元素的上边距是5，其他的都是25px，这有一个边距重叠的问题；在写页面布局的时候不想有这个重叠，就给子元素增加一个父元素，父元素创建一个BFC就能解决问题；

2.布局相关的BFC应用

• BFC垂直方向边距重叠

垂直方向三个p元素，p{margin:5px auto 25px},之后第二个第三个的上边距变成25px；发生了边距重叠，取得的是最大值；如果不想重叠，就需要再那个元素在加一个父级div，对父级div创建BFC（overflow：hidden）

• BFC不与float重叠

两栏布局，左边宽度固定左浮动height：100px，右边自适应height：120px;右边的高度增高的时候，右边的背景色已经侵染到了左侧，（当布局的时候左侧没有float元素，它依然会往左侵染），解决方法：给右侧元素创建一个BFC（overflow：atuo）

• 清除浮动；（BFC子元素即使是float元素也会参与计算）

     .layout{background:orange}
     .float{float:left;}
  
  -->只看到.float的内容没看到父级的背景颜色；父级高度为0；
  --->一个普通的元素当子元素是float元素的时候，它的高度计算没有包含进来；
  
  .layout{background:orange;overflow:hidden;}
  .float{float:left;}
  
  --》给layout设置BFC之后，float内容有了背景颜色，父级有了高度；
  ---->当把外层元素设为BFC的时候，子元素的浮动元素也会参与父级的高度计算；
  

• BFC的元素在计算高度的时候会考虑内部子元素float
  （子元素是float也不影响父元素高度的计算，它的内容页会被参与进来）

• --IFC（内联元素的格式化上下文）