css基础知识
css的作用
给页面中的HTML标签设置样式
css引用的三种方式
1.行内样式:使用style属性,所有的标签都有style属性,不推荐使用
2.内部样式:使用style标签,style标签要在head标签中
3.外部样式:需要创建外部文件,通过使用link标签引入,开发时推荐使用
优先级
优先级:1.行内>内部和外部
就近原则:谁离标签近谁生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css引用的三种方式</title>
<style>
p{
color: green;
}
</style>
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<h2 style="color: yellowgreen;">
1.行内样式:使用style属性,所有的标签都有style属性,不推荐使用
</h2>
<p>
2.内部样式:使用style标签,style标签要在head标签中
</p>
<h3>
3.外部样式:需要创建外部文件,通过使用link标签引入,开发时推荐使用
</h3>
<h4>
优先级:1.行内>内部和外部
就近原则:谁离标签近谁生效
</h4>
</body>
</html>
css基础选择器
1.标签选择器
结构:标签名 { css属性名:属性值; }
➢作用:通过标签名,找到页面中所有这类标签,设置样式
➢注意点:
1.标签选择器选择的是一类标签,而不是单独某一个
2.标签选择器无论嵌套关系有多深,都能找到对应的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器</title>
<style>
li{
color: #12d622;
}
</style>
</head>
<body>
<ul>
<li>标签</li>
<li>标签</li>
<li>标签</li>
<li>标签</li>
<li>标签</li>
</ul>
</body>
</html>
2.类选择器
结构:**.**类名{ css属性名:属性值; }
➢作用:通过类名,找到页面中所有带有这个类名的标签,设置样式
➢注意点:
1.所有标签上都有class属性,class属性的属性值称为类名(类似于名字)
2.类名可以由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头
3.一个标签可以同时有多个类名,类名之间以空格隔开
4.类名可以重复,一个类选择器可以同时选中多个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器</title>
<style>
.p1{
color: aqua;
}
.p2{
background-color: coral;
}
</style>
</head>
<body>
<p class="p1">1.每个标签都有class属性,class属性的值叫做类名</p>
<p class="p1">2.类名由:数字,字母,下划线,中划线组成,不能用数字开头</p>
<p class="p1 p2">3.一个表签可以有多个类名,类名中间用空格隔开</p>
<p>4.一个类名可以在多个标签中使用</p>
<p>5.类使用符号 . 来表示</p>
</body>
</html>
3.id选择器
结构:#id属性值 { css属性名:属性值; }
➢作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式
➢注意点:
1.所有标签上都有id属性
2.id属性值类似于身份证号码,在一个页面中是唯一的,不可重复的!
3.一个标签上只能有一个id属性值
4.一个id选择器只能选中一个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id选择器</title>
<style>
#p1{
color: blue;
}
</style>
</head>
<body>
<p id="p1">
1.每个标签都有id属性<br>
2.每个标签只能有一个id<br>
3.一个id只能对应一个标签<br>
4.id选择器使用#代表
</p>
</body>
</html>
4.通配符选择器
结构:***** { css属性名:属性值; }
➢作用:找到页面中所有的标签,设置样式
➢注意点:
1.开发中使用极少,只会在极特殊情况下才会用到
2.在基础班小页面中可能会用于去除标签默认的margin和padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通配符</title>
<style>
*{
color: aqua;
}
</style>
</head>
<body>
<h1>通配符:选择所有标签</h1>
<p>极少使用</p>
</body>
</html>
选择器的优先级
通配符<标签选择器<类选择器<id选择器
css背景
背景颜色:background-color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景颜色</title>
<style>
ul{
/* 颜色名 */
background-color: yellowgreen;
/* 16进制 */
background-color: #999;
/* rgb */
background-color: rgb(255, 122, 134);
/* rgba */
background-color: rgba(255, 122, 166, 0.5);
/* hsl */
background-color: hsl(0, 77%, 53%);
/* hsla */
background-color: hsla(0, 77%, 53%, 0.5);
}
li{
background-color: aqua;
}
</style>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
</html>
背景图片:background-image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图片</title>
<style>
body{
height: 800px;
width: 1000px;
/* 背景图片 */
background-image: url(img/sunjunpchuazhoutu.jpg);
/* 背景平铺 */
background-repeat: no-repeat;
/* 背景尺寸 */
background-size: 1000px 500px;
/* 背景定位 */
background-position: 300px 200px;
}
</style>
</head>
<body>
</body>
</html>
背景简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景简写</title>
<style>
body{
height: 800px;
width: 100%;
background: yellowgreen url(img/sunjunpchuazhoutu.jpg) no-repeat 200px 300px;
background-size: 1000px 500px;
}
</style>
</head>
<body>
</body>
</html>
css文本属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本属性</title>
<style>
.l1{
/* 字体颜色 */
color: aqua;
}
.l2{
/* 文字方向:ltr rtl */
direction: rtl;
}
.l3{
/* 行高 */
line-height: 50px;
/* 字符间距 */
letter-spacing: 30px;
/* 文本对齐 */
text-align: center;
/* 文本装饰 */
text-decoration: underline;
}
a{
/* 去除a标签的下划线 */
text-decoration: none;
}
p{
/* 首行缩进 */
text-indent: 1em;
}
.l3{
/* 控制字母 */
text-transform:capitalize;
}
p{/* 处理空格 */
字体
CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。
white-space: pre-line;
}
.l4{
/* 单词间距,不支持中文 */
word-spacing: 190px;
}
</style>
</head>
<body>
<p>asdfghj
<a href="#">百度</a>
</p>
<p>
CSS 文本属性
属性 描述
color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。
</p>
<ul>
<li class="l1">ssssssssssss</li>
<li class="l2">asdfgh</li>
<li class="l3">hello word!</li>
<li class="l4">hello word!</li>
<li class="l5">ssssssssssss</li>
<li class="l6">ssssssssssss</li>
<li class="l7">ssssssssssss</li>
<li class="l8">ssssssssssss</li>
<li class="l9">ssssssssssss</li>
</ul>
</body>
</html>
css字体/颜色属性
字体属性:font
字体样式如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体样式</title>
<link rel="stylesheet" href="css/font.css">
</head>
<body>
<p>字体样式:</p>
<p class="p1">1.font-size 字体大小</p>
<p class="p2">
2.font-weight 字体宽度
取值:normal 正常 blod 加粗 bolder 更粗
100~900
</p>
<p class="p3">
3.font-style 字体样式(是否倾斜) <br>
normal 正常 italic 倾斜
</p>
<p class=".p4">
4.font-family 字体系列
</p>
<p class="p5">
5.font 简写(复合属性,连写):倾斜 加粗 大小 系列
</p>
</body>
</html>
颜色属性:color
可以用以下方法来规定 CSS 中的颜色:
十六进制色
RGB 颜色
RGBA 颜色
HSL 颜色
HSLA 颜色
css选择器的进阶
复合选择器
1.后代选择器:空格
作用:根据 HTML 标签的嵌套关系,选择父元素 后代中 满足条件的元素
➢选择器语法:选择器1选择器2 { css }
➢结果:
•在选择器1所找到标签的后代(儿子、孙子、重孙子…)中,找到满足选择器2的标签,设置样式
➢注意点:
1.后代包括:儿子、孙子、重孙子……
2.后代选择器中,选择器与选择器之前通过 空格 隔开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后代选择器</title>
<style>
/* 要求,修改所有ul中的p标签的文字大小 */
ul p{
/* ul中的所有p标签 */
font-size: 40px;
}
/* ul中所有的li */
ul li{
color: red;
}
/* 子选择器:直接子元素 */
body>p{
color: yellowgreen;
}
</style>
</head>
<body>
<p>这是外边的p标签</p>
<ul>
<li>
<p>这是ul的孙子</p>
</li>
<li>
<p class="p2">
这是li的儿子
</p>
</li>
<li>
<a href="#" id="a1">这是body的重孙子</a>
</li>
</ul>
</body>
</html>
2.子代选择器:>
➢作用:根据 HTML 标签的嵌套关系,选择父元素 子代中 满足条件的元素
➢选择器语法:选择器****1 > 选择器****2 { css }
➢结果:
•在选择器1所找到标签的子代(儿子)中,找到满足选择器2的标签,设置样式
➢注意点:
1.子代只包括:儿子
2.子代选择器中,选择器与选择器之前通过 > 隔开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后代选择器</title>
<style>
/* div中的所有p标签 */
.d1 p{
background-color: aqua;
}
/* 子选择器:只有直接子元素会生效 */
.d1>p{
font-size: 30px;
}
</style>
</head>
<body>
<div class="d1">
<p>直接后代</p>
<div>
<p>间接后代</p>
</div>
</div>
</body>
</html>
3.交集选择器:紧挨着
➢作用:选中页面中 同时满足 多个选择器的标签
➢选择器语法:选择器1选择器****2 { css }
➢结果:
•(既又原则)找到页面中 既 能被选择器1选中,又 能被选择器2选中的标签,设置样式
➢注意点:
1.交集选择器中的选择器之间是紧挨着的,没有东西分隔
交集选择器中如果有标签选择器,标签选择器必须写在最前面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交集选择器</title>
<style>
p.a{
color: red;
}
</style>
</head>
<body>
<p class="a">
交集选择器中的选择器之间是紧挨着的,没有东西分隔
交集选择器中如果有标签选择器,标签选择器必须写在最前面
</p>
<p class="b">
爱上对方过后就哭了
</p>
<a href="#" class="a">阿斯顿</a>
</body>
</html>
4.并集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>并集选择器</title>
<style>
/* l1 红 l2,l3 黄 */
.li1{
color: red;
}
.li2,.li3{
color: yellowgreen;
}
.p1,
.li2>p {
color: aqua;
}
ul .p2,
span{
color: pink;
}
</style>
</head>
<body>
<p class="p1">并集选择器</p>
<ul>
<li class="li1">
并集选择器中的每组选择器之间通过 , 分隔
</li>
<li class="li2">
<p class="p2">
并集选择器中的每组选择器可以是基础选择器或者复合选择器
</p>
<span>asdasd</span>
</li>
<li class="li3">
并集选择器中的每组选择器通常一行写一个,提高代码的可读性
<span>asdasd</span>
</li>
</ul>
<span>asdasdasd</span>
</body>
</html>
5.hover伪类选择器
➢作用:选中鼠标悬停在元素上的状态,设置样式
➢选择器语法:选择器**:hover** { css }
➢注意点:
1.伪类选择器选中的元素的某种状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hover伪类选择器</title>
<style>
p:hover{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>鼠标移入变色</p>
</body>
</html>
元素显示模式
1.1 块级元素
➢显示特点:
1.独占一行(一行只能显示一个)
2.宽度默认是父元素的宽度,高度默认由内容撑开
3.可以设置宽高
➢代表标签:
•div、p、h系列、ul、ol,li、dl、dt、dd、form、header、nav、footer……
1.2行内元素
➢显示特点:
1.一行可以显示多个
2.宽度和高度默认由内容撑开
3.不可以设置宽高
➢代表标签:
•a、span 、b、u、i、s、strong、ins、em、del……
1.3 行内块元素
➢显示特点:
1.一行可以显示多个
2.可以设置宽高
➢代表标签:
•input、textarea、button、select……
•特殊情况:img标签有行内块元素特点,但是Chrome调试工具中显示结果是inline
1.4元素显示模式转换
➢目的:改变元素默认的显示特点,让元素符合布局要求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素显示模式</title>
<style>
a{
/* 变块 */
display: block;
height: 100px;
width: 100px;
background-color: aqua;
}
p{
/* 变行内 */
display: inline;
background-color: pink;
}
.i1{
/* 隐藏 */
display: none;
}
.d1{
height: 300px;
background-color: chocolate;
}
.d1:hover .i3{
display: none;
}
</style>
</head>
<body>
<a href="#">行内--块</a>
<a href="#">行内--块</a>
<p>块--行内</p>
<img src="img/A.jpg" class="i1">
<img src="img/A.jpg" class="i2">
<div class="d1">
<img src="img/A.jpg" class="i3">
</div>
</body>
</html>
盒子模型
div
div:div是一个盒子,是一个块状元素,默认占一整行,默认没有高度
盒子的概念
1.页面中的每一个标签,都可看做是一个 “盒子”,通过盒子的视角更方便的进行布局
2.浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为 盒子
盒子模型
CSS 中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成,这就是 盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div</title>
<style>
.a{
height: 300px;
background-color: aqua;
}
.b{
height: 300px;
width: 500px;
background-color: yellowgreen;
}
.b:hover{
background: url(img/sunjunpchuazhoutu.jpg) no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="a">
div是一个盒子,是一个块状元素,默认占一整行,默认没有高度
</div>
<div class="b">
</div>
</body>
</html>
扩展
内/外边距
1.内边距:padding
作用:设置 边框 与 内容区域 之间的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内边距</title>
<style>
.d1{
height: 400px;
width: 500px;
border: 1px solid pink;
/* 内边距,填充 */
padding: 10px;
box-sizing: border-box;
}
img{
width: 100%;
}
</style>
</head>
<body>
<div class="d1">
<img src="img/2.jpg" alt="">
</div>
</body>
</html>
2.外边距:margin
作用:只给盒子的某个方向单独设置外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外边距</title>
<style>
.d1,.d2,.d3{
height: 200px;
width: 200px;
background-color: yellowgreen;
margin: 10px;
}
.d2{
/* 左边距220px */
margin-left: 220px;
margin-top: -210px;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4">
<a href="#">立刻就会</a>
<a href="#">在这次</a>
<a href="#">去微软</a>
<a href="#">阿斯蒂芬</a>
</div>
</body>
</html>
自动内减
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
height: 300px;
width: 300px;
background-color: aqua;
}
.d2{
padding: 20px;
border: 3px solid red;
box-sizing: border-box;
}
.d3{
padding: 20px;
border: 10px solid red;
/* 自动内减 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>
边框
边框(border)- 单个属性
作用:给设置边框粗细、边框样式、边框颜色效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框</title>
<style>
div{
height: 300px;
width: 500px;
}
.a1{
/* 边框的粗细 */
border-width: 5px 10px 15px 20px;
/* 边框颜色 */
border-color: blue yellow green yellowgreen;
/* 边框样式 */
border-style: solid dashed double dotted;
}
.a2{
border: 2px solid aqua;
/* 上边框 */
/* border-top-width: 10px; */
/* 上 top 下 bottom 左 left 右 right */
}
.a3{
/* 简写 */
border: 5px solid pink;
}
</style>
</head>
<body>
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</body>
</html>
圆角边框
属性名:border-radius
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆角边框</title>
<style>
.d1{
width: 300px;
height: 300px;
background-color: aqua;
border-radius: 30px;
/* 四个值 */
border-radius: 10px 20px 30px 40px;
}
.d2{
width: 300px;
height: 300px;
border-radius: 150px;
background-color: pink;
}
.d3{
width: 150px;
height: 300px;
border-radius: 0 150px 150px 0;
background-color: pink;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>
浮动
浮动
作用:用于网页布局,让垂直布局的盒子变成水平布局,如:一个在左,一个在右
属性名:float
属性值:left(左浮动)/right(右浮动)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动</title>
<style>
div{
height: 300px;
width: 300px;
}
.a{
float: left;
background-color: aqua;
}
.b{
float: left;
background-color: aquamarine;
}
.c{
float: left;
background-color: bisque;
}
.d{
float: left;
background-color: blueviolet;
}
/* 浮动 */
.e{
height: 300px;
width: 100%;
background-color: yellowgreen;
/* both:清除两边
left:左 right 右
none:不清除
*/
clear: left;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
</body>
</html>
清除浮动
清除浮动的介绍
含义:清除浮动带来的影响
影响:如果子元素浮动了,此时子元素不能撑开标准流的块级父元素
原因:
子元素浮动后脱标 → 不占位置
目的:
需要父元素有高度,从而不影响其他网页元素的布局
方法
1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除浮动</title>
<style>
.a{
border: 1px solid red;
height: 400px;
}
.b{
height: 300px;
width: 300px;
margin: 5px;
background-color: yellowgreen;
float: left;
}
.c{
height: 300px;
background-color: pink;
}
.cl::before,
.cl::after{
/* content:文字、图片 */
content: "";
display: table;
}
.cl::after{
clear: both;
}
</style>
</head>
<body>
<div class="a cl">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
</div>
<div class="c"></div>
</body>
</html>
2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除浮动</title>
<style>
.a{
border: 1px solid red;
height: 400px;
}
.b{
height: 300px;
width: 300px;
margin: 5px;
background-color: yellowgreen;
float: left;
}
.c{
height: 300px;
background-color: pink;
}
.cl::after{
/* content:文字、图片 */
content: "";
display: block;
clear: both;
/* 补充写法 */
height: 0;
/* 隐藏元素 */
visibility: hidden;
}
</style>
</head>
<body>
<div class="a cl">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
</div>
<div class="c"></div>
</body>
</html>
3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除浮动:额外标签法</title>
<style>
.a{
border: 1px solid red;
}
.b{
height: 300px;
width: 300px;
margin: 5px;
background-color: yellowgreen;
float: left;
}
.c{
height: 300px;
background-color: pink;
}
.d{
clear: both;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
额外标签法:
在父元素的最后添加一个块元素
设置样式:clear:both
</div>
<div class="b">
不建议使用:增加了页面复杂度
</div>
<div class="b"></div>
<div class="b"></div>
<div class="d"></div>
</div>
<div class="c"></div>
</body>
</html>
定位
作用:
1.可以让元素自由的摆放在网页的任意位置
2.一般用于 盒子之间的层叠情况
定位方式:
静态定位:static
相对定位:relative
绝对定位:absolute
固定定位:fixed
静态定位是默认值
1.相对定位
介绍:自恋型定位,相对于自己之前的位置进行移动
代码:position: relative
特点:
1.需要配合方位属性实现移动
2.相对于自己原来位置进行移动
3.在页面中占位置 → 没有脱标
应用场景:
1.配合绝对定位组CP(子绝父相)
2.用于小范围的移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位</title>
<style>
div{
height: 300px;
width: 300px;
}
.a{
background-color: aqua;
}
.b{
background-color: pink;
position: relative;
left: 150px;
bottom: 150px;
}
.c{
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b">
相对定位:相对于自身进行移动
1.没有脱标
2.会保留原来的位置
</div>
<div class="c"></div>
</body>
</html>
2.绝对定位
介绍:拼爹型定位,相对于非静态定位的父元素进行定位移动
代码:position: absolute
特点:
1.需要配合方位属性实现移动
2.默认相对于浏览器可视区域进行移动
3.在页面中不占位置 → 已经脱标
应用场景:
1.配合绝对定位组CP(子绝父相)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝地定位</title>
<style>
.a{
height: 500px;
width: 800px;
background-color: antiquewhite;
position: relative;
}
.b{
height: 200px;
width: 200px;
background-color: aqua;
position: absolute;
bottom: 0;
right: 0;
}
.c{
height: 200px;
width: 200px;
background-color: pink;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
绝对定位:
相对于非静态定位的父元素进行移动
1.不保留原来的位置
2.脱离了标准文档流
</div>
<div class="c"></div>
</div>
</body>
</html>
3.子绝父相
场景:让子元素相对于父元素进行自由移动
含义:
子元素:绝对定位
父元素:相对定位
子绝父相好处:
父元素是相对定位,则对网页布局影响最小
4.固定定位
介绍:死心眼型定位,相对于浏览器进行定位移动
代码:position:fixed
特点:
1.需要配合方位属性实现移动
2.相对于浏览器可视区域进行移动
3.在页面中不占位置 → 已经脱标
应用场景:
1.让盒子固定在屏幕中的某个位置
5.半透明遮罩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>透明遮罩</title>
<style>
.a{
height: 500px;
border: 1px solid red;
position: relative;
}
img{
height: 500px;
}
.b{
height: 100px;
width: 800px;
color: white;
background-color: rgba(0, 0, 0,0.5);
position: absolute;
top: 400px;
/* 透明度 */
/* opacity: 0.5; */
}
</style>
</head>
<body>
<div class="a">
<img src="img/2.jpg" alt="">
<div class="b">
半透明遮罩
</div>
</div>
</body>
</html>