1. 什么是CSS？
CSS：
- 称为 Cascading Style Sheet 层叠级联样式表
- CSS 在三者中的一个核心作用：表现层（美化网页）
- 美化：字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动
浏览器中元素（一般点击F12或者点击开发人员工具打开）：
1.1. 发展史：
- CSS 1.0 ：只能美化基础样式，例如：加粗
- CSS 2.0 ：融入了 DIV（块）+ CSS，提出了 CSS 与 HTML 分离的思想，网页变得简单，利于 SEO（搜索引擎优化）
- CSS 2.1 ：融入了浮动，定位
- CSS 3.0 ：加入了圆角，阴影，动画…，涉及到了浏览器的兼容性
1.2. CSS 的优势
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分的丰富
- 建立使用独立于 html 的 css 文件
- 利用 SEO ，容易被搜索引擎收录！
2. CSS怎么用（快速入门）
在 CSS 中，注释格式：/* CSS注释 */
2.1. 快速入门 <style> 标签
<style>
选择器 {
声明1；
声明2；
声明3；
}
</style>2.1.1. css 在 html 文件中编写（不推荐，但是在练习中省事）
- 没有美化：
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<h1>我是标题</h1>
</body>- 美化后：
<head>
<meta charset="UTF-8">
<title>index</title>
<!--规范,<style> 可以编写 CSS 代码-->
<!--此时h1就是一个选择器 -->
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>2.1.2. css 与 html 分开写，外部引入 css 文件
- style 标签不用写在 head 标签里面的
那么如何将 css 文件和 html 文件 联系起来呢？
答：通过 <link rel="stylesheet" href="./css/style.css">
- 效果：
<head>
<meta charset="UTF-8">
<title>index</title>
<!--导入 css 文件，<link> 标签-->
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>2.2. CSS 的三种导入方式
2.2.1. 行内样式
不符合 html 与 css 分离原则，偷懒使用
一般应用于网页已经基本完善好，某个地方要新增单独配置样式
<!--行内样式，在标签元素中，编写一个 style 属性，编写样式即可-->
<h1 style="color: red">一级标签</h1>
2.2.2. 内部样式
在 <head></head>中编写的 css 样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式-->
<style>
h1{
color: green;
}
</style>
</head>
<body>
<h1>一级标签</h1>
</body>
2.2.3. 外部样式
在 <head></head>中通过 link 标签导入 css 文件
h1{
color:yellow;
}<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外部样式-->
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h1>一级标签</h1>
</body>
2.2.4. 优先级问题
优先级问题：
- 行内样式，优先级最高
- 内部样式和外部样式，谁离选择器元素近，优先谁
总的来讲，就是遵循就近原则
<head>
<!--内部样式-->
<style>
h1{
color: green;
}
</style>
<!--外部样式-->
<link rel="stylesheet" href="./css/style.css">
<!--内部样式和外部样式，谁在下面，谁的优先级最高-->
</head>
<body>
<!--行内样式，在标签元素中，编写一个 style 属性，编写样式即可-->
<!--优先级最高-->
<h1 style="color: red">一级标签</h1>
</body>2.2.5. 拓展：外部样式的两种写法
- 链接式：
<!--外部样式-->
<link rel="stylesheet" href="./css/style.css">- 导入式：CSS 2.1 特有的
<style>
@import url("css/style.css");
</style>二者的区别：
- link是HTML标签，可以加载CSS文件，也可以定义RSS、rel等属性；import是CSS语法，只能加载CSS文件。
- link引入的CSS会和HTML同时加载；import引入的CSS会在页面加载完毕后加载。
- link可以被DOM操作，修改样式；import不可以被DOM操作。
- link的优先级高于import。
3. CSS选择器（重点+难点）
选择器的作用：选择页面上的某一个或者某一类元素
3.1. 基本选择器
3.1.1. 标签选择器
- 弊端：会选择所有的相同标签，修改其样式
- 下面两个 h1 标签，如果想让它一个红一个绿，标签选择器是做不到的
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器，会选择到网页上，所有相同的标签*/
h1{
color: green;
}
p{
font-size: 60px;
}
</style>
</head>
<body>
<!--最基本的得有一个标签-->
<h1>学java</h1>
<h1>学CSS标签选择器</h1>
<p>夕落</p>
</body>
3.1.2. 类选择器 class
- 好处：
- 可以跨标签使用
- 可以多个标签归类，是同一个class
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*需要借助属性 class */
/*使用方法：.class的名称{} */
.a{
color: #cc3636;
}
.b{
color: #ab15bd;
}
</style>
</head>
<body>
<h1 class="a">标题1</h1>
<h1 class="b">标题2</h1>
<h1 class="b">标题3</h1>
<p class="a">p标签</p>
</body>
3.1.3. id 选择器
使用id选择器时，要注意：
- id 全局唯一，否则报错（针对与js，详情见随风丶逆风的文章）
-
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*格式：#id名称{}*/
#a{
color: blue;
}
</style>
</head>
<body>
<h1 id="a">标题1</h1>
<h1 id="b">标题2</h1>
<h1>标题3</h1>
</body>
3.1.4. 三个基本选择器的优先级问题
- id选择器 > class 选择器 > 标签选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#a{
color: blue;
}
.b{
color: #cc3636;
}
</style>
</head>
<body>
<h1 class="b" id="a">标题1</h1>
<h1 class="b">标题2</h1>
<h1>标题3</h1>
</body>
3.2. 层次选择器
3.2.1. 后代选择器：在某个元素后面的所有
对于 body 后代有：p1~p6，ul，li
选择器格式：body p{ }
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器*/
body p{
background-color: #cc3636;
}
</style>
</head>
<body>
<p>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>
</body>
3.2.2. 子选择器：当前元素的下一代元素
对于 body 的子代有：p1~p3，ul
格式：body>p{ }
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*子选择器*/
body>p{
background-color: #cc3636;
}
</style>
</head>
<body>
<p>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>
</body>
3.2.3. 相邻兄弟选择器
选中和元素 a 相邻且处于下方的元素 p，进行样式修改，a不生效
格式：.a + p { }
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*相邻兄弟选择器*/
.a + p{
background-color: #cc3636;
}
</style>
</head>
<body>
<p>p0</p>
<p class="a">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>
</body>
<!--如果是这种写法，效果见图2-->
<p>p0</p>
<p class="a">p1</p>
<ul>
<li><p>p4</p></li>
<li><p>p5</p></li>
<li><p>p6</p></li>
</ul>
<p>p2</p>
<p>p3</p>
3.2.4. 通用选择器
选中和元素 a 同代的下方所有的元素 p ，进行样式修改，a不生效
格式：.a~p{ }
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*通用选择器*/
.a~p{
background-color: #cc3636;
}
</style>
</head>
<body>
<p>p0</p>
<p class="a">p1</p>
<p>p2</p>
<ul>
<li><p>p4</p></li>
<li><p>p5</p></li>
<li><p>p6</p></li>
</ul>
<p>p3</p>
</body>
3.3. 结构伪类选择器
3.3.1. 定位父元素，选取其子类中的目标元素
<head>
<meta charset="UTF-8">
<title>index</title>
<!--该环境不使用 class选择器，id选择器-->
<style>
/*选中ul第一个子元素*/
ul li:first-child{
background-color: #ab15bd;
}
/*选中ul最后一个子元素*/
ul li:last-child{
background-color: #0000f3;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
3.3.2. 定位父类下某个元素，如果是目标元素，则生效
<head>
<meta charset="UTF-8">
<title>index</title>
<!--该环境不使用 class选择器，id选择器-->
<style>
/*选中目标元素p，定位到父元素，数字代表第几个元素*/
/*如果是目标元素p生效，反之不生效*/
p:nth-child(1){
background-color: #ab15bd;
}
/*这个效果见图二*/
p:nth-child(2){
background-color: #ab15bd;
}
</style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
3.3.3. 定位父类下的指定元素且指定位置
<head>
<meta charset="UTF-8">
<title>index</title>
<!--该环境不使用 class选择器，id选择器-->
<style>
/*对于p元素，先找父类 body，再找处于第一位的 p 元素（相对于其他 p 元素，处于第一位）*/
p:nth-of-type(1){
background-color: yellow;
}
</style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
3.4. 属性选择器（常用）
- 相当于将 id 选择器和 class 选择器结合起来
标签名 [ 属性 = 属性值（可以使用正则） ]{ }
- = 绝对匹配
- *=模糊匹配
- ^=匹配以xxx开头
- ￥=匹配以xxx结尾
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器：对a标签做一些修改*/
.demo a{
float: left;/*设置左浮动*/
display: block;/*将a元素，设置成块级元素*/
height: 50px;/*高度*/
width: 50px;/*宽度*/
border-radius: 10px;/*圆角*/
background: blue;/*背景颜色*/
text-align: center;/*文字对齐方式：左右居中*/
text-decoration: none;/*文字下划线取消*/
color: gainsboro;/*文字颜色*/
font: bold 20px/50px Arial;/*设置粗体、字号为20像素、行高为50像素，字体为Arial*/
margin-right: 5px;/*每个元素向右偏移*/
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank" title="test">2</a>
<a href="images/123.html" class="links item" id="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">6</a>
<a href="/a.pdf">7</a>
<a href="/abc.pdf">8</a>
<a href="abc.doc">9</a>
<a href="adcd.doc" class="links item">10</a>
</p>
</body>
3.4.1. id属性选择器
3.4.1.1. 格式：标签[id属性]{ }
作用：将标签中带有id属性的标签全部选中
a[id]{
background: yellow;
}
3.4.1.2. 格式：标签[id属性=id属性值]{ }
作用：将标签中的目标id所在标签选中
a[id=first]{
background: red;
}
3.4.2. class属性选择器
3.4.2.1. 绝对匹配：标签[class="xxx"]{ }
a[class="links item first"]{
background: #17c713;
}
3.4.2.2. 模糊匹配:标签[class*="xx"]{ }
a[class*="links"]{
background: #17c713;
}
3.4.3. href属性选择器
3.4.3.1. 匹配开头的属性值
a[href^="https"]{
background: #cc3636;
}
3.4.3.2. 匹配末尾的属性值
a[href$="pdf"]{
background: #d407e5;
}
4. 美化网页（文字、阴影、超链接、列表、渐变……）
4.1. 为什么要美化网页？
- 有效的传递页面信息
- 美化页面，页面漂亮，吸引用户
- 凸显页面的主题
- 提高用户体验
4.2. span 标签
约定俗成：重点要突出的字，使用 span 包含起来
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
<!--本身没有突出-->
欢迎学习java
<br/>
<!--将重点使用 span 标签括起来-->
欢迎学习<span id="title1">java</span>
</body>
4.3. 字体样式
font: italic small-caps bold 20px Arial, sans-serif;/*例子*/4.3.1. 分别设置字体属性(常用)
font-family: /*设置字体类型*/
color: /*字体颜色*/
font-size: /*设置字体大小*/
font-weight: /*设置字体粗细*/
font-style：/*控制字体的倾斜效果*/4.4. 文本样式
4.4.1. 颜色：color --> 单词，#000000，rgba
color：red；/*用单词设置颜色*/
color：#000000；
color：rgb(0,0,0,0.5);/*RGBA，其中0.5(范围0~1)，设置颜色的深浅*/4.4.2. 文本对齐方式、首行缩进
text-align: center;/*默认左对齐，当前居中，也可以设置右对齐*/
text-indent: 2em;/*首行缩进：em代表字符，px代表像素点*/4.4.3. 行高
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.p1{
line-height: 100px;
}
</style>
</head>
<body>
<p class="p1">123123123</p>
<p>abcde</p>
</body>
4.4.4. 划线
text-decoration: overline;/*上划线*/
text-decoration: line-through;/*中划线*/
text-decoration: underline;/*下划线*/
4.4.5. 文字与图片居中
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*水平对齐，参照物：a，b*/
img, span {
vertical-align: middle;
}
</style>
</head>
<body>
<img src="resource/image/1.png" width="50px" height="50px">
<span>123123123123</span>
</body>对齐前：
对齐后：
4.4.6. 文本阴影
#pa1{
text-shadow: 5px 5px 5px yellow;
}
<p><a href="a1" id="pa1">星空</a></p>
4.5. 超链接伪类
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
text-decoration: none;/*去除下划线*/
color:#000000;/*修改颜色*/
}
/*==========================以下是超链接伪类=========================*/
/*鼠标悬浮响应*/
a:hover{
color: orange;
}
/*鼠标摁住响应：激活响应颜色*/
a:active{
color: green;
}
/*==================================================================*/
</style>
</head>
<body>
<a href="a1">
<img src="resource/image/1.png" width="50px" height="50px">
</a>
<p><a href="a1">图片1</a></p>
<p><a href="a1">星空</a></p>
<p><a href="a1">$1.00</a></p>
</body>
4.6. 列表
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li>
<li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li>
<li><a href="#">电脑</a> <a href="#">办公</a></li>
<li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li>
<li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li>
<li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li>
<li><a href="#">食品饮料</a> <a href="#">保健食品</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li>
</ul>
</div>
#nav{
width: 300px;
background: rgba(121, 121, 121, 0.3);
}
.title{
font-size: 18px;/*字体大小*/
font-weight: bold;/*设置粗体*/
text-indent: 1em;/*1个字体的缩进*/
line-height: 35px;/*行高*/
background: #cc3636;
}
ul {
}
/* 选中所有的ul li*/
ul li{
height: 30px ;/*设置行高*/
list-style: none;/*设置无序列表样式，这里是把·去掉*/
text-indent: 1em;/*文字缩进*/
}
a{
text-decoration: none;
font-size: 14px;
color: #000;
}
a:hover{
color: orangered;
text-decoration: underline;
}
4.7. 背景 background
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 600px;
height: 300px;
/*默认全部平铺 repeat */
background-image: url("../../resource/image/4.png");
border: 1px solid red ;/*边框：粗细 样式 颜色*/
}
.div1{
/*横着平铺*/
background-repeat: repeat-x;
}
.div2{
/*竖着平铺*/
background-repeat: repeat-y;
}
.div3{
/*不平铺*/
background-repeat: no-repeat;
/*设置背景位置*/
background-position: 200px 30px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
4.8. 渐变
background-image: linear-gradient(19deg, #21d4fd 0%, #b721ff 100%);
5. 盒子模型
- margin：外边距
- margin所在区域，它会控制两个元素之间的距离（a.margin+b.margin=ab元素之间的距离）
- padding：内边距
- 内容到边框的距离，通常是从边框左上角开始计算
- border：边框
- 边框 border: 粗细，样式，颜色；
5.1. 盒子模型大小计算
外边距+内边距+边框+内容所占的范围
6. 浮动：脱离标准文档流的方式
6.1. 标准文档流
标准文档流：指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。
6.2. display：一种实现行内元素排列的方式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>div块级元素a</div><span>span行内元素b</span><div>div块级元素c</div><span>span行内元素d</span>
</body>
6.2.1. block 块元素
.e{
display: block;
}
6.2.2. inline 行内元素
.c{
display: inline;
}
6.2.3. inline-block 是块元素，但是可以内联，在同一行
.c{
display: inline-block;
}
6.2.4. none 消失，网页上看不见（源码里存在）
.a{
display: none;
}
6.3. float 浮动（常用）
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="box">
<div class="a">
<img src="../resource/image/1.png" width=" 50px" height="150px">
</div>
<div class="b">
<img src="../resource/image/2.png" width=" 50px" height="50px">
</div>
<div class="c">
<img src="../resource/image/3.png" width=" 50px" height="50px">
</div>
<div class="d">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或者另一个浮动的盒子</div>
</div>
</body>div{
margin: 10px;
padding: 5px;
}
.box{
border: 1px solid red;
display: inline-block;
}
.a{
border: 1px solid #243fcb;
display: inline-block;
}
.b {
border: 1px solid #57117c;
display: inline-block;
}
.c{
border: 1px solid #568325;
display: inline-block;
}
.d{
border: 1px dashed #d6e321;
font-size: 12px;
line-height: 23px;
display: inline-block;
}6.3.1. 左右浮动
.a{
border: 1px solid #243fcb;
display: inline-block;
float: right;/*右浮*/
}
.c{
border: 1px solid #568325;
display: inline-block;
float: left;/*左浮*/
}
当网页大小变化时，他们的位置也会改变
6.4. 父级边框塌陷问题
在使用 float 浮动的时候，会引起父级边框塌陷问题，有以下的解决方法
.a{
border: 1px solid #243fcb;
display: inline-block;
float: right;
}
.b {
border: 1px solid #57117c;
display: inline-block;
float: left;
}
.c{
border: 1px solid #568325;
display: inline-block;
float: left;
}
.d{
border: 1px dashed #d6e321;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: right;
}
6.4.1. 增加父级高度
理论上将只要父级的宽高无限大，就不会出现该问题，但是实际开发中，我们会将它取得恰到好处
.box{
border: 1px solid red;
height: 200px;
}
6.4.2. 增加一个空的 div，清除浮动
<div class="box">
<div class="a"><img src="../resource/image/1.png" width=" 50px" height="150px"></div>
<div class="b"><img src="../resource/image/2.png" width=" 50px" height="50px"></div>
<div class="c"><img src="../resource/image/3.png" width=" 50px" height="50px"></div>
<div class="d">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或者另一个浮动的盒子</div>
<!--增加一个空的div盒子-->
<div class="clear"> </div>
</div>.clear{
clear: both;
margin: 0;
padding: 0;
}
6.4.3. clear：解决元素的浮动情况
.d{
border: 1px dashed #d6e321;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: right;
clear: right;
}
- clear：right；右侧不允许有浮动元素
- clear：left；左侧不允许有浮动元素
- clear：both；两侧不允许有浮动元素
- clear：none；不允许有浮动元素
6.4.4. overflow
作用：解决子级元素比父级元素大的情况
.box{
border: 1px solid red;
overflow: hidden;
}- overflow: hidden;超出父级的部分，父级会自动补全
.box {
border: 1px solid red;
height: 50px;
overflow: scroll;
}- overflow: scroll;增加一个滚动条，这是在父级高度固定时，子级的高度大于父级
6.4.5. 在父级添加一个伪类
.box:after{
content: '';
display: block;
clear: both;
}
/*避免了在html中添加一个空div的情况，改用代码实现*/
6.5. 对比
- display
- 方向不可以控制
- float
- 浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷问题
7. 定位：脱离标准文档流的方式
<head>h
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father {
border: 1px solid #ff0000;
padding: 0;
}
#first {
border: 1px dashed #77e819;
background: #77e819;
}
#second {
border: 1px dashed #00c4ff;
background: #00c4ff;
}
#third {
border: 1px dashed #c817dc;
background: #c817dc;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
7.1. 相对定位：relative
相对于原来的位置，进行指定的偏移。
相对定位后，它仍在标准文档流中，原来位置会被保留。
7.1.1. 添加相对定位
#first {
border: 1px dashed #77e819;
background: #77e819;
position: relative; /*相对定位：上下左右*/
}
#second {
border: 1px dashed #00c4ff;
background: #00c4ff;
position: relative;
}
#third {
border: 1px dashed #c817dc;
background: #c817dc;
position: relative;
}
可以看出，添加相对定位后，位置不会发生改变，且四个方向的偏移量都为0
7.1.2. 偏移
#first {
border: 1px dashed #77e819;
background: #77e819;
/*相对定位：上下左右*/
position: relative;
top: -20px;
}
相对于之前的位置，向上偏移了20px
同理：left，bottom，right，也是一样的用法，就是方向不同
7.1.3. 偏移方向疑惑点
top：-20px；应该是相对于之前向下移动才对
个人观点：
如图所示，黑色边框是原来的位置，那么向内侧方向移动就是 20px ，向外侧移动就是 -20px
验证：
#first {
border: 1px dashed #77e819;
background: #77e819;
position: relative;/*相对定位：上下左右*/
top: -20px;
left: 20px;
}
#third {
border: 1px dashed #c817dc;
background: #c817dc;
position: relative;
bottom: 20px;
right: 20px;
}7.1.4. 练习题
- 使用<div>和<a>布局页面
- 每个超链接的高度和宽度都是100px，背景是粉色，鼠标移上去是蓝色
- 使用相对定位改变每个超链接的位置
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 305px;
height: 305px;
border: 1px solid red;
padding: 5px;
}
a{
width: 100px;
height: 100px;
background: pink;/*背景颜色*/
text-decoration: none;/*去掉下划线*/
text-align: center;/*左右居中*/
line-height: 100px;/*行高100px，保证文字上下居中*/
color: white;/*字体颜色*/
display: block;/*转换成块级元素*/
}
a:hover{
background: blue;
}
.a2,.a4{
position: relative;
left: 200px;
top: -100px;
}
.a5{
position: relative;
left: 100px;
top: -300px;
}
</style>
</head>
<body>
<div class="box">
<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>
</body>
7.2. 绝对定位：absolute
定位：基于xxx进行指定方向的偏移
- 没有父级元素定位的情况下，相对于浏览器进行定位，同时会有一个默认的偏移量position
-
- 父级元素定位存在，我们通常会相对于父级元素进行偏移
- 确定后只能在父级元素中进行偏移，无法突破父级元素
- 如何证明父级元素存在？答：父级元素中有 position 修饰。
相对与父级或者浏览器的位置，进行指定的偏移
绝对定位后，它不会存在标准文档流中，且原来的位置会消失
7.2.1. 添加绝对定位
#first {
border: 1px dashed #77e819;
background: #77e819;
position: absolute;
}
元素所占像素点的大小会被改变：外边距+内边距+边框+实际内容所占空间
所以你看到的绿色块会变短
7.2.2. 偏移
7.2.2.1. 没有指定父级元素
#first {
border: 1px dashed #77e819;
background: #77e819;
position: absolute;
top: 30px;
}
7.2.2.2. 指定父级元素
#father {
border: 1px solid #ff0000;
padding: 0;
/*相对定位*/
position: relative;
}
#first {
border: 1px dashed #77e819;
background: #77e819;
position: absolute;
top: 30px;
}
7.2.3. 偏移方向疑惑点
与相对定位的偏移一致
如果同时向左向右偏移呢？
答：如图，但是一般不这么弄
#first {
border: 1px dashed #77e819;
background: #77e819;
position: absolute;
left: 40px;
right: 40px;
}
7.3. 固定定位：fixed
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
height: 1000px;
}
div:nth-of-type(1) {
width: 100px;
height: 100px;
background: red;
position: absolute; /*绝对定位，相对于浏览器*/
right: 0;
bottom: 0;
}
div:nth-of-type(2) {
width: 50px;
height: 50px;
background: blue;
position: fixed; /*固定定位*/
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
在网页生成后，都定位到了右下角
移动滚轮后，红色块上移，蓝色块不动
原因：蓝色块是固定定位，红色块是绝对定位
7.4. 图层：z-index
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<ul>
<li><img src="../resource/image/1.png" alt="" width="200px" height="300px"></li>
<li class="tipText">星空背景图</li>
<li class="tipBg"></li>
<li>2024-7-16</li>
<li>位置：火星</li>
</ul>
</div>
</body>#app {
width: 200px;
margin: 0;
padding: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid #000000;
color: red;
}
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
/*父级元素，相对定位*/
#app ul{
position: relative;
}
/*子级元素进行绝对定位*/
.tipText,.tipBg{
position: absolute;
bottom: 60px;/*或者top：270；*/
width: 200px;
height: 25px;
border: 1px dashed red;
}
.tipBg{
background: white;
}
7.4.1. 图层移动
默认：z-index=0；
.tipText{
z-index: 1;/*可以看见文字*/
color: black;
}
.tipText{
z-index: 0;/*看不到文字*/
color: black;
}
将白色背景面板高都调整为25px
调整了”星空背景图“文字所在图层的位置，修改了颜色方便识别
7.4.2. 透明度
.tipBg{
background: white;
opacity: 0.5;/*透明度*/
}
8. 网页动画：拓展了解
动画一般使用js制作，css也能但是比较复杂。
- css动画：奔跑的马
- 菜鸟教程：
- CSS3：(CSS3 教程 | 菜鸟教程)
- less：用编程的思想写代码，然后生成css代码
- css的预处理语言，扩展了css语言，增加了变量，Mixin，函数等特性，使css更易维护和扩展
- less可以运行在node和浏览器中
- Less 快速入门 | Less.js 中文文档 - Less 中文网
- js动画：
- canvas动画
卡巴斯基全球网络攻击实时图：
9. 总结（截的别人的）
2009
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
