CSS盒模型的介绍

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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>