盒子模型总结

  每个元素都是一个盒子
    width    宽度
    height   高度
    padding  内边距
        padding-top
        padding-right
        padding-bottom
        padding-left
    margin   外边距
        margin-top
        margin-right
        margin-bottom
        margin-left
    border
        1)border-width        为元素指定边框的宽度

            关键字    thin 、medium、thick
            单位    px、em

        2)border-style        为元素指定边框样式

            none    不设置
            hidden     隐藏
            dotted     显示一系列的点
            dashed 显示一系列小线段
            solid     显示一条单一的实心直线
            double     显示两条实心直线
            groove     边框雕刻效果(与ridge相反)
            ridge     与groove相反
            inset     嵌入式边界框(与outset相反)
            outset     突出的边界框

        3)border-color        为元素指定边框颜色
        4)border-radius        为元素指定圆角边框的半径
        5)background
              background-color         为元素设置一种颜色
              background-image        为元素设置一个背景图片

                  none
                  url()

              background-size         设置背景的大小

                  cover      背景铺满整个屏幕，（尽量不要使用大图覆盖小范围）     把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。按照背景定位区域的最大边扩展。
                  contain    把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。按照背景定位区域的最小边扩展，如果不重复，可能背景定位区域有一部分没有背景图片。
                  百分比
                  绝对值

              background-repeat         设置背景图片的重复方式

                  repeat          为了覆盖整个背景范围，背景图片尽可能多的重复，在背景边缘切割(clipping)最后一个图片以使用整个背景范围。
                  repeat-x         x方向平铺一行
                  repeat-y         y方向平铺一行
                  no-repeat     不重复

              background-origin         设定背景的起始点

                  padding-box    默认，背景图片从内边距的外边缘开始绘制
                  border-box    背景图片从边框的外边缘开始绘制    
                  content-box    背景图片从内容区开始绘制

              background-clip         设定背景的覆盖范围

                  border-box    默认，背景位于边框以内
                  padding-box    背景位于内边距以内
                  content-box    背景位于内容区

              background-attachment     设置背景图片的固定点
                  scroll     默认值，背景图像会随着页面其余部分的滚动而移动，背景固定在自身元素上，背景图相对于元素固定，背景随页面滚动而移动，即背景和元素绑定。
                  fixed     背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了视口区上。
                  local    背景图相对于元素内容固定
                    存在内部滚动条的情况下，scroll就相当于fixed，而local就相当于scroll

              background-position         设置为背景图像初始位置，可以实现图片精灵

                  关键字
                  top left
                  top center
                  top right
                  center left
                  center center
                  center right
                  bottom left
                  bottom center
                  bottom right
                坐标

              background             背景设置的速记写法

盒子模型
    所有的元素都可以看做盒子
      1）内容盒子（w3c盒子、标准盒子）

          box-sizing:content-box;
            width = 内容宽度
            height = 内容高度

      2）边框盒子（怪异盒子、IE盒子）
         
         box-sizing:border-box;
           width = 内容 + padding + border

元素的默认样式

    body    默认有个外边框 16px
    a       text-decoration: none;
    p       margin:0px;
    h1-h6   margin:0px;
    ul{
        list-style: none;
        padding: 0px;
      }
 
  https://meyerweb.com/eric/tools/css/reset/