5_CSS

2022-03-04 10:52:41

1. 什么是CSS
2. 选择器
3. 美化网页元素
4. 盒子模型
5. 浮动
6. 定位

1. 什么是CSS

1.1 什么是CSS

Cascading Style Sheet 层叠样式表
是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力
美化网页
字体, 颜色, 边距, 高度, 宽度, 背景图片, 网页定位, 网页浮动...

1.2 发展史

CSS1.0

CSS2.0: DIV (块)+ CSS, HTML与CSS结构分离的思想, 网页变得简单, SEO

CSS2.1: 浮动, 定位

CSS3.0: 圆角, 阴影, 动画... 浏览器兼容性~

CSS优势

内容和表现分离
网页结构表现统一, 可以实现复用
样式十分的丰富
建议使用独立于html的css文件
利用SEO, 容易被搜索引擎收录

1.3 快速入门

style

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

<!--    规范 style 可以编写css的代码
        语法:
            选择器 {
                声明1;
                声明2;
                声明3;
            }
-->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>

<h1>我是一级标题</h1>
</body>
</html>

建议使用HTML与CSS分离的写法

(1) 在html文件同级目录下新建一个css文件夹用来保存css文件, 在css文件夹下创建style.css文件

h1 {
    color: red;
}

(2) 在html文件里通过link标签引入css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<h1>我是一级标题</h1>
</body>
</html>

1.4 css的三种导入方式

行内样式
内部样式
外部样式
css三种导入方式的调用优先级: 就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
<!--    内部样式-->
    <style>
        h1{
            color: blue;
        }
    </style>
<!--    外部样式-->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<!--优先级: 就近原则-->
<!--行内样式: 在标签元素中, 编写一个style属性, 编写样式即可-->
<h1>我是一级标题</h1>
</body>
</html>

拓展: 外部样式两种写法

链接式

<!--链接式-->
<link rel="stylesheet" href="css/style.css">

导入式

<!--导入式-->
<style>
    @import "css/style.css";
</style>

两者的区别
- 区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
- 区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
- 区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
- 区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

2. 选择器

作用: 选择页面上的某一个或者某一类元素

2.1 基本选择器

选择器调用优先级: id选择器 > class选择器 > 标签选择器

2.1.1 标签选择器

作用范围: 一类标签
格式: 标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>

    <!--标签选择器, 会选择页面上所有这个标签的元素-->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<h1>学Java</h1>
<h1>学Java</h1>
<h1>学Java</h1>
<p>来B站</p>

</body>
</html>

2.1.2 类选择器

作用范围: 所有和class属性一致的标签, 跨标签
格式: .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>

    <!--类选择器的格式 .class的名称{}
        好处: 可以多个标签归类, 是同一个class, 可以复用
    -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<h1 class="dz1">学Java</h1>
<h1 class="dz2">学Java</h1>
<h1 class="dz1">学Java</h1>
<p class="dz3">来B站</p>


</body>
</html>

2.1.3 id选择器

作用范围: 全局唯一
格式: id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Id选择器</title>

    <!--id选择器 id必须保证全局唯一
        格式: #id名称{}
        不遵循就近原则
        id选择器 > class选择器 > 标签选择器
    -->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<h1 id="title1">标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>

</body>
</html>

style.css

h1{
    color: blue;
    background: burlywood;
    border-radius: 24px;
}

p{
    font-size: 30px;
    color: red;
}

.dz1{
    color: yellow;
    background: burlywood;
    border-radius: 24px;
}
.dz2{
    color: red;
    background: burlywood;
    border-radius: 24px;
}
.dz3{
    color: black;
    background: burlywood;
    border-radius: 24px;
}
#title1{
    color: red;
}

2.2 层次选择器

2.2.1 后代选择器

作用于某个元素下的所有层级的子元素

body p{
    background: blue;
}

2.2.2 子选择器

作用于某个元素下所有第一层级的子元素

body > p{
    background: salmon;
}

2.2.3 相邻兄弟选择器

作用于某个元素下相邻的第一个同级元素

.beside + p{
    background: green;
}

2.2.4 通用兄弟选择器

作用于某个元素下所有的同级元素

/*通用兄弟选择器: 作用于某个元素后所有的同级元素*/
.beside ~ p{
	background: black;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>

    <style>
        /*p{*/
        /*    background: red;*/
        /*}*/

        /*后代选择器 作用于某个元素下所有层级的子元素*/
        body p{
            background: blue;
        }

        /*子选择器 作用于某个元素下所有第一层级的子元素*/
        body > p{
            background: salmon;
        }

        /*相邻兄弟选择器: 作用于某个元素下相邻的第一个同级元素*/
        .beside + p{
            background: green;
        }

        /*通用兄弟选择器: 作用于某个元素下所有的同级元素*/
        .beside ~ p{
            background: black;
        }
    </style>
</head>
<body>
    <p>p0</p>
    <p class="beside">p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
    <p>p7</p>
    <p>p8</p>
</body>
</html>

2.3 结构伪类选则器

<body>
    <h1>h1</h1>
    <p>p1</p>
    <h1>h1</h1>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
    <a href="">特效</a>
</body>

<!--不使用.class和id选择器-->
<style>
	/*ul的第一个子元素*/
	ul li:first-child{
    	background: red;
	}
	/*ul的最后一个子元素*/
	ul li:last-child{
    	background: blue;
	}
	/*选中p1: 定位到父级元素, 选择下方所有元素中的第二个元素
	注意: 此方法的选中规则是按照 父元素下被查找元素在所有元素中的排行位置选取,其上方有其他元素也要算进去
	*/
	p:nth-child(2){
    	background: green;
	}
	/*选中p2: 定位到父级元素, 选择下方和p2同类别元素的第二个元素
	注意: 此方法的选中规则是按照 父元素下被查找元素在其同类别元素中排行的位置选取
	*/
	p:nth-of-type(2){
    	background: yellow;
	}
	/*为a链接加鼠标悬浮特效*/
    a:hover{
        background: red;
    }
</style>

2.4 属性选择器

id + class 结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .demo a{
            float: left;
            display: block;
            width: 50px;
            height: 50px;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: white;
            text-decoration: none;
            margin-right: 20px;
            font: bold 20px/50px Arial;
        }
        /*属性, 属性名 = 属性值(正则)*/


        /*找出存在id属性的元素 a[]{}*/
        /*a[id]{*/
        /*    background: yellow;*/
        /*}*/

        /*找出id=first的元素*/
        /*a[id=first]{*/
        /*    background: yellow;*/
        /*}*/

        /*找出class属性值中含有links的元素*/
        /*a[class*="links item"]{*/
        /*    background: yellow;*/
        /*}*/

        /*找出href属性值中以https开头的元素*/
        /*a[href^=https]{*/
        /*    background: yellow;*/
        /*}*/

        /*找出href属性值中以pdf结尾的元素*/
        a[href$=pdf]{
            background: yellow;
        }
        
    </style>
</head>
<body>

<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="https://www.baidu.com" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>

=	绝对等于	  
*=	包含
^=	以...开头
$=	以...结尾

3. 美化网页元素

3.1 为什么要美化网页

有效的传递页面信息
页面漂亮才能吸引用户
凸显页面的主题
提高用户的体验

span标签: 重点要突出的字, 使用span套起来

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

    <style>
        .title1{
            color: red;
            font-size: 50px;
        }
    </style>
</head>
<body>

欢迎学习<span class="title1">Java</span>

</body>
</html>

3.2 字体样式

<!--font-family: 字体格式
	font-size: 字体大小
	font-weight: 字体粗细 bolder更粗, lighter更细
	color: 字体颜色

-->
<style>
    body{
        font-family: 楷体;
        color: red;
    }

    h1{
        font-size: 50px;
    }

    .p1{
        font-weight: bolder;
    }
</style>

3.3 文本样式

颜色
- color rgb rgba
文本对齐的方式
- text-align = center; 居中显示
首行缩进
- text-indent: 2em;
行高
- line-height: 单行文字上下居中 line-height=height 行高=块高
装饰
- text-decoration
文本图片水平对齐
- vertical-align: middle;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>

    <!--颜色:
        单词 红绿蓝
        RGB 0~F
        RGBA
        text-align: 排版,一般使用center 居中
        text-indent: 2em; 段落首行缩进
        height: 300px;  块高
        line-height: 300px;  行高
            行高和块的高度一致, 就可以上下居中

    -->
    <style>
        h1{
            color: rgba(0,255,255,0.5);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3 {
            background: #375dff;
            height: 300px;
            line-height: 300px;
        }
        /*上划线*/
        .l1{
            text-decoration: overline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*下划线*/
        .l3{
            text-decoration: underline;
        }
        /*超链接去处下划线*/
        a{
            text-decoration: none;
        }

        /*<!--图片水平对齐~参照物*/
        /*    a,b*/
        /*-->*/

         img,span{
             vertical-align: middle;
         }

    </style>
</head>
<body>

<a href="">123</a>

<p class="l1">上划线</p>
<p class="l2">中划线</p>
<p class="l3">下划线</p>

<h1>斗罗大陆</h1>
<p class="p1">
    《斗罗大陆》是唐家三少创作的穿越玄幻小说，2008年12月14日-2009年12月13日首发于起点中文网，2009年5月首次出版。
</p>
<p class="p2">
    《斗罗大陆》讲述的是穿越到斗罗大陆的唐三如何一步步修炼武魂，由人修炼为神，最终铲除了斗罗大陆上的邪恶力量，报了杀母之仇，成为斗罗大陆最强者的故事。主要角色有唐三、小舞、戴沐白等。
</p>
<p class="p3">
    2017年7月12日，《斗罗大陆》获得“2017猫片胡润原创文学IP价值榜”第二十二名。 2020年9月，2019中国网络文学排行榜揭晓，《斗罗大陆》入选IP影响排行榜。
</p>

<p>
    <img src="images/符号位.png" >
    <span>我要和图片水平对齐</span>
</p>

</body>
</html>

3.4 阴影

/*阴影text-shadow: 阴影颜色, 水平偏移, 垂直偏移, 阴影半径*/
#price{
    text-shadow: #375dff 10px 10px 2px;
}

3.5 超链接伪类

一般只用a:hover{}; 鼠标悬停时相应的变化

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

    <style>
        /*默认的颜色*/
        a{
            text-decoration: none;
            color: #000000;
        }
        /*鼠标悬停时的颜色和字体大小(重点)*/
        a:hover{
            color: orange;
            font-size: 20px;
        }
        /*鼠标点击未释放时的颜色*/
        a:active{
            color: green;
        }
        /*访问后显示的颜色*/
        a:visited{
            color: #d612be;
        }
        /*阴影text-shadow: 阴影颜色, 水平偏移, 垂直偏移, 阴影半径*/
        #price{
            text-shadow: #375dff 10px 10px 2px;
        }
    </style>
</head>
<body>

<a href="#">
    <img src="images/009.png" >
</a>
<p>
    <a href="#">码出高效</a>
</p>
<p>
    <a href="#">作者:孤尽</a>
</p>
<p id="price">
    ￥99
</p>

</body>
</html>

3.6 列表

/*ul li*/
/*
list-style:
    none: 去掉样式
    circle: 空心圆
    decimal: 数字
    square: 正方形
*/

/*ul{*/
/*    background: dimgray;*/
/*}*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

3.7 背景

背景颜色

背景图片

<style>
    /*默认是全部平铺的*/
    div {
        width: 1000px;
        height: 700px;
        border: 1px solid red;
        background-image: url("images/009.png");
    }
    /*水平平铺*/
    .div1{
        background-repeat: repeat-x;
    }
    /*垂直平铺*/
    .div2{
        background-repeat: repeat-y;
    }
    /*不平铺*/
    .div3{
        background-repeat: no-repeat;
    }
</style>

3.7.1 列表与背景综合练习

html

<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字产品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a>&nbsp;&nbsp;<a href="#">高端</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护</a>&nbsp;&nbsp;<a href="#">化妆</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">食品</a>&nbsp;&nbsp;<a href="#">饮料</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a></li>
    </ul>
</div>

css

#nav{
    width: 240px;
    background: dimgray;
}
.title{
    font-size: 18px;
    font-weight: bolder;
    text-indent: 2em;
    line-height: 35px;
    /*颜色 图片 图片位置 平铺方式*/
    background: red url("../images/向下箭头.png") 205px 8px no-repeat;
    background-size: 18px 18px;
}

ul li{
    height: 40px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/向右箭头.png");
    background-size: 13px 13px;
    background-position: 168px 6px;
    background-repeat: no-repeat;

}
a{
    color: white;
    font-size: 14px;
    text-decoration: none;

}
a:hover{
    color: orange;
    text-decoration: underline;
}

3.8 渐变

调试网址: https://www.grabient.com/

background-color: #4158D0;
background-image: linear-gradient(45deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

4. 盒子模型

4.1 什么是盒子

margin: 外边距
padding: 内边距
border: 边框

4.2 边框

边框的粗细
边框的样式
边框的颜色

<style>
    /*body总有一个默认的外边距margin: 0, 常见操作*/
    /*h1,ul,li,a,body{*/
    /*    margin: 0;*/
    /*    padding: 0;*/
    /*    text-decoration: none;*/
    /*}*/

    /*border: 粗细, 样式, 颜色*/
    #box{
        width: 300px;
        border: 1px solid white;
        border-top-width: 25px;
        border-left-width: 800px;
    }
    h2{
        font-size: 16px;
        background-color: brown;
        line-height: 30px;
        color: white;
    }
    form{
        background: darkgrey;
    }
    div:nth-of-type(1) input{
        border: 3px solid black;
    }
    div:nth-of-type(2) input{
        border: 3px dashed red;
    }
    div:nth-of-type(3) input{
        border: 2px dashed blue;
    }
</style>

4.3 内外边距

padding和margin用法相同,遵循顺时针原则(上右下左)

<div id="box">
    <h2>会员登陆</h2>
    <form action="#">
        <div>
            <span>用户名: </span>
            <input type="text">
        </div>
        <div>
            <span>密码:&nbsp;&nbsp;&nbsp; </span>
            <input type="password">
        </div>
        <div>
            <span>邮箱:&nbsp;&nbsp;&nbsp; </span>
            <input type="email">
        </div>
    </form>
</div>

<!--外边距的妙用: 居中 margin: 0 auto;-->
<style>
    #box{
        width: 240px;
        border: 1px solid white;
        /*margin里写四个参数代表上右下左(顺时针)
        margin里写两个参数代表上 左(值不同)
        margin里写一个参数代表上 左(值相同)
        */
        margin: 25px 800px;
        /*border-top-width: 25px;*/
        /*border-left-width: 800px;*/
    }
    h2{
        font-size: 16px;
        background-color: brown;
        line-height: 30px;
        color: white;
    }
    form{
        background: darkgrey;
    }
    input{
        border: 1px solid black;
    }
    div:nth-of-type(1){
        padding: 8px 2px;
    }
    div:nth-of-type(2){
        padding: 8px 2px;
    }
    div:nth-of-type(3){
        padding: 8px 2px;
    }

</style>

4.4 圆角边框

4个角

<!--四个参数: 左上 右上 右下 左下 (顺时针方向)
实现圆圈: 圆角border-radius=半径
-->
<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        border-radius: 50px;
    }
</style>

4.5 阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            box-shadow: 10px 10px 10px yellow;
        }
        img{
            border-radius: 30px;
            box-shadow: 10px 10px 10px yellow;
        }

    </style>
</head>
<body>

<div></div>

<div style="margin: 0 auto">
    <img src="images/009.png" >
</div>
</body>
</html>

5. 浮动

5.1 标准文档

块级元素: 独占一行

h1~h6 p div 列表...

行内元素: 不独占一行

span a img strong...

块级元素可以包含行内元素,反之不可

5.2 display

显示

<!--block: 块元素
inline: 行内元素
inline-block: 是块元素,但是可以内联在一行
none: 消失
-->
<style>
    div {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: none;
    }
    span{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
    }
</style>

这个也是一种实现行内元素排列的方式, 但是我们多数情况下都用float

5.3 float

左右浮动 float

<div id="father">
    <div class="layer01"><img src="images/002.png" ></div>
    <div class="layer02"><img src="images/logo1.png" ></div>
    <div class="layer03"><img src="images/nav_r_ico.png" ></div>
    <div class="layer04">
        浮动的盒子可以向左浮动, 也可以向右浮动
    </div>
    <div class="clear"></div>
</div>

#father {
    border: 1px #000 solid;
}
.layer01 {
    border: 1px #F00 dashed;
    display: inline-block;
    float: left;
}
.layer02 {
    border: 1px #00F dashed;
    display: inline-block;
    float: left;
}
.layer03 {
    border: 1px #060 dashed;
    display: inline-block;
    float: right;
}

.layer04 {
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: right;
}

5.4 父级边框塌陷问题

clear

/*
clear: left; 左侧不允许有浮动元素
clear: right; 右侧不允许有浮动元素
clear: both; 两侧都不允许有浮动元素
*/

解决方案

增加父级元素的高度

简单, 但元素假设有了固定的高度, 就会被限制

#father {
    border: 1px #000 solid;
    height: 800px;
}

增加一个空的div标签, 清除浮动

简单, 但代码中要尽量避免空div

<div class="clear"></div>

.clear {
    clear: both;
    margin: 0;
    padding: 0;
}

overflow

简单, 但下拉的一些场景避免使用

/*在父级元素中增加一个overflow*/
#father {
    border: 1px #000 solid;
    overflow: hidden;
}

在父类添加一个伪类: after

稍微复杂, 但没有副作用推荐

#father:after {
    content: ‘‘;
    display: block;
    clear: both;
}

5.5 对比

display
- 方向不可以控制
float
- 浮动起来的话会脱离文档流, 所以要解决父级边框塌陷的问题

6. 定位

6.1 相对定位

positon: relative
相对于原来的位置, 进行指定的偏移, 仍处于标准文档流中
- top: -20px; 向上
- bottom: -20px; 向下
- left: -20px; 向左
- right: -20px; 向右

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

    <!--相对定位 相对于自己原来的位置进行偏移-->
    <style>
        body {
            padding: 20px;
        }
        div {
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father {
            border: 1px red solid;
            padding: 0;
        }
        #first {
            background: #006600;
            border: 1px green dashed;
            position: relative;/*相对定位: 上下左右*/
            top: -20px;/*向上*/
            left: -20px;/*向左*/

        }
        #second {
            background: #375dff;
            border: 1px blue dashed;
        }
        #third {
            background: #986b0d;
            border: 1px orange dashed;
            position: relative;
            right: -20px;
            bottom: -20px;
        }
    </style>
</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

6.1.1 练习题移动方块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        body {
            margin: 10px;
            padding: 0;
        }
        #box {
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 1px red solid;
        }
        a {
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: pink;
            text-align: center;
            line-height: 100px;
            color: white;
            display: block;

        }
        a:hover {
            background: #0000FF;
        }
        .a2, .a4{
            position: relative;
            top: -100px;
            right: -200px;
        }
        .a5 {
            position: relative;
            top: -300px;
            right: -100px;
        }

    </style>
</head>
<body>

<div id="box">
    <div>
        <a class="a1" href="#">链接1</a>
        <a class="a2" href="#">链接2</a>
        <a class="a3" href="#">链接3</a>
        <a class="a4" href="#">链接4</a>
        <a class="a5" href="#">链接5</a>
    </div>
</div>
</body>
</html>

6.2 绝对定位

定位: 基于浏览器或父级元素

如父级元素没有定位, 则相对于浏览器定位
如父级元素存在定位, 则相对于父级元素定位
在父级元素范围内移动

相对于父级或者浏览器的位置, 进行指定的偏移, 不处于标准文档流中, 原来的位置不会被保存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>

    <!--绝对定位 -->
    <style>
        body {
            padding: 20px;
        }
        div {
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father {
            border: 1px red solid;
            padding: 0;
            position: relative;
        }
        #first {
            background: #006600;
            border: 1px green dashed;
            position: absolute;/*绝对定位*/
            left: 30px;
        }
        #second {
            background: #375dff;
            border: 1px blue dashed;
        }
        #third {
            background: #986b0d;
            border: 1px orange dashed;

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

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

6.3 固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        body {
            height: 1000px;
        }
        div:nth-of-type(1) {/*absolute: 绝对定位 相对于浏览器*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2) {/*fixed: 固定定位 */
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>

6.4 z-index

图层

z-index: 默认是0 最高无限

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

    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="content">
    <ul>
        <li><img src="images/logo.png" ></li>
        <li class="tipText">学习HTML5</li>
        <li class="tipBg"></li>
        <li>时间: 3021-01-01</li>
        <li>地点: 火星</li>
    </ul>
</div>
</body>
</html>

opacity: 0.5; /背景透明度/

#content {
    padding: 0;
    margin: 0;
    width: 200px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000000 solid;
}
ul,li {
    padding: 0;
    margin: 0;
    list-style: none;
}
/*父级元素相对定位*/
#content ul {
    position: relative;
}
.tipText, .tipBg {
    position: absolute;
    width: 67px;
    height: 25px;
    top: 112px;
    left: 72px;
}
.tipText {
    color: white;
    z-index: 999;
}
.tipBg {
    background: black;
    opacity: 0.5;/*背景透明度*/
}