html、css

1、标签的background属性

background有四个属性：颜色、图片、平铺、定位postion
用法：background-color:green
在前边我们已经说过了css的引入方式，那么以后我就会在css文件里添加样式了，首先在html中创建一个div标签，然后在链接完成的css文件中输入以下的内容，然后就会出现一个绿色的长方形框

div{
        width:100px;
        height:300px;
        background:green;
    }

background-image的使用方式如下：background-image:url() no-repeat;,具体实例如下：

div{
width:1000px;
height:460px;
background-image: url("http://7xoooy.com1.z0.glb.clouddn.com/pic.jpg?attname=") ;

}

background-repeat的用法及含义：repeat表示平铺，background-repeat有三个属性值，一个是no-repeat，不平铺；第二个是repeat-x，沿着x轴平铺；repeat-y沿着y轴平铺
还是上述的那张图片，还是上边那个例子，在background-image语句的后边添加语句background-repeat:repeat-x;

div{

/*width:500px;*/
height:460px;
background-image: url("http://    7xoooy.com1.z0.glb.clouddn.com/pic.jpg?attname=") ;
background-repeat: repeat-x;

}
这样就会出现下边的效果，仔细看哦,跟上边的不一样呢，这是好多张图片按x轴平铺，就是一直重复出现的意思

background-position的写法：
background-postion:center;后边可以是一个单词，可以是两个值，表示向左向右的距离，也可以写top bottom表示在容器的底部或顶部，大家看哦，在这里我把background所包含属性都敲出来了

div{

width:1500px;
height:460px;
background-color:green;
background-image: url("http://7xoooy.com1.z0.glb.clouddn.com/pic.jpg?attname=") ;
background-repeat: no-repeat;
background-position: center;

}

其实background还有一种复合的写法，可以减去我们很多的麻烦，我一般都会用复合的呢，但是那个没有这个清晰明了，大家跟我来看一看吧

div{

width:1500px;
height:460px;
/*background-color:green;
background-image: url("http://7xoooy.com1.z0.glb.clouddn.com/pic.jpg?attname=") ;
background-repeat: no-repeat;
background-position: center;*/
background:url("http://7xoooy.com1.z0.glb.clouddn.com/pic.jpg?attname=") no-repeat center;

}

到这里background的所有属性都已经讲完了，如果大家有问题，可以一起讨论呢，夜影随时欢迎你们！

2、选择器

在css中，说到选择器，大家应该也不陌生呢，我想，我应该跟大家一样，喜欢用类选择器和id选择器吧，那么究竟有几种选择器，他们之间又有着怎么样的联系呢
选择器：层级选择器、群组选择器、标签选择器、id选择器、通配选择器
其中，若在只有一个选择器的话，id选择器的优先级最高，其次是类选择器。下边跟我一起来看一些例子吧，可能会帮助你们更好的了解选择器.
那么首先我肯定要先在html中创建这些div，div1就属于类选择器，div2属于id选择器，什么都不写，在css中直接用div的属于标签选择器
通配选择器就是在css中以*号开始给所有的选择器设置，群组选择器就是对很多个有相同设定的标签设定的选择器，可以同时作用与多个标签

<div class="div1"></div>
 <div id="div2"></div>
 <div ></div>
 <div class="div3">
     <div class="div4"></div>
 </div>

下边第一个使用div就是标签选择器，如果不加路径，那么在这个div下边的所有的div都会继承于这个，div1属于类选择器，div2 属于id选择器，div3 div4就属于父子选择器也就是层级选择器，最后一个是群组选择器，如果是我们自己写代码，尽量避免使用id选择器，因为id的层级比较高，后续维护人员不利于修改，所以我经常使用类选择器，群组选择器和父子选择器的层级就要看具体使用了哪些选择器了，然后将层级相加加好了。。。

div{
width:1500px;
height:460px;
/*background-color:green;
background-image: url("http://7xoooy.com1.z0.glb.clouddn.com/pic.jpg?attname=") ;
background-repeat: no-repeat;
background-position: center;*/
background:url("http://7xoooy.com1.z0.glb.clouddn.com/pic.jpg?attname=") no-repeat center;
}
.div1{
width:100px;
}
#div2{
    width:100;
}
.div3 .div4{
    width:100px;
}
.div3,.div4{
    height:100px;
}

3、position的使用

position有三个值，代表了三个类型，一个是fixed，一个是relative，一个是absolute；

relative：是相对定位，对标签没有属性的改变，设置left、right、top、bottom方向可以偏移，有z-index的级别样式，默认后边的元素覆盖前边的元素

absolue：对标签属性有改变，float无效，有清除浮动的效果，内容撑开宽度，有z-index 样式和margin，以父级标签的relative为七点或者以body左上角为起点

fixed：固定定位，类是于绝对定位，有改变元素属性，方向固定后，是以浏览器窗口定位，不会因为html的滚动而改变位置
大家一起看个小例子吧：

 <div class="box1">
     <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
 </div>

 .box1{
    width:800px;
    height:1500px;
    border:1px blue solid;
    position: relative;
}
.box2{
    width:100px;
    height:50px;
    background:green;
    position: fixed;
}
.box3{
    width:100px;
    height:50px;
    background:red;
    position: absolute;
    right:0px;
}

初始状态

当将屏幕沿着滚动条向下拉的时候的状态