盒子模型和盒子相关的样式

盒子模型
  所有的元素都可以看作一个盒子
    内容盒子（w3c盒子，标准盒子）
      box-sizing：content-box
      width=内容的宽度
    边框盒子（怪异盒子，IE盒子）
      box-size:border-box
      width=内容+padding+border

 

盒子相关的样式
  每一个元素都是一个盒子
  width  宽度
  height  高度
  padding  内边距
    padding-top
    padding-right
    padding-bottom
    padding-left
  margin  外边距
    margin-top
    margin-right
    margin-bottom
    margin-left
  border  边框
    border-width  为元素指定边框的宽度
    border-style  为元素指定边框样式
      none  不设置
      hidden  隐藏
      dotted  显示一系列的点
      dashed  显示一系列小线段
      solid  显示一条单一的实心直线
      double  显示两条实心直线
      groove  边框雕刻效果(与ridge相反)
      ridge  与groove相反
      inset  嵌入式边界框(与outset相反)
      outset  突出的边界框
    border-color  为元素指定边框颜色
    border-radius  为元素指定圆角
  background  背景设置
    background-color  为元素设置一种颜色
    background-image  为元素设置一个背景图片
    background-size  设置背景的大小
    background-repeat  设置背景图片的重复方式
    background-origin  设定背景的起始点
    background-clip  设定背景的覆盖范围
    background-attachment  设置背景图片的固定点
    background-position  设置为背景图像初始位置，可以实现图片精灵