CSS盒模型-盒子大小尺寸

一、盒子空间尺寸

• 说明

  使用宽度width和高度height可以对盒子的大小进行控制。

  width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。

• 盒子实际占有宽度区域

  =margin-left + border-left + padding-left+width+padding-right+border-right+margin-right

• 盒子实际占有高度的区域

  =margin-top + border-top + padding-top + height + padding-bottom+ border-bottom + margin-bottom

  

二、标准盒模型

标准盒模型（W3C盒子模型），设置的width或height是对 实际内容（content）的width或height进行设置，内容周围的border和padding另外设置，即盒子模型的width（height）=设置的content的宽高+padding+border+margin
注：除内容content外，其他为上下左右都有

怪异盒模型

怪异盒模型（IE盒子模型），设置的width或height是对 实际内容（content）+内边距（padding）+边框（border）之和的width和height进行设置的，其盒模型的width（height）=设置的width（height）+外边距margin

解决两者的兼容问题：

可尝试对父元素使用内边距，对子元素使用外边距

box-sizing的应用

box-sizing 属性允许你以特定的方式定义匹配某个区域的特定元素。即指定盒模型的类型是标准盒模型，还是怪异盒模型。

• box-sizing值为content-box

  宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。（即 标准盒模型）

• box-sizing值为border-box

  为元素设定的宽度和高度决定了元素的边框盒，就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。（即 怪异盒模型）
  box-sizing值为inherit时：规定应从父元素继承 box-sizing 属性的值。

• 区别

  content-box和border-box的主要区别是二者的盒子的宽度是否包含元素的边框和内边距。

• 举例

  <div id="box1" class="box"></div>
  <div id="box2" class="box"></div>
  <style>
  	.box{
          width:100px;
          height:100px;
          background:red;
          border:5px solid yellow;
          padding:10px
      }
  	#box1{box-sizing:content-box}
  	#box2{box-sizing:border-box}
  </style>