CSS盒模型详解

基本概念

盒模型的基本组成： 从里向外分别是 Content、Padding、Border、Margin. 

但盒模型分为： 标准模型 和 IE模型.

                      标准模型（content-box）

                   IE模型（border-box）

        #box {
            width: 100px;
            height: 100px;
            padding: 10px;
            margin: 10px;
            border: 4px solid #000;
        }

这是上诉两个模型部分样式代码。可以看到：

标准模型： content内容宽高不受内边距与边框影响，盒模型宽高由content+padding+border组成

IE模型：     content内容宽高受边距与边框影响， 盒模型宽度即为content宽高。content内包含padding和border。

 

设置两种模型的方法：

 由CSS3属性 box-sizing 设置。

语法：

   box-sizing: content-box(标准模型)|border-box(IE模型)|inherit;

JS如何设置获取盒模型对应的宽和高：

1.  dom.style.width/height 

　　只能取到dom元素内联样式所设置的宽高。故外联和嵌套样式无法获取。

 2. dom.currentStyle.width/height 

　　获取页面渲染完成后的结果。（但只支持IE）

 3. window.getComputedStyle(dom).width/height

　　也是获取页面渲染后结果，这个方法能获取当前元素css的最终属性值。但是该方法只能获取值，不能设置。

 4. dom.getBoundingClientRect().width/height

　　根据元素在视窗中的绝对位置（左上角）来获取宽高的.可以获得四个元素（top,left,width,height）

 5.dom.offsetWidth/offsetHeight

　　offsetWidth/offsetHeight获取的是盒模型的宽度/高度。

        顺便想起来了这张图，收藏了许久。刚开始比较懵，一条一条看还是蛮有用的。

文章内容主要来自慕课网课程，并加上了自己的理解和收集的知识。