css中和模型及其相关的问题

什么是css和模型
又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素
IE模型区别是宽度和高度不同，标准模型宽度和高度是content的高度，IE模型的宽度是border 和padding

• css 如何设置这两种模型 box-sizing：content-box

box-sizing：border-box IE模式下 padding计算在里边
box-sizing：content-box 默认

• 获取css中dom的宽高方法

第一种

dom.style.height  dom.style.width

这种情况有一个只有在内联样式中能够获取到 而写到上边或者外联都获取不到样式
第二种

dom.currentStyle.width  只有IE支持

第三种方法

window.getComputedStyle(a).height

第四种方法
原生JS提供了一个getBoundingClientRect()方法，用于获取左，上，右和下分别相对浏览器视窗的位置。

right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离
BFC 是什么？
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干
原理：bfc垂直方向边距发生重叠，bfc区域不会与浮动元素的box重叠
bfc是一个容器外边元素不会影响里边的元素，计算bfc高度浮动元素也会参与计算
如何形成：
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
作用：
创建BFC来避免垂直外边距叠加
创建BFC来清除浮动
创建BFC来实现自适应布局