css——布局——盒子模型专精

组成

自外而内：

• margin （盒子之间的距离）
• border（边框）
• padding（内边距：边框和内容间的距离
• content内容

css属性

对比组成：少了 content ，多了 width；也就是说：content由width决定（width应该根据想要的content设置）

• margin （盒子之间的距离）
• border（边框）
• padding（内边距：边框和内容间的距离
• width/height（宽/高）
• border（边框）
  • 粗细：border-width(以px为单位)
  • 样式:border-style（solid实线边框 dashed虚线边框 dotted点线边框 ····越炫酷的兼容性越不大好)
  • 颜色:border-color
  • 简写：不要求顺序
  • 合并相邻的边框：border-collapse:collapse
  • 盒子的border会影响大小

width与content关系

关系由css属性box-sizing决定

box-sizing:content-box

• 为标准模式 ，又称标准盒模型（默认情况）
• width = css( content ）
  

box-sizing:border-box)

• IE盒模型（怪异模式）
• width = css( content + padding-left +padding-right + border-left + border-righ）