css盒模型

1.ie模型和标准模型

ie与标准的模型计算宽度和高度不同

ie = content+padding+border

标准 = content

 

2.css如何设置这两种 模型呢

默认的是标准模型

box-sizing:content-box;

box-sizing:border-box;

 

3.js如何设置获取盒模型的宽高

dom.style.width/height 内联属性（行内属性）

dom.currentStyle.width/height    渲染结果  但是之后ie兼容

window.getComputedStyle(dom).width/height

dom.getBoundingClientRect().width/height 通过top left 计算

 

 

4.根据盒模型解释边距重叠

 父与子的关系

BFC是什么

解决边距重叠 

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

原理：

1.bfc是一个独立的容器，里外都不影响

如何创建BFC

overflow：hidden

1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

或

1、display: table 可能引发响应性问题
2、overflow: scroll 可能产生多余的滚动条
3、float: left 将把元素移至左侧，并被其他元素环绕
4、overflow: hidden 将裁切溢出元素

 

使用场景

边距重叠  兄弟元素上下排列   5px auto 15px   会取15px

 解决：给子元素加一个父元素 overflow：hideen

left：folat：left

right：无

如果高度增高，right会流向left的底部

加上overflow：auto

自己是自己的 right不会流向left

 

float元素

把父元素变成bfc元素就会参与计算，有了高度