CSS3-盒子模型

#CSS3-盒子模型

盒子模型顾名思义就是，在网页中装载元素的盒子，有宽，有高，有边距。类似于套娃，可以一个盒子套着另外一个盒子。

• 标准盒子模型（box-sizing:content-box）

  在开始之前希望你可以记住，标准盒子模型是个老实人，你给他多少空间，他就绝不会想着padding，margin。

  div{
      background-color:salmon;
  
      width:70px;
  
      height:50px;
  
      padding:50px 50px;
  
      margin:50px 50px;
      border:10px solid red;
  
  }
  

  

  1. 标准盒子模型下：我们所设置的宽高是真实内容的宽高，与border，内外边距无关。

  2. width(height) = content（图中的淡蓝色部分，就是我们设置的70px）

• IE（怪异）盒子模型（box-sizing:border-box）

  相反IE盒子模型就像是一个贪心的坏小子，老是想着占别人便宜。

  div{
      background-color:salmon;
  
      width:180px;
  
  	height:50px;
  
  	padding:50px 50px;
  
  	margin:50px 50px;
  
  	border:10px solid red;
  
  	box-sizing: border-box;
  
  }
  

1. IE盒子模型下：我们所设置的宽高与border，padding有关。

2. width(height) = border + padding + content

3. 180px = 10px * 2 + 50px * 2 + 60px（图中的淡蓝色部分，就是我们计算出的的60px）

px = 10px * 2 + 50px * 2 + 60px（图中的淡蓝色部分，就是我们计算出的的60px）