CSS盒模型的介绍

来源：cnblogs　　作者：没结尾的结尾　　时间：2018/12/6 10:06:10　　对本文有异议

CSS盒模型的概念与分类

CSS盒模型就是一个盒子，封装周围的HTML元素，它包括内容content、边框border、内边距padding、外边距margin。

CSS盒模型分为标准模型和IE模型；

标准模型和IE模型的区别

标准模型的width是内容content 的宽度； 设置方式： box-sizing:content-box;

IE模型的width是内容content + 边框border + 内边距paddig 的宽度； 设置方式： box-sizing:border-box;

通过js如何获取盒模型的宽高

1.dom.style.width/height 只能获取到dom的内联样式

2.dom.currentStyle.width/height 获取到的是dom的实际宽高，但这种方式只在IE中可以使用

3.window.getComputedStyle(dom,null).width/height 获取到的是dom的实际宽高，但是不支持IE

4.dom.offsetWidth/offerHeight 最常用的，兼容性最好的

第2，3个组合下就可以兼容ie与其他浏览器了

window.getComputedStyle ? window.getComputedStyle(obj,null).width : obj.currentStyle.width;

边距重叠

边距重叠就是相邻元素的边距重叠在一起，出现了预期外的布局。比如子元素设置了margin-top，父元素没有设置，但是父元素也有了上边距。

<!DOCTYPE html>
<html>
<head>
    <title>边距重叠</title>
    <meta charset="utf-8">
    <style type="text/css">
        html *{
            margin: 0;
            padding: 0;
        }
        .content{
            width: 500px;
            height:100px;
            background: green;
        }
        .parent{
            width: 300px;
            height: 300px;
            background: pink;
        }
        .child{
            width: 150px;
            height: 150px;
            background: yellow;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="content">
        占位内容区域
    </div>
    <div class="parent">
        <div class="child">
            
        </div>
    </div>
</body>
</html>