CSS盒模型

CSS盒模型

基本概念：标准模型 + IE模型

border margin padding content  

1. 标准模型和IE模型的区别

计算宽度和高度的不同
标准模型的宽高：是content -->width
IE模型的是包括 content + border + padding

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

标准：box-sizing:content-box
IE：  box-sizing:border-box

3. Js如何获取盒模型对应的宽和高

(1).dom.style.width/height
(2).dom.currentStyle.width/height 拿到渲染后的数据 只有IE支持
(3). window.getComputedStyle(dom).width/height 用这个 兼容性好
(4).dom.getBoundingClientRect().width/height

4. 实例提（根据盒模型解释边距重叠）

*{
	margin: 0;
	padding:0;
}
 #nav{
	background: #fc1;
}
.childen{
	height: 100px;
	 100%;
	background: #f00;
	margin-top: 10px;
}

</style>
<section id="nav">
<article class="childen">
	
</article>
</section>
		
		

5. BFC(边距重叠解决的方案)

    跨级格式化上下文
    
    原理：BFC 渲染规则 
    (2).如何创建 
    float属性不为none
    overflow不为visible(可以是hidden、scroll、auto)
    position为absolute或fixed
    display为inline-block、table-cell、table-caption
    
    (3)作用
    BFC的作用

    1. 清除内部浮动
    我们在布局时经常会遇到这个问题：对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden。
    2. 垂直margin合并
    在CSS当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
    折叠的结果：

    两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
    两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
    两个外边距一正一负时，折叠结果是两者的相加的和。
    这个同样可以利用BFC解决。关于原理在前文已经讲过了。
    3. 创建自适应两栏布局
    在很多网站中，我们常看到这样的一种结构，左图片+右文字的两栏结构。