CSS 盒子模型

CSS 盒子模型（Box Model）

• element 元素
• width 宽度
• height 高度
• padding 内边距
• border 边框
• margin 外边距
• width = element-width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
• height = element-height + padding-top + padding-bottom+ border-top + border-bottom + margin-top + margin-bottom
  如图：
  
• box-sizing
  • box-sizing:element-box：此时 width、height 的值只代表 element 元素本身宽高；
  • box-sizing:boeder-box：此时 width、height 的值是元素的宽高、border 的宽高、以及 padding 宽高的总和；
  • box-sizing:inherit：从父元素中继承 box-sizing 属性的值，此方法可以省去在子元素中一些需要加加减减的地方（节约性能），
    • 全局设置 border-box 很好，它有一个关键作用——让有边框的盒子正常使用百分比宽度。