学习课程：【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili
目录
一、CSS入门
- 1、CSS是什么
- 2、CSS怎么用（快速入门）
- 3、CSS选择器（重点+难点）
- 4、美化网页（文字、阴影、超链接、列表、渐变）
- 5、盒子模型
- 6、浮动
- 7、定位
- 8、网页动画（特效效果）
二、CSS快速入门及优势
- 文件格式：
- 基础入门（不分离CSS和HTML）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范,<style>可以编写css代码，每一个声明，最好使用分号结尾
语法：
选择器{
声明1；
声明2；
声明3；
}
-->
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
- 基础入门（分离CSS和HTML，建议使用这种样式）
<--HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>/*CSS*/
h1{
color:red;
}三、四种CSS的导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
<!--内部样式-->
<style>
h1{
color:green;
}
</style>
</head>
<body>
<!--优先级：就近原则-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color:red">我是标题</h1>
</body>
</html>拓展：外部样式的两种写法
- 链接式：
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">- 导入式：
<!--导入式-->
<style>
@import url("css/style.css");
</style>- 区别：<link>是HTML标签，可以直接在HTML源代码中使用，而@import url属于CSS样式，是CSS2.1特有的，需要放在<style>标签中使用。平常使用<link>标签多一些。
四、三种基本选择器
作用：选择页面上的某一个或者某一类元素
4.1基本选择器
- 标签 选择器：选择一类标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器:会选择到HTML上所有的这个标签*/
h1{
color: #29ea13;
background: saddlebrown;
border-radius: 10px;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>学Java</h1>
<h1>学Java</h1>
<p>听我说</p>
</body>
</html>
- 类 选择器 class：选择所有class属性一致的标签，可以跨标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式 。class的名称{}
好处：可以多个标签归为一类，也就是声明为同一个class，可以复用
*/
.c1{
color: green;
}
.c2{
color:yellow;
}
</style>
</head>
<body>
<h1 class="c1">标题1</h1>
<h1 class="c2">标题2</h1>
<h1 class="c1">标题3</h1>
<p class="c1">p标签</p>
</body>
</html>
- id 选择器：全局唯一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器
#id名称{}
id必须保证全局唯一
优先级：不遵循就近原则，id选择器>class选择器>标签选择器
*/
#c1{
color:green;
}
.style1{
color:yellow;
}
h1{
color:saddlebrown;
}
</style>
</head>
<body>
<h1 id="c1">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>
4.2层次选择器
- 后代 选择器：在某个元素的后面的所有选中元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器*/
body p{
background: red;
}
</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>
</html>
- 子 选择器：仅后面一代的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*子选择器*/
body>p{
background: red;
}
</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>
</html>
- 相邻兄弟 选择器：当前选中元素的向下一个相邻元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*相邻兄弟选择器*/
.c1 + p{
background: red;
}
</style>
</head>
<body>
<p >p1</p>
<p class="c1">p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</html>
- 通用 选择器：当前选中元素的向下所有同辈元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*通用选择器*/
.c1~p{
background: red;
}
</style>
</head>
<body>
<p >p1</p>
<p class="c1">p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</html> 
4.3结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--避免使用class和id选择器-->
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: red;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: green;
}
/*选中p1：定位到父元素，选择当前的第一个元素
选择当前p元素的父元素，选中父元素的第一个，并且是当前元素才生效，如果是其他元素则不生效！！
*/
p:nth-child(1){
background: saddlebrown;
}
p:nth-of-type(2){
background: yellow;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
4.4属性选择器(常用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float:left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;/*圆角*/
background: #94d38f;
text-align: center;/*居中显示*/
color: grey;
text-decoration: none;/*去掉下划线*/
margin-right: 5px;
font:bold 20px/50px Arial;
}
/*属性名=属性值(可以使用正则表达式匹配)
= 绝对等于
*= 包含这个元素，用于正则表达式匹配
^= 以这个元素开头
$= 以这个元素结尾
*/
/*存在id属性的元素 a[]{}*/
/*a[id=first]{*/
/* background: yellow;*/
/*}*/
/*class中有links元素的*/
/*a[class*="links"]{*/
/* background: saddlebrown;*/
/*}*/
/*选中href中以http开头的元素*/
/*a[href^=http]{*/
/* background: yellow;*/
/*}*/
/*选中以href中以pdf结尾的元素*/
a[href$=pdf]{
background: yellow;
}
</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">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>
五、CSS的作用及字体样式(美化网页元素)
5.1为什么要美化网页
- CSS可以有效地传递网页信息，比如打开淘宝网你第一眼一定会看到淘宝网三个大字及其样式；
- 美化网页，页面漂亮才能吸引用户；
- 提高用户体验。
5.2字体样式
- span标签：重点要突出的字，使用span标签套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习<span id="title1">Java</span>
</body>
</html>
- 字体样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--font-family：字体
font-size:字体大小
font-weight:字体粗细
color：字体颜色
-->
<style>
body{
font-family: "Arial Black",楷体;
color:saddlebrown;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bold;
}
</style>
</head>
<body>
<h1>刘易斯·汉密尔顿</h1>
<p class="p1">刘易斯·汉密尔顿（Lewis Hamilton），1985年1月7日出生于英格兰斯蒂夫尼奇，
英国世界一级方程式锦标赛（F1）赛车手，七届F1世界冠军得主，也是F1史上第一位黑人车手。</p>
<p class="p2">2007年初登陆F1舞台便创下连续9站登领奖台的纪录，2007年以1分之差惜败，
获得年度亚军。2008年成为F1史上首位夺取个人冠军的黑人车手。</p>
<p>Landing on the F1 stage in early 2007 set a record of nine consecutive podium stops. In 2007,
he narrowly lost by one point and won the second place of the year. In 2008, he became the
first black driver to win an individual championship in F1 history.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--字体风格:斜体 粗细 字体大小 字体-->
<style>
p{
font:oblique bolder 20px "楷体";
}
</style>
</head>
<body>
<p>2007年初登陆F1舞台便创下连续9站登领奖台的纪录，2007年以1分之差惜败，
获得年度亚军。2008年成为F1史上首位夺取个人冠军的黑人车手。</p>
</body>
</html> 
5.3文本样式
- 颜色：color：rgb/rgba
- 文本对齐方式：text-align:center
- 首行缩进：text-indent:2em
- 行高：line-height
- 文本的装饰(下划线等)：text-decoration(a标签默认有下划线)
- 文本图片水平对齐：vertical-align:middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
颜色：
单词
RGB #XXXXXX(0~F六位数字表示)
RGBA A(透明度):0~1
排版：
居中 text-align:center
首行缩进：text-indent:2em
行高：line-height 行高和块的高度一致了，就可以让文字上下居中显示
-->
<style>
h1{
color:rgba(0,255,255,0.9);
text-align: center;
}
.p1{
text-indent:2em;
}
.p3{
background: saddlebrown;
height: 300px;
line-height: 300px;
}
/*超链接标签默认有下划线*/
a{
text-decoration: none;
}
/*下划线*/
.l1{
text-decoration: underline;
}
/*中划线*/
.l2{
text-decoration: line-through;
}
/*上划线*/
.l3{
text-decoration: overline;
}
/*水平对齐，参照物，a和b对齐*/
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<a href="">123</a>
<p class="l1">123123</p>
<p class="l2">123123</p>
<p class="l3">123123</p>
<h1>刘易斯·汉密尔顿</h1>
<p class="p1">刘易斯·汉密尔顿（Lewis Hamilton），1985年1月7日出生于英格兰斯蒂夫尼奇，
英国世界一级方程式锦标赛（F1）赛车手，七届F1世界冠军得主，也是F1史上第一位黑人车手。</p>
<p class="p2">2007年初登陆F1舞台便创下连续9站登领奖台的纪录，2007年以1分之差惜败，
获得年度亚军。2008年成为F1史上首位夺取个人冠军的黑人车手。</p>
<p class="p3">Landing on the F1 stage in early 2007 set a record of nine consecutive podium stops. </p>
<p>
<img src="images/lec.png" alt="">
<span>法拉利加油！</span>
</p>
</body>
</html>
5.4文本阴影和超链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*默认的颜色*/
a{
text-decoration: none;
color:black;
}
/*鼠标悬浮的颜色,常用*/
a:hover{
color:orange;
font-size:50px;
}
/*鼠标按住没有释放的颜色，不常用*/
a:active{
color:yellow;
}
/*已访问的链接*/
a:visited{
color:red;
}
/*未访问的链接*/
a:link{
color:saddlebrown;
}
/*阴影的颜色 水平偏移 垂直偏移 阴影半径*/
#price{
text-shadow:#3cc7f5 10px 10px 2px;
}
</style>
</head>
<body>
<a href="#">
<img src="images/lec.png" alt="">
</a>
<p>
<a href="#">勒克莱尔</a>
</p>
<p>
<a href="#">法拉利车队</a>
</p>
<p id="price">
2022F1巴林站冠军
</p>
</body>
</html>
5.5列表样式练习
<!--HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表样式</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<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>
</body>
</html>/*CSS*/
#nav{
width:300px;
background: grey;
}
.title{
font-size:18px;
font-weight:bold;
text-indent:1em;
line-height:35px;
background: red;
}
/*ul li*/
/*list-style
none:去掉ul圆点
circle：将圆点变成空心圆
decimal：数字
square：正方形
*/
ul{
background:grey;
}
ul li{
height:30px;
list-style: none;
text-indent:1em;
}
a{
text-decoration: none;
font-size:14px;
color:black;
}
a:hover{
color:orange;
text-decoration: underline;
}- 没有CSS的原始HTML页面：
- 添加了CSS的HTML页面：
5.6背景图像应用及渐变
- 背景图片设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
/*默认全部平铺 repeat*/
background-image: url("images/lec.png");
}
/*仅仅水平平铺图片*/
.div1{
background-repeat: repeat-x;
}
/*仅仅竖直平铺图片*/
.div2{
background-repeat: repeat-y;
}
/*不平铺*/
.div3{
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
- 背景颜色设置(在5.5的CSS代码基础上修改)
.title{
font-size:18px;
font-weight:bold;
text-indent:1em;
line-height:35px;
background: red url("../images/lec.png") 210px 0px no-repeat;
}ul li{
height:30px;
list-style: none;
text-indent:1em;
background-image:url("../images/lec.png");
background-repeat:no-repeat ;
background-position: 160px 1px;
}
- 渐变
可以查询http://www.grabient.com直接选择合适的渐变色复制其CSS代码
六、盒子模型
6.1 什么是盒子？
- margin：外边距
- padding：内边距
- border：边框
6.2 边框
- 边框的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*body总有一个默认的外边距margin:0，常见操作，进行初始化操作*/
h1,ul,li,a,body{
margin:0;
padding:0;
text-decoration: none;
}
/*border:粗细，样式，颜色*/
#box{
width: 300px;
border:1px solid red;
}
h2{
font-size:16px;
background-color:#3cbda6;
line-height: 30px;
color:white;
}
form{
background: #62dc62;
}
div:nth-of-type(1) input{
border:3px solid black
}
div:nth-of-type(2) input{
border:3px dashed yellow
}
div:nth-of-type(3) input{
border:3px dashed #008c27
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="text">
</div>
<div>
<span>邮箱：</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
- 内外边距及div居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外边距的妙用:居中元素
margin:0 auto;
-->
<style>
#box{
width: 300px;
border:1px solid red;
margin:0 auto;
}
/*顺时针旋转
margin:0
margin:0 1px
margin:0 1px 2px 3px
*/
h2{
font-size:16px;
background-color:#3cbda6;
line-height: 30px;
color:white;
}
form{
background: #62dc62;
}
input{
border:1px solid black
}
div:nth-of-type(1){
padding:10px;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="text">
</div>
<div>
<span>邮箱：</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>- 盒子的计算方式：你的元素有多大？公式：margin+border+padding+内容宽度
6.3 圆角边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:100px;
height:100px;
border:10px solid red;
border-radius:0px 50px 0px 0px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6.4 阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:100px;
height:100px;
border:10px solid red;
border-radius: 50px;
box-shadow:10px 10px 100px yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
七、浮动
7.1 display
- 这是一种实现行内元素排列的方式，但是很多情况下，我们都会使用float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--display
block 块元素
inline 行内元素
inline-block 是块元素但是也是行内元素
none 消失
-->
<style>
div{
width:100px;
height:100px;
border:1px solid red;
display:inline-block;
}
span{
width:100px;
height:100px;
border:1px solid red;
display:inline-block;
}
</style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>
7.2 float浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div id="father">
<div class="layer01"><img src="images/ham.png" alt=""/></div>
<div class="layer02"><img src="images/lec.png" alt=""/></div>
<div class="layer03"><img src="images/vet.png" alt=""/></div>
<div class="layer04">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到了包含框或另一个浮动盒子为止</div>
</div>
</body>
</html>div{
margin:10px;
padding:5px;
}
#father{
border:1px #000 solid;
}
.layer01{
border:1px #F00 dashed;
display:inline-block;
float:left;
}
.layer02{
border:1px #00F dashed;
display:inline-block;
float:right;
}
.layer03{
border:1px #060 dashed;
display:inline-block;
}
.layer04{
border:1px #666 dashed;
font-size:12px;
line-height: 23px;
display:inline-block;
}
- clear的使用：
/*clear：
right：右侧不允许有浮动元素
left：左侧不允许有浮动元素
both：两侧不允许有浮动元素
none
*/7.3 父级边框塌陷问题
- 增加父级边框的高度：
#father{
border:1px #000 solid;
height: 900px;
}
- 增加一个空的div标签清除浮动
<div class="clear"></div>.clear{
clear:both;
margin: 0;
padding: 0;
}
- 使用overflow：在父级元素中增加一个overflow：hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--overflow:
scroll 内容超出长度的部分使用滚动条
hidden 内容超出长度的部分将其隐藏
-->
<style>
#content{
width: 200px;
height: 150px;
overflow: scroll;
}
</style>
</head>
<body>
<div id="content">
<img src="images/lec.png" alt="">
<p>指一个人发出的笑声，高兴欢乐时的状态，抒发快乐的心情，表现一个人很开心的状态。也指人通常用来开玩笑。人的一种笑声，高兴，开心。</p>
</div>
</body>
</html>
#father{
border:1px #000 solid;
overflow:hidden;
}
- 父类添加一个伪类：after(推荐使用)
#father{
border:1px #000 solid;
}
#father:after{
content:'';
display: block;
clear:both;
}
7.4 display和float对比
- display：方向不可以控制
- float：浮动起来的话会标准文档流，所以要解决父级边框塌陷的问题
八、定位
8.1 相对定位
相对定位：postion:relative
相对于原来的位置进行四向偏移，为top、bottom、left、right。
相对定位的话，它仍然在标准文档流当中，原来的位置会被保留。
<!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 solid #666;
padding:0;
}
#first{
background-color:#a13d30;
border:1px dashed #b27538;
position:relative;/**相对定位，上下左右**/
top:-20px;
left:20px;
}
#second{
background-color:#255099;
border:1px dashed #255066;
position: relative;
bottom: -10px;
right:-20px;
}
#third{
background-color:#1c6699;
border:1px dashed #1c6615;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
8.2 方块定位练习详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width:300px;
height: 300px;
padding:10px;
border:2px solid red;
}
a{
width:100px;
height:100px;
text-decoration: none;
background:#ffa1f2;
line-height: 100px;
text-align:center;
color:white;
display:block;
}
a:hover{
background: #47a4ff;
}
.a2,.a4{
position:relative;
left:200px;
top:-100px;
}
.a5{
position:relative;
left:100px;
top:-300px;
}
</style>
</head>
<body>
<div id="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>
</html>
8.3 绝对定位
定位：基于XXX定位，上下左右
在父级元素的范围内移动，相对于父级和浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
- 没有父级元素定位的前提下，相对于浏览器页面定位
#father{
border:1px solid #666;
padding:0;
}
#second{
background-color:#255099;
border:1px dashed #255066;
position:absolute;
right:30px;
top:-10px;
}
2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移
#father{
border:1px solid #666;
padding:0;
position: relative;
}
#second{
background-color:#255099;
border:1px dashed #255066;
position:absolute;
right:30px;
top:-10px;
}
8.4 固定定位
<!DOCTYPE html>
<html lang="en">
<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: yellow;
position:fixed;
right:0;
bottom:0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
8.5 z-index
z-index：图层，默认为0，最高层级为999
<!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/lec.png" alt=""></li>
<li class="tipText">学习微服务，找法拉利捏</li>
<li class="tipBg"></li>
<li>时间：2022-04-09</li>
<li>地点：澳大利亚赛道</li>
</ul>
</div>
</body>
</html>#content{
width:200px;
padding: 0px;
margin: 0px;
overflow:hidden;
font-size: 12px;
line-height: 25px;
border:1px #000 solid;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width:200px;
height: 25px;
top:208px;
}
.tipText{
color:white;
z-index:999;
}
.tipBg{
background: black;
opacity:0.7;/**背景透明度**/
}
9599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
