盒子模型

1.盒子模型

• 盒子由content（内容），padding（内边距），border（边框），margin（外边距）组成。
  例子（标准盒模型）

<div id="div1">我是div</div>
#div1 {
        width:100px; 
        height: 50px; 
        width:100px; 
        margin: 7px
        padding: 20px; 
        border: 5px solid black; 
    }

image.png
image.png

实线是盒子宽（高）= 内容宽（高）+左（上）内边距 + 右（下）内边距 + 左（上）边框 + 右（下）边框 + 左（上）外边距 + 右（下）外边距

• 盒模型分为标准盒模型和怪异盒模型(IE模型)

box-sizing：content-box   //（默认）标准盒模型 本身内容宽高+边框+内边距
box-sizing：border-box    //（指的是IE模型）怪异盒模型 本身内容的宽高度

image.png

css3 新增 box-sizing 属性

• box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。
• 语法：box-sizing: content-box|border-box|inherit:
• content-box：这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外，此时width属性 = content；div的实际宽度 = width属性 + 2 * padding + 2 * border + 2 * margin；
• border-box： 指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。此时 width属性 = content + 2 * padding + 2 * border；div的实际宽度 = width属性 + 2 * margin；
• 从父元素继承