背景属性background
背景颜色background-color
        background-color 属性定义了元素的背景颜色。
        该属性只能设置背景颜色，如果不写默认是透明的transparent；
                   
        background-color: pink;
        background-color: transparent;
       
背景图片background-image（可能会单独用）
背景图片使用的状况：一般是在超级大图的时候使用或者一些装饰性的图标使用；
没有背景取值为none
background-image: none;
如果想要引入背景图片background-image要配合url获取背景图路径
  background-image: url(img/01.jpg);
背景图的平铺方式background-repeat（会单独用）
默认的背景图片是平铺的也就是取值为repeat，一般不写；
不平铺：no-repeat
水平方向平铺（X轴）：repeat-x
垂直平方向平铺（Y轴）：repeat-y
背景位置定位background-position
        图片定位：background-position:X坐标（水平方向）  Y坐标（垂直方向）；
背景图定位是通过设置水平方向（X轴）和垂直方向（Y轴）来进行位置移动的，取值可以是方位名词（left、right、top、bottom、center）、精确的像素值、方位名词和精确的像素值混合使用；
如果书写的时候只写了一个值默认表示为水平方向（X轴）的值，那么垂直方向（Y轴默认是居中center），所以建议大家两个值都写；
方位名词：left和right只控制水平方向，top和bottom控制垂直方向，center水平和垂直都控制；
方位名词（left、right、top、bottom、center）
使用的时候虽说不用注意X和Y轴的顺序，但是我们强制要求我们一个值就是X轴，第二个值就是Y轴；
如果想要插入大图，我们要保证图片中心的内容居中显示，我们需要设置水平方向的定位为center居中，垂直方向的定位为top居顶；
/* 左上角 */
            background-position: left top;
            /* 右上角 */
            background-position: right top;
/* 居左垂直居中 */
            background-position: left center;
/* 水平垂直都居中 */
            background-position: center center;
精确的像素值
X和Y轴可以取精确的像素值，第一个值一定是X轴（水平方向）第二个值是Y轴（垂直方向），如果只写一个值表示X轴，Y轴就默认为center；
方位名词和精确的像素值混合使用
如果使用的是混合单位，默认第一个是X轴（水平放向），第二个是Y轴（垂直方向），不能更改；
背景固定background-attachment
        设置背景图像是否固定或随着页面的其余部分滚动
      background-attachment : scroll | fixed
background-attachment: fixed;
背景的复合写法（重要）
        background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
        background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 X轴 Y轴；
•        注意：属性值没有书写顺序，没有的属性可以省略不写；
•              实际工作中建议大家使用复合写法，而且顺序不要更改；
背景颜色半透明rgba
•        r代表红色。g代表绿色，b代表蓝色，a表示透明
•        rgb的取值是0-255，a的取值是0-1之间
•        背景颜色半透明：background：rgba(0,0,0,0.3);
•         R红色 g绿色 b蓝色  a透明度小数点前面的0可以不写；
•        注意：设置了背景颜色透明是不会影响盒子里面的内容的透明度的；
•            background:rgba( 0, 0, 0, .3);
   该方法只能让背景颜色透明，内容不会透明

opacity透明
该属性可以让整个盒子透明，包括内容页跟着透明，一般我们在后期css3阶段做盒子的显示和隐藏动画使用，
取值是0-1之间
opacity: .5;

关于代码中坐标轴的说明
前端页面中X方向向右是正方向，Y正方向向下为正

CSS三大特性
层叠性（覆盖性）
        层叠性（就近原则）：如果一个标签书写的样式重叠冲突了，后写的css样式会把先写的样式覆盖掉，样式不冲突的话就不会层叠;
继承性（只有文字控制属性可以）
        继承性：有一些css属性子级是可以继承父级的，一般文字控制属性都会被继承，a标签除外，需要单独设置；
        能够被继承的样式有text-  font- line- color
        子级元素在继承父级元素文字的样式的时候，超链接a在继承父级元素的字体颜色color的时候，不会被继承，我们需要用后代选择器给超链接a单独设置样式；
                .box {
                    color: red;
                }
                .box a {
                    color: red;
                }
        一般在实际开发中我们可以在body中设置行高为1.5，表示行高是当前文字大小的1.5倍，设置到body中可以被继承给所有的元素；
                body {
                    /* 当然还有其他属性 */
                    line-height: 1.5;
                }
       
       

权重优先级
权重的优先级是有不同的选择器之间进行对比的，
        第一等：代表行内样式，如: style=””，权值为1000。
             1,0,0,0
        第二等：代表ID选择器，如：#content，权值为100。
             0,1,0,0
        第三等：代表类，伪类和属性选择器，如.content，权值为10。
             0,0,1,0
        第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
              0,0,0,1
        !important  提高权重，有提权的效果，有了样式优先生效；
        继承性的权重是0，通配符选择器的权重是0
               0,0,0,0
        权重叠加是没有进位的

网页布局本质
        网页布局的核心本质： 就是利用 CSS 摆放盒子。


盒子模型
盒子模型的组成：
     内容  就是实际的大小
     边框：border
  内边距：padding   拉开内容到盒子边缘的距离；
  外边距： margin    拉开盒子与盒子之

背景属性background
背景颜色background-color
        background-color 属性定义了元素的背景颜色。
        该属性只能设置背景颜色，如果不写默认是透明的transparent；
                   
        background-color: pink;
        background-color: transparent;
       
背景图片background-image（可能会单独用）
背景图片使用的状况：一般是在超级大图的时候使用或者一些装饰性的图标使用；
没有背景取值为none
background-image: none;
如果想要引入背景图片background-image要配合url获取背景图路径
  background-image: url(img/01.jpg);
背景图的平铺方式background-repeat（会单独用）
默认的背景图片是平铺的也就是取值为repeat，一般不写；
不平铺：no-repeat
水平方向平铺（X轴）：repeat-x
垂直平方向平铺（Y轴）：repeat-y
背景位置定位background-position
        图片定位：background-position:X坐标（水平方向）  Y坐标（垂直方向）；
背景图定位是通过设置水平方向（X轴）和垂直方向（Y轴）来进行位置移动的，取值可以是方位名词（left、right、top、bottom、center）、精确的像素值、方位名词和精确的像素值混合使用；
如果书写的时候只写了一个值默认表示为水平方向（X轴）的值，那么垂直方向（Y轴默认是居中center），所以建议大家两个值都写；
方位名词：left和right只控制水平方向，top和bottom控制垂直方向，center水平和垂直都控制；
方位名词（left、right、top、bottom、center）
使用的时候虽说不用注意X和Y轴的顺序，但是我们强制要求我们一个值就是X轴，第二个值就是Y轴；
如果想要插入大图，我们要保证图片中心的内容居中显示，我们需要设置水平方向的定位为center居中，垂直方向的定位为top居顶；
/* 左上角 */
            background-position: left top;
            /* 右上角 */
            background-position: right top;
/* 居左垂直居中 */
            background-position: left center;
/* 水平垂直都居中 */
            background-position: center center;
精确的像素值
X和Y轴可以取精确的像素值，第一个值一定是X轴（水平方向）第二个值是Y轴（垂直方向），如果只写一个值表示X轴，Y轴就默认为center；
方位名词和精确的像素值混合使用
如果使用的是混合单位，默认第一个是X轴（水平放向），第二个是Y轴（垂直方向），不能更改；
背景固定background-attachment
        设置背景图像是否固定或随着页面的其余部分滚动
      background-attachment : scroll | fixed
background-attachment: fixed;
背景的复合写法（重要）
        background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
        background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 X轴 Y轴；
•        注意：属性值没有书写顺序，没有的属性可以省略不写；
•              实际工作中建议大家使用复合写法，而且顺序不要更改；
背景颜色半透明rgba
•        r代表红色。g代表绿色，b代表蓝色，a表示透明
•        rgb的取值是0-255，a的取值是0-1之间
•        背景颜色半透明：background：rgba(0,0,0,0.3);
•         R红色 g绿色 b蓝色  a透明度小数点前面的0可以不写；
•        注意：设置了背景颜色透明是不会影响盒子里面的内容的透明度的；
•            background:rgba( 0, 0, 0, .3);
   该方法只能让背景颜色透明，内容不会透明

opacity透明
该属性可以让整个盒子透明，包括内容页跟着透明，一般我们在后期css3阶段做盒子的显示和隐藏动画使用，
取值是0-1之间
opacity: .5;

关于代码中坐标轴的说明
前端页面中X方向向右是正方向，Y正方向向下为正

CSS三大特性
层叠性（覆盖性）
        层叠性（就近原则）：如果一个标签书写的样式重叠冲突了，后写的css样式会把先写的样式覆盖掉，样式不冲突的话就不会层叠;
继承性（只有文字控制属性可以）
        继承性：有一些css属性子级是可以继承父级的，一般文字控制属性都会被继承，a标签除外，需要单独设置；
        能够被继承的样式有text-  font- line- color
        子级元素在继承父级元素文字的样式的时候，超链接a在继承父级元素的字体颜色color的时候，不会被继承，我们需要用后代选择器给超链接a单独设置样式；
                .box {
                    color: red;
                }
                .box a {
                    color: red;
                }
        一般在实际开发中我们可以在body中设置行高为1.5，表示行高是当前文字大小的1.5倍，设置到body中可以被继承给所有的元素；
                body {
                    /* 当然还有其他属性 */
                    line-height: 1.5;
                }
       
       

权重优先级
权重的优先级是有不同的选择器之间进行对比的，
        第一等：代表行内样式，如: style=””，权值为1000。
             1,0,0,0
        第二等：代表ID选择器，如：#content，权值为100。
             0,1,0,0
        第三等：代表类，伪类和属性选择器，如.content，权值为10。
             0,0,1,0
        第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
              0,0,0,1
        !important  提高权重，有提权的效果，有了样式优先生效；
        继承性的权重是0，通配符选择器的权重是0
               0,0,0,0
        权重叠加是没有进位的

网页布局本质
        网页布局的核心本质： 就是利用 CSS 摆放盒子。


盒子模型
盒子模型的组成：
     内容  就是实际的大小
     边框：border
  内边距：padding   拉开内容到盒子边缘的距离；
  外边距： margin    拉开盒子与盒子之