前端 之 CSS : background (精灵图); 定位; z-index;

background:

　　颜色表示法: 单词;  rgb表示法;  十六进制表示法

　　　　rgb:红色 绿色 蓝色 三原色

光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。
用逗号隔开，r、g、b的值，每个值的取值范围0~255，一共256个值。
如果此项的值，是255，那么就说明是纯色

黑色：

　　光学显示器，每个元件都不发光，黑色的。

白色：

　　颜色可以叠加，比如黄色就是红色和绿色的叠加：

再比如：

　　就是红、绿、蓝三种颜色的不同比例叠加。

 

十六进制表示法:

详情

16进制表示法
红色：
background-color: #ff0000;
所有用#开头的值，都是16进制的。
#ff0000：红色
16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。
ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。所以等价于rgb(255,0,0);
怎么换算的？我们介绍一下
我们现在看一下10进制中的基本数字（一共10个）:
0、1、2、3、4、5、6、7、8、9

16进制中的基本数字（一共16个）:
0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f

16进制对应表：
十进制数    十六进制数
0    0
1    1
2    2
3    3
……
10    a
11    b
12    c
13    d
14    e
15    f

16    10
17    11
18    12
19    13
……
43    2b
……
255    ff

十六进制中，13 这个数字表示什么？
表示1个16和3个1。 那就是19。 这就是位权的概念，开头这位表示多少个16，末尾这位表示多少个1。
小练习：
16进制中28等于10进制多少？
答：2*16+8 = 40。

16进制中的2b等于10进制多少？
答：2*16+11 = 43。

16进制中的af等于10进制多少？
答：10 * 16 + 15 = 175

16进制中的ff等于10进制多少？
答：15*16 + 15 = 255

所以，#ff0000就等于rgb(255,0,0)

background-color: #123456;
等价于：
background-color: rgb(18,52,86);

所以，任何一种十六进制表示法，都能够换算成为rgb表示法。也就是说，两个表示法的颜色数量，一样。

十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc;
比如：
background-color:#ff0000;
等价于
background-color:#f00;

比如：
background-color:#112233;
等价于
background-color:#123;

只能上面的方法简化，比如
background-color:#222333;
无法简化！
再比如
background-color:#123123;
无法简化！

要记住：
#000 黑
#fff 白
#f00 红
#333 灰
#222 深灰
#ccc 浅灰

 

　　background-color 属性表示背景色:

　　background-img 属性表示该元素的背景图片:

　　　　那么发现默认的背景图片，水平方向和垂直方向都平铺

　　background-repeat 属性表示该元素平铺方式:

　　　　　　　　　　　　　　　　　　　　　　属性值:

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

　　　　　　　　　　　　　　　　　　　　给元素设置padding之后，发现padding的区域也会平铺背景图片。

　　　　

　　　　repeat应用案例:

　　　　　　

还是上面那个超链接导航栏的案例，我们给body设置平铺的图片，注意：一定找左右对称的平铺图片，才能实现我们要的效果

 

background-position: 属性设置背景图像的起始位置。这个属性设置背景原图像（由 background-image 定义）的位置

属性值：

值	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。 默认值：0 0； 这两个值必须挨在一起。

　　　　精灵图技术:

　　

CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分

CSS 雪碧图应用原理：
只有一张大的合并图， 每个小图标节点如何显示单独的小图标呢？

其实就是 截取 大图一部分显示，而这部分就是一个小图标。

使用雪碧图的好处：

1、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因； 
2、CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。 
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。 
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便

 

不足：

1）CSS雪碧的最大问题是内存使用
2）拼图维护比较麻烦
3）使CSS的编写变得困难
4）CSS 雪碧调用的图片不能被打印

 

我们可以使用background综合属性制作通天banner，什么是通天banner呢，就是一般我们电脑的屏幕都是1439.但是设计师给我们的banner图都会比这个大，

那么我们可以此属性来制作通天banner。

background:  red  url('./images/banner.jpg')  no-repeat   center top;

background-attach

设置fixed之后，该属性固定背景图片不随浏览器的滚动而滚动

 

定位:

　　定义:　　定位有三种：1.相对定位 2.绝对定位 3.固定定位

　　

　　相对定位:

　　　　相对定位:相对于自己原来的位置定位

　　　　现象和使用：

　　　　　　1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。

　　　　　　2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right

　　　　特性：

　　　　　　1.不脱标

　　　　　　2.形影分离

　　　　　　3.老家留坑（占着茅房不拉屎，恶心人）

　　　　　　　　所以说相对定位 在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果

　　　　用途：

　　　　　　1.微调元素位置

　　　　　　2.做绝对定位的参考（父相子绝）绝对定位会说到此内容。

　　　　参考点：

　　　　　　自己原来的位置做参考点。

　　

　　绝对定位:

　　　　特性：

　　　　　　1.脱标 2.做遮盖效果，提成了层级。设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。

　　　　参考点(重点)：

　　　　　　一、单独一个绝对定位的盒子

　　　　　　　　1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
　　　　　　　　2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。

 

　　　　　　二、以父辈盒子作为参考点

　　　　　　　　1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。

　　　　　　　　2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点

　　　　　　　　3.不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点

　　　　　　　　　　注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。

　　　　　　　　　　还要注意，绝对定位的盒子无视父辈的padding

 

　　　　作用：页面布局常见的“父相子绝”，一定要会！！！！

　　

*{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 100%;
            height: 69px;
            background: #000;
        }
        .box .c{
            width: 960px;
            height: 69px;
            background-color: pink;
            /*margin: 0 auto;*/
            position: relative;
            left: 50%;
            margin-left: -480px;

            /*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/
        }

 

　　固定定位:

　　　　固定当前的元素不会随着页面滚动而滚动

　　　　特性: 

　　　　　　1.脱标 2.遮盖，提升层级 3.固定不变

　　　　参考点：

　　　　　　设置固定定位，用top描述。那么是以浏览器的左上角为参考点
　　　　　　如果用bottom描述，那么是以浏览器的左下角为参考点

　　　　作用： 1.返回顶部栏 2.固定导航栏 3.小广告

 

z-index

这个东西非常简单，它有四大特性，每个特性你记住了，页面布局就不会出现找不到盒子的情况。

 

• z-index 值表示谁压着谁，数值大的压盖住数值小的，
• 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
• z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
• 从父现象：父亲怂了，儿子再牛逼也没用