盒模型
- 盒模型的组成：由里向外content,padding,border,margin.
- 基本概念：标准盒模型 和IE怪异盒模型
- 标准盒模型的宽高只是内容（content）的宽高
- IE盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。
- CSS如何设置这两种模型
<!--标准盒模型，默认-->
-webkit-box-sizing:content-box;
box-sizing:content-box;
<!--IE怪异盒模型-->
-webkit-box-sizing:border-box;
box-sizing:border-box;
- JS如何设置获取盒模型对应的宽和高
为了方便书写，以下用dom来表示获取的HTML的节点。
1. dom.style.width/height
这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。
2. dom.currentStyle.width/height
这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。
但这种方式只有IE浏览器支持。
3. window.getComputedStyle(dom).width/height
这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。
4. dom.getBoundingClientRect().width/height
这种方式是根据元素在视窗中的绝对位置来获取宽高的
5.dom.offsetWidth/offsetHeight
最常用的，也是兼容最好的。
BFC
-边距重叠（BFC可能造成外边距折叠，也可以利用它来避免这种情况）
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
- 两个外边距一正一负时，折叠结果是两者的相加的和。
- 用bfc可以解决垂直margin重叠的问题（边距重叠解决方案）
- 其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”
- 内部的box会在垂直方向，一个接一个的放置
- 每个元素的margin box的左边，与包含块border box的左边相接触（对于从做往右的格式化，否则相反）
- box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠
- bfc的区域不会与浮动区域的box重叠
- bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的
- 计算bfc高度的时候，浮动元素也会参与计算
- 怎么取创建bfc
- （总）（浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文））
- float属性不为none（脱离文档流）
- position为absolute或fixed
- display为inline-block,table-cell,table-caption,flex,inine-flex
- overflow不为visible
- 根元素
浮动（一般是一个盒子里使用了float浮动属性，导致父级对象盒子不能被撑开）
- 浮动负作用
- 背景不能显示 由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
- 边框不能撑开 如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
- margin padding设置值不能正确显示 由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
- 清除浮动
- 对父级设置适合CSS高度
- 父级div定义 overflow:hidden
- 在父级“”结束前加此div引入“class="clear"”样式。.clear{clear:both;}这样即可清除浮动。
