css 盒子模型

css 盒子模型（box model）

• 所有的html元素都可以看作盒子，在css中，”box model” 这一术语是用来布局的时候用的；css 盒子模型本质就是一个盒子，封装周围的html元素，他包括:外边距margin,边框（boder）,内边距（padding）， 实际内容（content）这四个属性

W3C盒子模型（标准盒子模型）和IE盒子模型（怪异盒模型）

标准盒子模型

• 元素的内容占据的空间是由width属性设置的，而内容周围的padding和border值是另外计算的，即在标准模式下的盒模型
• 盒子实际内容（content）的width/height=我们设置的width/height
• 盒子总宽度/高度=width/height+padding+border+margin。

.box{
  width:200px;
  height:200px;
  border:20px solid black;
  padding:50px;
  margin:50px;
 }

IE盒子模型（怪异盒模型）

• 在怪异盒模型的情况下，浏览器的width属性不是内容的宽度，而是内容，内边距和边框的宽度的总和，即使在怪异模式下的盒模型
• 盒子的（content）宽度+内边距padding+边框border 宽度= 我们设置的width（height也是如此）。
• 盒子总宽度/高度=width/height +margin = 内容区宽度/高度+padding+border+margin.

.box{
  width:200px;
  height:200px;
  border:20px solid black;
  padding:50px;
  margin:50px;
 }

怪异盒模型和标准和模型的兼容性问题

建议不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素

css 指定盒子模型的种类

• box-sizing 属性允特定的方式定义匹配某个区域的特定的元素；
• box-sizing:content-box//宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框；
• box-sizing:border-box// 为元素设定的宽度和高度决定了元素的边框盒，也就说：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框盒内边距才能得到内容的宽度和高度
• box-sizing:inherit:// 规定应从父元素继承box-sizing属性值；

box-sizing属性可以指定盒子模型种类：content-box指定盒子模型为W3C（标准和模型），border-box为IE盒子模型（怪异盒模型）