浏览器默认css样式表 css盒模型

二者区别，前者的宽度是内容宽度，后者的宽度是内容+内边距+border

二、如何设置这两种盒模型呢？

box-sizing:content-box ; 为标准盒模型

box-sizing:border-box：为IE盒模型

三、js如何设置获取对应盒模型对应的宽高

1、dom.style.width/height

这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。

2、dom.currentStyle.width/height 不管是内联还是外联，获得到的是浏览器渲染后的样式，此方法只有IE支持

3、window.getComputedStyle(dom).width/height 与2的原理相同，兼容Firefox等

4、dom.getBoundingClientRect().width/height 此方法也能精确拿到元素的宽高，是根据元素在视窗中的绝对位置来获取宽高的

5、dom.offsetWidth/offsetHeight这个就没什么好说的了，最常用的，也是兼容最好的

四、边距重叠

1、什么是边距重叠？

如下图，父元素没有设置margin-top，而子元素设置了margin-top：20px;可以看出，父元素也一起有了边距。浏览器默认css样式表

2、解决方法BFC

英文拼写为 Block Formatting Context 直译为“块级格式化上下文”

原理：

内部的box会在垂直方向，一个接一个的放置

每个元素的margin box的左边，与包含块border box的左边相接触（对于从做往右的格式化，否则相反）

box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠

bfc的区域不会与浮动区域的box重叠

bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的

计算bfc高度的时候，浮动元素也会参与计算

怎么创建BFC:

float属性不为none（脱离文档流）

position为absolute或fixed

display为inline-block,table-cell,table-caption,flex,inine-flex

overflow不为visible

根元素

应用场景：

自适应两栏布局

清除内部浮动

防止垂直margin重叠

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-86240-1.html