CSS盒子模型

任何元素都可以看作盒子，css盒子模型本质上是一个盒子，封装周围的HTML元素。每个盒子有自己的大小和位置，并且还影响着 其他盒子的大小与位置。

css盒子模型（Box module）有以下几部分组成：

• content（实际内容）
• padding（填充）
• border（边框）
• margin（边距）

通常情况下我们设置的背景，包含的区域为content+padding+border，margin为透明的，不包含在里面。

元素框的总宽度 = 元素（content）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度

元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。

css盒子模型有两种：

• W3C盒子模型(标准盒模型)：****box-sizing: content-box; ( 浏览器默认设置 )
• IE盒子模型(怪异盒模型) ： box-sizing: border-box;

W3C盒子模型(标准盒模型)

IE盒子模型(怪异盒模型)

标准模型和IE模型的区别：

计算宽度和高度的不同。
标准盒模型：盒子总宽度/高度 = width/height + padding + border + margin。（ 即 width/height 只是内容高度，不包含 padding 和 border 值 ）
IE盒子模型：盒子总宽度/高度 = width/height + margin = (内容区宽度/高度 + padding + border) + margin。（ 即 width/height 包含了 padding 和 border 值 ）

也就是元素的width/高度计算不同：

标准盒模型： 

元素width=content的width
元素height=content的height

IE盒子模型：

元素width=content的width+padding(左右)+border（左右）
元素height=content的height+padding（上下）+border（上下）

也就是当设置了元素的宽高之后，改变padding+border，标准盒模型的width不会改变，但是IE怪异模型会改变content的宽高（缩放）。

例：

<div class="box">
    content
</div>
.box{
    width: 100px;
    height: 100px;
    border: 5px solid red;
    padding: 0px;
    margin: 20px;}

修改padding为20px后，盒子占总空间的距离缩小，但是content的width没变。

.box{
    width: 100px;
    height: 100px;
    border: 5px solid red;
    padding: 0px;
    margin: 20px;
}

当设置为怪异模型后：content的宽度缩小，被挤压。盒子占据的总空间没变。

.box{
    width: 100px;
    height: 100px;
    border: 5px solid red;
    padding: 20px;
    margin: 20px;
    box-sizing: border-box;
}

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

（1）dom.style.width/height 只能取到行内样式的宽和高，style 标签中和 link 外链的样式取不到。
（2）dom.currentStyle.width/height （只有IE兼容）取到的是最终渲染后的宽和高
（3）window.getComputedStyle(dom).width/height 同（2）但是多浏览器支持，IE9 以上支持。
（4）dom.getBoundingClientRect().width/height 也是得到渲染后的宽和高，大多浏览器支持。IE9 以上支持，除此外还可以取到相对于视窗的上下左右的距离。
（6）dom.offsetWidth/offsetHeight 包括高度（宽度）、内边距和边框，不包括外边距。最常用，兼容性最好。

补充：行内元素，块级元素，行内块级元素

通过设置display：inline| block| inline-block可以改变元素的显示方式。

1.  对于行内元素（display:inline）如元素来说，设置margin-top/margin-buttom/padding-top/padding-buttom是无效的，也就是行内元素设置上面姐属性并不会影响周围元素的属性。但是设置margin-left/margin-right/padding-left/padding-right是可以影响周围元素的。例：

<div id="box"">
    <span class="item item1">test1</span>
    <span class="item item2">test2</span>
    <span class="item item3">test3</span>
</div>

span.item {
    background: black;    padding: 0px;     color: white;}
.item1{
    padding: 10px;
}

2. 对于块级元素**（display:block）**如

<div class="box">
   <div class="item1">test1</div>
</div>
.box{
    width:300px;
    height:100px;
    margin:0px;
    background: aqua
}
.item1{
     width: 100px;
     height: 50px;
     margin-top: 20px;
     background: bisque;
}

<div class="box">
   <div class="item1">test1</div>
</div>.box{
    width:300px;
    height:100px;
    margin:0px;
    padding:10px;
    background: aqua
}
.item{
     width: 100px;
     height: 50px;
     margin-top: 20px;
     background: bisque;
}