前端--css属性二

一、超级链接案例

<div class="nav">
        <ul>
            <li>
                <a href="">路飞学城</a>
            </li>
            <li>
                <a href="">老男孩</a>
            </li>
            <li>
                <a href="">网站导航</a>
            </li>
            <li>
                <a href="">网站导航</a>
            </li>
            <li>
                <a href="">网站导航</a>
            </li>
            <li>
                <a href="">网站导航</a>
            </li>
        </ul>
    </div>

写好上面的结构代码之后，也就是将我们页面展示的内容显示了，但是我们此时要利用我们学过的知识点来布局页面

首先我们要做导航栏，并排显示元素，第一想 浮动，想到使用浮动之后，一定记得清除浮动元素。

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .nav{
            width: 1226px;
            overflow: hidden;
            /*清除子标签li的浮动*/
            background-color: #666;
            margin: 0 auto;
            border-radius:5px;
            /*设置圆角样式*/
        }
        /*先设置外层盒子的布局与样式*/
        .nav ul {
            list-style: none;
        }
        /*去除列表前的type样式*/
        .nav ul li{
            width: 160px;
            height: 40px;
            line-height: 40px;
            float: left;
            text-align: center;
        }
        /*设置每一个li的布局*/
        .nav ul li a{
            width: 160px;
            height: 40px;
            font-size:14px;
            color:rgba(0,0,0,0.5);
            display: block;
            /*使a标签变成行内块，是鼠标在a的区域内都能选中a标签*/
            text-decoration: none;
            /*去除a的文本下划线样式*/
        }
        /*再设置超链接的样式*/
        .nav ul li a:hover{
            background-color: white;
            color: green;
            text-decoration:underline;
        }
        /*最后设置鼠标悬浮时a的样式*/

        /*总结：做css从外向内，一层一层设置，增加条理性！*/
    </style>

二、background

颜色详解：

一共有三种：单词、rgb表示法、十六进制表示法

1.单词：就是直接颜色的英语单词表示；比如：red,green，blue 等等。

2.rgb表示法：红色 绿色 蓝色 三原色

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

rgba(0,0,0,0)　　a表示通明度，范围是0~1

黑色：
background-color: rgb(0,0,0);
光学显示器，每个元件都不发光，黑色的。

白色：

background-color: rgb(255,255,255);

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

background-color: rgb(255,255,0);

再比如：
background-color: rgb(111,222,123);
就是红、绿、蓝三种颜色的不同比例叠加。

3.十六进制：

红色：

所有用#开头的值，都是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)

等价于：

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

十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc;
比如：

等价于

比如：

等价于

只能上面的方法简化，比如

无法简化！
再比如

无法简化！

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

background-color属性表示背景颜色

背景图片

background-img:表示设置该元素的背景图片

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

background-repeat:表示设置该元素平铺的方式

属性值：

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

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

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

　　方法1：属性值：

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

　　方法2：background-position: 100px 100px；

设置 background-position: -100px -100px；为负值，就可以对大图进行切小图；静流图的引出：

我们一般使用background的综合属性来进行设置：background:red url("./小清新.jpg") no-repeat top center;

雪碧图技术（精灵图技术）

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图；图大于了屏幕的最大显示像素。

background:  red  url('./images/banner.jpg')  no-repeat   center top;（或者center 0）

background-attachment

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

<style>
    div{
        width: 1000px;
        height: 800px;
        background-image: url('./timg.jpg');
        border: 1px solid red;
        background-repeat: no-repeat;
        padding: 50px;
        /*top center right*/
        background-position: right left;
        /*固定背景图片*/
      background-attachment: fixed;
    }
</style>

 三、定位

三种定位方法：1.相对定位 2.绝对定位 3.固定定位。

（一）.相对定位

position:relative;

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

现象和使用：

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 300px;
            height: 300px;
            background-color: red;
            position:relative;
            /*设置了相对位置后，就可以使用top、bottom、left、right对盒子进行调*/
            top:50px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

特性：

1.不脱标

2.形影分离

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

所以说相对定位 在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果(因为盒子调整之后，原来的位置，不会被其他盒子使用，印象页面布局)

用途：

1.微调元素位值

    <style>
        .t{
            font-size: 30px;
        }
        .y{
            position: relative;
            top: 4px;
        }
    </style>
------------------------------------------
<body>
    <div class="box1">
        <input type="text" class="t">
        <input type="text" class="y">
    </div>
    
</body>

2.做绝对定位的参考（父相子绝）绝对定位会说到此内容；子盒子相对于父元素做位置调整。

参考点：

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

（二）.绝对位置

position:absoute;

特性：

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

参考点(重点)：

脱标的代码：

    <style>
        .fiste{
            width: 500px;
            height: 500px;
            background-color: red;
            position:absolute; 
            /*设置绝对位置后，盒子脱标*/
        }
        .w{
            width: 600px;
            height: 500px;
            background-color: green;
        }
        </style>
</head>
<body>
    <div class="fiste"></div>
    <div class="w"></div>
</body>        

遮盖效果代码

    <style>
        .fiste{
            width: 500px;
            height: 500px;
            background-color: red;
            position:absolute; 
            /*设置绝对位置后，盒子脱标*/
        }
        .w{
            width: 600px;
            height: 500px;
            background-color: green;
            position: absolute;
            /*两个绝对定位，后一个会覆盖前者*/
            /*用绝对定位做覆盖*/
        }
    </style>
</head>
<body>
    <div class="fiste"></div>
    <div class="w"></div>
</body>

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

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

设置绝对路径的盒子，添加top属性后并没有固定，会随着浏览器的滚动而滚动。

上代码：

<style>
    .w{
        width: 200px;
        height: 200px;
        background-color: green;
        position: absolute;
        top:30px;    
        }
</style>
------------------------------------------
<body style="height: 2000px;">
    <div class="w"></div>
</body>

2.当我使用bottom属性描述的时候。是以首屏页面左下角（调整浏览器的大小，对底的距离是固定不变的（但是滚动浏览器滚动条是会跟着浏览器走动的））为参考点来调整位置。

上代码：

<style>
    .w{
        width: 200px;
        height: 200px;
        background-color: green;
        position: absolute;
        bottom:100px;
        }
</style>

<body style="height: 2000px;">
    <div class="w"></div>
</body>

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .banner{
            width: 1210px;
            overflow: hidden;
            margin: 0 auto;
        }
        .banner .list{
            float: left;
            width: 310px;
            height: 500px;
            background-color: red;
        }
        .banner .lunbo{
            float: left;
            width: 900px;
            height: 500px;
            background-color: green;
            position: relative;
            /*父级标签时相对定位*/
        }
        .lunbo .btn{
            width: 100px;
            height: 40px;
            background-color: blue;
            position: absolute;
            /*子级标签时绝对定位，就会相对于当前最近的父级来调整位置*/
            bottom: 100px;
            left: 100px;

        }
    </style>
</head>
<body>

    <div class="banner">
        
        <div class="list"></div>

        <div class="lunbo">
            <div class="btn"></div>
        </div>
    </div>
    
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .father{
            width: 400px;
            height: 400px;
            padding: 100px;
            background-color: yellow;
            position: relative;

        }
        .child{
            width: 500px;
            height: 500px;
            background-color: green;
            position: relative;
            padding: 20px;
            /*如果父级没设置定位；就再找上一级；如果顶级都没设置，就以浏览器为参考点*/
            
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            top: 50px;
            left: 50px;
    </style>
</head>
<body style='height: 2000px;'>

    <!-- 

    position:relative;
    position:absoute;
    position:fixed;
     -->
     <div class="father">
        <div class="child">
             <div class="son">
            
              </div>
        </div>
    </div>

    
    
    
</body>
</html>

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

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

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

作用：页面布局常见的“父相子绝”，经常用！

绝对定位的盒子居中

在设置绝对定位之后，margin 0 auto；就会失效，用新的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .nav{
            width: 960px;
            height: 49px;
            background-color: purple;
            position: absolute;
            /*margin: 0 auto;*/
            left: 50%;
            margin-left:-480px;
        }
    </style>
</head>
<body>
    <div class="nav">    
    </div>
</body>
</html>

 三、固定位置

position:fixed;

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

特性: 

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

参考点：

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

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

1.返回顶部栏

上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        p{
            width: 100px;
            height: 100px;
            background-color: red;
            position: fixed;
            /*设置固定位置后，盒子变浮动*/
            /*top:0px;*/
            /*设置top属性后以浏览器左上角为参考点*/
            /*left:50px;*/
            bottom:0px;
            /*当设置成bottom属性时，以浏览器右下角为参考点*/
            right: 50px;
            /*下面是设置“回到顶部”来到盒子中间*/
            line-height: 100px;
            text-align: center;
            color: white;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <p>回到顶部</p>
        <img src="小清新.jpg" alt="">
        <img src="小清新.jpg" alt="">
        <img src="小清新.jpg" alt="">
        <img src="小清新.jpg" alt="">
        <img src="小清新.jpg" alt="">
        <img src="小清新.jpg" alt="">
        <img src="小清新.jpg" alt="">
        <img src="小清新.jpg" alt="">
        <img src="小清新.jpg" alt="">
        <img src="小清新.jpg" alt="">
        <img src="小清新.jpg" alt="">
    </div>
</body>
</html>

2.固定导航栏

上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        .nav{
            width: 960px;
            overflow: hidden;
            /*margin: 0px auto;*/
            background-color: purple;
            border-radius: 5px;
            position: fixed;
            /*导航盒子设置固定位置，后margin 0 auto失效*/
            left: 50%;
            margin-left: -480px;
        }
        .nav ul li{
            float: left;
            width: 160px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            
        }
        .nav ul li a{
            width: 160px;
            height: 40px;
            display: block;
            color: white;
            font-size: 14px;
            text-decoration: none;

        }
        .nav ul li a:hover{
            background: yellow;
            color: green;
            text-decoration: underline;
        }

        .wrap{
            width: 100%;
            height: 200px;
            background-color: green;
        }

    </style>
</head>
<body style="height: 3000px">
    <div class="nav">
        <ul>
            <li>
                <a href="#">网站导航</a>
            </li>
            <li>
                <a href="#">网站导航</a>
            </li>
            <li>
                <a href="#">网站导航</a>
            </li>
            <li>
                <a href="#">网站导航</a>
            </li>
            <li>
                <a href="#">网站导航</a>
            </li>
            <li>
                <a href="#">网站导航</a>
            </li>
        </ul>
    </div>

    <div class="wrap"></div>

    
</body>
</html>

四、z-index

四个特性：

　　z-index 值表示谁压着谁，数值大的压盖住数值小的，

　　只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
            /*将box2设置成定位盒子*/
            top:50px;
            z-index: 3
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: blue;
            position: relative;
            /*将box3也设置成定位盒子*/
            z-index: 1;
            /*如果box3的z-index值小于box2的z-index值，则box2会覆盖box3；否则，相反覆盖*/
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

　　z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。

z-index的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        body{
            padding-top: 40px;
        }
        .nav{
            width: 100%;
            height: 40px;
            background-color: black;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 99999;
            /*对导航栏的外层设置固定位置，添加z-index值为最大*/
        }
        .wrap{
            width: 960px;
            overflow: hidden;
            margin: 0px auto;
            background-color: purple;
            border-radius: 5px;
            /*而不应该在导航栏的盒子里设置固定位置和z-index值；如果在这里设置；在设置body里的padding-top值时会出错；
            因为wrap是中心显示，并没有占据整个网页的宽度，如果这里设置成固定值，body里的padding-top往下顶的是整个网页*/


        }
        .wrap ul li{
            float: left;
            width: 160px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            
        }
        .wrap ul li a{
            width: 160px;
            height: 40px;
            display: block;
            color: white;
            font-size: 14px;
            text-decoration: none;

        }
        .wrap ul li a:hover{
            background: yellow;
            color: green;
            text-decoration: underline;
        }

        
        p{
            position: relative;
        }

    </style>
</head>
<body style="height: 3000px">
    <div class="nav">
        <div class="wrap">
            <ul>
                <li>
                    <a href="#">网站导航</a>
                <>
                <li>
                    <a href="#">网站导航</a>
                <>
                <li>
                    <a href="#">网站导航</a>
                <>
                <li>
                    <a href="#">网站导航</a>
                <>
                <li>
                    <a href="#">网站导航</a>
                <>
                <li>
                    <a href="#">网站导航</a>
                <>
            </ul>
        </div>
    </div>

    <div class="wrap1">内容</div>
    <!-- 导航栏下面的内容，应该是从导航栏高度一下开始显示 -->
    <!-- 对body添加padding-top:(导航栏的高度值) ;-->
    <img src="./小清新.jpg" alt="">
    <img src="./小清新.jpg" alt="">
    <img src="./小清新.jpg" alt="">
    <img src="./小清新.jpg" alt="">
    <p>哈哈哈哈哈哈哈哈</p>
    <img src="./小清新.jpg" alt="">
    <img src="./小清新.jpg" alt="">
    <img src="./小清新.jpg" alt="">


    
</body>
<ml>

　　从父现象：父亲怂了，儿子再牛逼也没用

z-index的值，两个自己值进行比大小；如果父级标签没有设置，z-index值；就看两个子级的值谁大，相等则后者覆盖前者；　　如果父级设置了z-index，则无需考虑子级的z-index值，直接判断父级的z-index值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
        .father1{
            width: 300px;
            height: 300px;
            background-color: black;
            position: absolute;
            z-index: 14;
        }
        .father2{
            width: 300px;
            height: 300px;
            background-color: yellow;
            position: absolute;
            z-index: 11;

        }

        .child1{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            top: 400px;
            left: 400px;
        }
        .child2{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 450px;
            left: 350px;
            z-index: 1000;
        }


    </style>
</head>
<body>

    <div class="father1">
        <div class="child1"></div>
    </div>
    <div class="father2">
        <div class="child2"></div>
    </div>
    
</body>
</html>