css3标准盒模型和怪异(IE)盒模型

前端和盒模型包括两种 分别是W3c盒模型和IE盒模型

W3C盒模型包括content、padding、border、margin 其中width = content

IE盒模型包括content、padding、border、margin 其中width = content+padding+border

在之后后来W3C在CSS3中新增了box-sizing的样式 属性包含content-box和border-box也就是box-sizing:content-box就是默认(在设置时候)的样式（W3C盒模型）box-sizing: border-box（IE盒模型）是width包含了content+padding+boder。

（1）标准盒模型 content-box 元素的总宽度width=content+padding+border

<template>
<!-- 标准盒模型 -->
  <div class="box">
    123
  </div>
  <!-- border  padding width  100+20+10 = 130-->
</template>


<style scoped>
.box{
  width: 100px;
  height: 100px;
  border: 10px solid red;
  padding: 5px;
}
</style>

　　
实际元素的宽度为：width=100+20+10 = 130
实际元素的高度为：height=100+20+10 = 130

（2）IE怪异盒模型 box-sizing: border-box 元素的总宽度width=width（用样式指定的宽度）

context=设置是元素宽度-border-padding

<template>
	<!-- 怪异盒模型 -->
  	<div class="box">
    	123
  	</div>
</template>

<style scoped>
.box{
  width: 200px;
  height: 200px;
  border: 5px solid red;
  padding: 10px;
  //设置怪异盒模型加这个
  box-sizing: border-box;
}
</style>

　　
实际元素的宽度为：width=200
实际元素的高度为：height=200