<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>css盒模型的理解和应用</h1>
<h2>1、概念</h2>
<p>一个元素由content/padding/border/margin组成</p>
<h2>2、标准盒模型、IE盒模型的区别</h2>
<p>
宽、高计算方式不同
标准盒模型：width= content的宽
IE盒模型：width= content的宽+ padding的宽+ border的宽
（高同理）
</p>
<h2>3.如何设置这两种模型</h2>
<p>
标准：box-sizing: content-box (默认)
IE： box-sizing: border-box
</p>
<h2>4.获取元素宽高的方式</h2>
<ol>
<li>
<p id="p1" style="width:500px">document.getElementById('p1').style.width</p>
<p>缺点：只能获得行内样式设置的宽</p>
</li>
<li>
<p>dom.currentStyle.width</p>
<p>行内、内嵌、外链的宽都可以获取，但只兼容IE</p>
</li>
<li>
<p>window.getComputedStyle(dom).width</p>
<p>行内、内嵌、外链的宽都可以获取，但只兼容firefox/chorme</p>
</li>
<li>
<p>dom.getBoundingClientRect().width</p>
<p>用于获取元素相对视窗的绝对位置的api，可获得left/top/width/height</p>
</li>
</ol>
<style>
.parent{
background-color: yellow;
}
.parent .son{
background-color: yellowgreen;
margin-top:px;
}
</style>
<h2>5.盒模型解释边距层叠/掉盒子</h2>
<div style="background:#cccccc;margin:0">
（1）子元素设置margin-top,父盒子会掉盒子
</div>
<div class="parent">
<div class="son">子元素</div>
</div>
<style>
.sibling1{
margin-bottom:px;
background-color: green;
}
.sibling2{
margin-top: px;
background-color: green;
}
</style>
<div style="background:#cccccc;margin:0">
（2）兄弟元素之间，margin-top、margin-bottom会层叠，取最大的
</div>
<div class="sibling1">兄弟元素1</div>
<div class="sibling2">上面盒子的兄弟元素2</div>
更多参考：<a href="http://www.w3school.com.cn/css/css_margin_collapsing.asp">http://www.w3school.com.cn/css/css_margin_collapsing.asp</a>
<h2>6.解决边距层叠/掉盒子方案BFC:块级格式化上下文</h2>
<ul>
<li>将元素声明为BFC，BFC为页面上一个独立的容器，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素></li>
<li>BFC不会与浮动元素的box重叠：可解决浮动元素环绕填充其他元素的问题</li>
<li>计算BFC高度时，盒子内的浮动子元素也会参与计算：清除浮动的原理</li>
<li></li>
</ul>
<h2>7.如何声明为BFC</h2>
<ol>
<li>display:inline-block/table相关</li>
<li>overflow不为visible</li>
<li>floar不为none</li>
<li>position:absolute/fixed</li>
</ol>
</body>
</html>
![CSS的伪元素和伪类的区别[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)