CSS学习笔记
CSS
CSS是Cascading Style Sheets（层叠样式表）的简称，是负责美化页面的
- 核心作用：实现将内容与表现形式相分离
CSS基础语法
选择器 {
属性1: 值1;
属性2: 值2;
...
属性N: 值N;
}选择器就是用来选择需要美化的html标签。css中提供了多种选择器。
html中属性的格式是： 属性=”属性值”
css中属性的格式是： 属性: 值;
CSS引入
方式一：行内式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css引入_行内式</title> </head> <body> <!-- css行内式： 就是使用标签的style属性添加样式 优点：编写方便，针对要处理的内容，可以直观的看到结果。 缺点：复用性太差，样式只能作用在当前单个标签，多个标签不能共享该样式 --> <p style="color: red;">段落1</p> <p style="color: red;">段落2</p> </body> </html>方式二：嵌入式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css引入_嵌入式</title> <!-- 嵌入式通过在head标签中添加style标签，在style标签 内部编写css代码 type="text/css" text是大的类型 css是小的类型 -- MIME类型 MIME:多用途互联网邮件扩展类型 --> <style type="text/css"> /* 这是css的注释 */ /* 嵌入式：【可以写在head或body中，但是一般都写在head中】 作用：针对当前文档中所有符合标签名称的标签内容，按照设置的样式进行展示。 优点：同一个页面中的标签可以共享样式 缺点：同一个项目的不同页面不能共享样式 */ p{ color: red; } </style> </head> <body> <p>段落1</p> <p>段落2</p> </body> </html>方式三：外联式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css引入_外联式</title> <!-- 外联式:也就说css和html不在同一个页面，css从html中独立出去成为一个css文件 然后在html中引入css文件 外联式： 优点：css和html解耦了，所以css可以被多个html页面共享 缺点：可读性差，样式覆盖问题，使用样式采用的是就近原则 --> <!-- 通过link标签引入外部css文件 rel="stylesheet" rel属性表示关联的是样式表 href属性就是样式文件的路径 --> <link rel="stylesheet" type="text/css" href="css/base.css"/> </head> <body> <p>段落1</p> <p>段落2</p> </body> </html>
样式的优先级
多重样式：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。
样式优先级总结：谁离得近，谁优先级高！行内样式优先级最高！
CSS选择器
基础选择器
标签选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签选择器</title>
<style type="text/css">
/*
标签选择器的语法格式：
标签名{
属性:值;
}
*/
/*
以下选择器表示选中当前页面中的所有div标签
缺点：只能给符合标签名称的所有标签设置样式。
比如：想给符合标签的部分标签设置样式，标签选择器是做不到的
解决方案：采用类选择器
*/
div{
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div>
div01
</div>
<hr >
<div>
div02
</div>
</body>
</html>类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<!--
类选择器的语法格式：
.类名{
属性:值;
}
注意：类名是通过标签的class属性设置的.
相同的类名可以用在多个标签上
一个标签可以有多个类名
其值可重复使用，使用 . 开头
-->
<style type="text/css">
.c1{
width: 100px;
height: 100px;
background-color: skyblue;
}
.c2{
width: 200px;
height: 200px;
background-color: red;
}
.c{
/* color属性表示文字的颜色 */
color: white;
}
</style>
</head>
<body>
<!-- 一个标签可以有多个类名，类名之间使用空格分开 -->
<div class="c1 c">
div01
</div>
<hr >
<div class="c2 c">
div02
</div>
<hr >
<div class="c1 c">
div03
</div>
</body>
</html>id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style type="text/css">
/*
很少使用，因为css样式文件，是前端提供的，然后后台程序员，根据需求，经常会使用到id属性。前端要考虑这个问题，所以前端那边，尽量不要使用id选择器。
就近原则：使用的前提是采用同种手段，设置的样式
确定性原则，那个选择器的确定性更高，设置哪个选择启动样式。
什么时候使用就近原则：当设置样式的规则是一样的（要么全部使用类选择器，要么全部使用标签选择器）
什么时候使用确定性原则：当设置样式的规则不同的时候（比如，设置同一个标签的样式，采用了id选择器，标签选择器）
id选择器语法格式：
#id号{
属性:值;
}
注意：id号是通过标签的id属性设置的.
规范要求：每个标签的id号唯一。因为id主要是为了配合js代码。
*/
#p1{
color: red;
}
</style>
</head>
<body>
<p>段落1</p>
<p id="p1">段落2</p>
<p>段落3</p>
</body>
</html>通配符选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通配符选择器</title>
<!--
通配符选择器的语法格式：
*{
属性:值;
}
*表示选中body页面中的所有标签
-->
<style type="text/css">
*{
color: red;
}
</style>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<span>span</span>
<br>
<b>我爱你祖国</b>
</body>
</html>基础选择器的优先级
不同选择器的相同样式作用在同一个标签上才需要区分优先级。
范围越小优先级越高
!important > 行内式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基础选择器的优先级</title>
<style type="text/css">
p{
/*
!important 用来提升优先级
*/
color: red !important;
}
#p1{
color: blue;
}
.c1{
color: green;
}
</style>
</head>
<body>
<p id="p1" class="c1" style="color: yellow">段落1</p>
</body>
</html>复合选择器
复合选择器就是多个基础选择器组成的选择器
后代选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器</title>
<style type="text/css">
/*
后代选择器语法格式：
选择器1 选择器n{
属性:值;
}
后代：包含子子孙孙
查找 类选择器.c1 里面的所有span标签
*/
.c1 span{
color: red;
}
</style>
</head>
<body>
<div class="c1">
<p>
<span>
内容1
</span>
</p>
<span>
内容2
</span>
<br>
<b>粗体</b>
</div>
</body>
</html>子代选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子代选择器</title>
<style type="text/css">
/*
子代选择器语法格式：
选择器1>选择器n{
属性:值;
}
子代：亲儿子
*/
div>span{
color: blue;
}
</style>
</head>
<body>
<div class="c1">
<p>
<span>
内容1
</span>
</p>
<span>
内容2
</span>
<br>
<b>粗体</b>
</div>
</body>
</html>相邻兄弟选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相邻兄弟选择器</title>
<style type="text/css">
/*
和标签的类型无关
相邻兄弟选择器的语法格式：
选择器1+选择器n{
属性:值;
}
相邻兄弟选择器必须是紧挨着的，且只能向下查找
*/
div+p{
color: red;
}
</style>
</head>
<body>
<p>段落0</p>
<div>
</div>
<p>段落1</p>
<p>段落2</p>
<span>span</span>
</body>
</html>通用兄弟选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通用兄弟选择器</title>
<style type="text/css">
/*
通用兄弟选择器语法格式：
选择器1~选择器n{
属性:值;
}
通用兄弟选择器只要是指定的兄弟标签即可
div~* 表示div下的所有兄弟，不过很少这样使用
*/
div~p{
color: red;
}
</style>
</head>
<body>
<p>段落0</p>
<div>
</div>
<p>段落1</p>
<p>段落2</p>
<span>span</span>
</body>
</html>交集选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>交集选择器</title>
<style type="text/css">
/*
交集选择器语法格式：
选择器1选择器n{
属性:值;
}
注意：标签选择器只能位于最前面，类选择器不能在最前面
*/
/*
p.c1表示选择p标签且类名是c1的
*/
p.c1{
color: red;
}
</style>
</head>
<body>
<p class="c1">段落1</p>
<p>段落2</p>
<p>段落3</p>
<span class="c1">span</span>
</body>
</html>并集选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>并集选择器</title>
<style type="text/css">
/*
并集选择器语法格式：
选择器1,选择器n{
属性:值;
}
*/
.c1,b,i,span{
color: red;
}
</style>
</head>
<body>
<p class="c1">段落1</p>
<b>段落2</b>
<i>段落3</i>
<span>span</span>
</body>
</html>复合选择器的优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复合选择器的优先级</title>
<style type="text/css">
/*
复合选择器的优先级需要根据基础选择器的优先级来判断
id选择器 > 类选择器 > 标签选择器
100 10 1 ---- 虚拟的优先级权重
复合选择器的虚拟的优先级权重累加，结果最大的优先级最高；
如果累加的结果一样，就按照就近原则
*/
div p span{
color: red;
}
#d1>.c2>span{
color: blue;
}
#d1>#p1>#s1{
color: green;
}
.c1>#p1>.c3{
color: deeppink;
}
#d1>.c2>.c3{
color: yellow;
}
</style>
</head>
<body>
<div id="d1" class="c1">
<p id="p1" class="c2">
<span id="s1" class="c3">
内容1
</span>
</p>
</div>
</body>
</html>属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
/*
属性选择器的语法格式：
格式一：
[属性名]{
属性：值；
}
[属性名] 查找所有元素中带有指定属性的元素
[type]{
border: 2px solid blue;
}
格式二：
[属性名="值"]{
属性：值；
}
[属性名="值"] 查找所有元素中带有指定属性和值的元素
eg：[name="xxx"]{属性：值;}
格式三：
标签[属性]{
属性：值；
}
*/
[type="text"]{
border: 2px solid blue;
}
</style>
</head>
<body>
<form action="#" method="get">
账号：
<input type="text" name="username"/>
<br>
<br>
密码：
<input type="password" name="username"/>
</form>
</body>
</html>伪类选择器
伪类通过冒号来定义，它定义了元素的状态，伪类不是我们自己定义的类，而是css值已经定义好的类.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style type="text/css">
/*
:link 表示默认的状态
*/
a:link{
color: red;
}
/*
:visited 表示被访问后的状态
*/
a:visited{
color: green;
}
/*
:hover 表示鼠标停留在上面的状态
*/
a:hover{
color: blue;
}
/*
:active 表示鼠标点击按下的状态
*/
a:active{
color: black;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>背景属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景属性</title>
<style type="text/css">
body{
background-color: skyblue;
/* 背景图片会覆盖背景色 */
background-image: url(image/bg.png);
/*
是否重复
repeat 表示重复，就是平铺 -- 默认
no-repeat 表示不重复，就是不平铺
repeat-y y轴平铺
repeat-x x轴平铺
background-position 属性设置背景图像的起始位置。
*/
background-repeat: repeat;
}
</style>
</head>
<body>
</body>
</html>文字属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体属性</title>
<style type="text/css">
/*
所有的颜色都是由三原色组成
三原色： 红-red,绿-green，蓝-blue
css的中颜色可以使用英文、十进制、十六进制表示
英文： red green skyblue pink
十六进制：
- 三位表示法：#000-#fff
000 黑色 fff 白色
f00 红色 0f0 绿色 00f 蓝色
- 六位表示法: #000000-#ffffff
ff0000 红色
ffff00 黄色
十进制：
0-255
RGB(255,0,0)
RGBA(255,0,0,)
A：alpha通道 表示透明度 0-1
0表示透明，内容看不到 1表示不透明，内容看得到
*/
span{
/*
文字的颜色
*/
color: red;
/*
文字的大小
*/
font-size: 20px;
/*
文字的样式
normal: 正常
italic: 斜体
*/
font-style: italic;
/*
文字的权重：加粗
*/
font-weight: bold;
/*
文字的字体
如果属性值中有特殊符号，属性值需要使用""引起来
*/
font-family: 华文彩云;
}
p{
color: blue;
/*
font的简写注意点：
font简写必须包含font-size和font-family，必须是font-size font-family的顺序且必须在最后,font-style和font-weight在前面，两者之间没有顺序要求
*/
font:bold italic 20px 华文彩云 ;
}
</style>
</head>
<body>
<span>好好学习，天天向上</span>
<br>
<p>好好学习</p>
</body>
</html>文本属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本属性</title>
<style type="text/css">
div {
width: 300px;
height: 300px;
background-color: skyblue;
/*
文本装饰:
none 什么装饰都没有，如果是a标签就会取消默认的下划线
underline 下划线
line-through 删除线
overline 顶格线
*/
text-decoration: underline;
/*
文本水平对齐方式
*/
text-align: center;
/*
行高: 从文字的中央基线向上和向下延伸的距离
将行高设置成父容器的高度就可以做到【单行文本】的垂直居中
*/
line-height: 300px;
/*
设置字与字之间,字母和字母之间的间距。【不是英文单词】
*/
letter-spacing: 10px;
}
p{
/*
文本缩进
2em 表示2个文字的大小
*/
text-indent: 2em;
/*
opacity用来设置透明度，默认值为1，1为不透明，0为完全透明。
隐藏一个元素 ，完全不显示，但是会占空间，只是看不到。
*/
opacity: 0;
}
</style>
</head>
<body>
<div>
<span>
好好学习,good
</span>
</div>
<p>浙江品诺机械有限公司车间里热火朝天，电机声隆隆，每台设备上装着传感器，通过5G技术联上“轴承产业大脑”，设备状况、产品产量及质量等数据在LED显示屏上一目了然。经过数字化改造后，该车间产出效率提升8%，自动采集的数据上传汇总还能让管理事半功倍。</p>
</body>
</html>扩展
实现溢出文本ellipsis的解决，让溢出的文字以省略号显示。
- 只能用于可以设置行宽高的标签中，span不行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现溢出文本eclipsis的解决</title>
<style type="text/css">
div{
width: 5em;
background-color: skyblue;
/*设置文本不能换行*/
white-space:nowrap;
/*设置文本超出文本框时隐藏文本*/
overflow:hidden;
/*用省略符号来代表被修剪的文本*/
text-overflow:ellipsis;
}
</style>
</head>
<body>
<div>
好好学习，天天向上
</div>
</body>
</html>边框线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框线</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: red;
/* border 后面的参数没有顺序规定*/
border: 3px solid blue;
/* 半径是宽高的一半，就是圆 */
border-radius: 50px;
/*
下边框
border-bottom-width: 3px;
border-bottom-color: #0000FF;
solid 实线
dashed 虚线
dotted 点组成的线
border-bottom-style: solid;
--合并边框线--
border-collapse:collapse;
*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>列表属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表属性</title>
<style type="text/css">
ul{
/* 设置列表编号类型 */
/* list-style-type: circle; */
/*
取消列表的编号
*/
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</body>
</html>元素的分类
html元素分为行内元素、块级元素、行内块元素
行内元素
- 不能设置宽高，宽高是包裹内容的
- 一行可以显示多个行内元素
- 常见的行内元素：span、a，em，strong, i, u, del
块级元素
- 可以设置宽高。宽度默认独占一行，高度默认包裹内容【没有设置高度的时候，没有文本则无法显示效果】
- 一行只能显示一个元素
- 常见的块级元素：div, body,p，h1~h6，ul，ol，li，pre
行内块元素
- 可以设置宽高
- 一行可以显示多个行内块元素
- 常见的行内块元素： img、input
元素类型的转换
使用display 属性
- display:block; 块级元素
- display:inline; 行内元素
- display:inline-block; 行内块元素
注意：一行中的多个行内块元素之间有间隙
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素的分类</title>
<style type="text/css">
#s1{
width: 100px;
height: 100px;
background-color: red;
/* 转成块级元素 */
display: block;
}
#s2{
background-color: skyblue;
}
.c1{
width: 300px;
height: 300px;
background-color: pink;
/* 转换成行内元素 */
/* display: inline; */
/*
转换成行内块元素，
一行可以显示多个，元素之间默认有间距
*/
display: inline-block;
}
.c2{
width: 300px;
height: 300px;
background-color: peru;
display: inline-block;
}
</style>
</head>
<body>
<span id="s1">内容1</span>
<span id="s2">内容1</span>
<br>
<div class="c1">
div1
</div>
<div class="c2">
div1
</div>
</body>
</html>盒子模型
盒子模型不是html中的一个元素，也不是css的一个样式，而是对css中一组属性的形象化描述。
宽高、边框线、内边距、外边距就是盒子模型的形象化描述
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
.c1{
/*
盒子内容的宽高
*/
width: 96px;
height: 96px;
background-color: salmon;
/*
border会撑大盒子的大小
*/
border: 1px solid blue;
/*
padding表示盒子的内边距，盒子内容和盒子边框的距离
padding: 1px 2px 3px 4px 上右下左的内边距
padding: 1px 2px 3px; 上右下，左和右的值一样
padding: 1px 2px; 上右，下和上一样，左和右的值一样
padding: 1px; 上右下左都一样
*/
/*
padding会撑大盒子的大小
*/
padding: 1px;
/*
margin盒子的外边距，盒子和盒子外其他内容之间的距离
margin: 1px 2px 3px 4px ； 上右下左
margin: 1px 2px 3px : 左右一样都是2px
margin：1px 2px 上下一样，左右一样
margin: 1px; 上右下左都一样
*/
/*
margin 不会撑大盒子的大小
*/
margin: 1px;
}
.c2{
width: 100px;
height: 100px;
background-color: red;
border: 2px solid blue;
padding: 2px;
/* css3的属性
使用box-sizing: border-box;这个后
宽高就是盒子的宽高，内容的宽高自动减少了【就不用自己手动减少内容的宽高了】
*/
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="c1">
div1
</div>
<div class="c2">
div1
</div>
</body>
</html>盒子水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子水平居中</title>
<style type="text/css">
/*
清除页面默认的外边距和内边距
0可以不带px单位
*/
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: red;
/* 盒子水平居中 */
margin: 0 auto;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>css页面的布局
css中页面的布局分为：标准流、浮动流、定位流
标准流
页面默认就是标准流，也就是从上到下，从左到右的显示布局
浮动流
浮动流是一种脱离标准流的水平布局方式
浮动流是水平布局方式，所以只有左浮动和右浮动。
–> float:left;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
/*
css中页面的布局方式分为：
1.标准流 默认就是，特点就是从上到下，从左到右加载
2.浮动流： 是一种脱离标准流（脱标）的水平布局方式
浮动流是水平布局方式，所以只有左浮动和右浮动
3.定位流
*/
*{
/* 0px时，可以不写单位 */
margin: 0;
padding: 0;
}
#d1{
width: 100px;
height: 100px;
background-color: skyblue;
float: left;
}
#d2{
width: 150px;
height: 150px;
background-color: hotpink;
float: left;
}
#d3{
width: 200px;
height: 200px;
background-color: blueviolet;
float: right;
}
</style>
</head>
<body>
<div id="d1">
div1
</div>
<div id="d2">
div2
</div>
<div id="d3">
div3
</div>
</body>
</html>
eg:导航条
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>导航条</title> <style type="text/css"> *{ margin: 0; padding: 0; } .nav{ height: 60px; background-color: skyblue; margin-top: 50px; text-align: center; } ul{ list-style: none; display: inline-block; } ul li{ float: left; } ul>li>a{ text-decoration: none; color: white; font-size: 22px; line-height: 60px; /*margin-right: 30px;*/ /*利用内边距*/ padding:30px } </style> </head> <body> <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> </body> </html>
定位流
相对定位：relative
- 是否脱标：不会脱离标准流
- 是否区分元素类型：区分类型的，使用相对定位不会改变元素的类型。
- 参照位置：元素原来自身的位置
相对定位的作用：
- 做页面的微调；
- 配合绝对定位使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相对定位</title>
<style type="text/css">
*{
/* 0px时，可以不写单位 */
margin: 0;
padding: 0;
}
#d1{
width: 100px;
height: 100px;
background-color: skyblue;
/* 相对定位 */
position: relative;
right: 20px;
bottom: 20px;
}
#d2{
width: 150px;
height: 150px;
background-color: hotpink;
}
#d3{
width: 200px;
height: 200px;
background-color: blueviolet;
}
span{
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
</style>
</head>
<body>
<div id="d1">
div1
</div>
<div id="d2">
div2
</div>
<div id="d3">
div3
</div>
<span>
span
</span>
</body>
</html>
做页面的微调eg：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>做页面的微调</title> <style type="text/css"> textarea{ width: 300px; height: 200px; resize: none; } i{ font-style: normal; position: relative; bottom: 192px; } </style> </head> <body> <form action="#" method="get"> 账号： <input type="text" name="username"/> <br> <br> 密码： <input type="password" name="pwd"/> <br> <br> <i>简介：</i> <textarea> </textarea> </form> </body> </html>
绝对定位：absolute
- 是否脱标？会
- 是否区分元素类型？使用了绝对定位的元素都当做行内块使用
- 参照位置？
- 默认情况下，参照位置就是body页面
- 如果使用绝对定位的元素的祖先元素使用了定位（static定位除外），那么参照位置就是这个祖先元素。【祖先包括父级】
position:static; 跟没写是一样的，就是标准流。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位</title>
<style type="text/css">
/*
position: static; 跟没写是一样的就是标准流。
定位是可以设置上下左右的位置的。
*{
/* 0px时，可以不写单位 */
margin: 0;
padding: 0;
}
#d1{
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
right: 30px;
bottom: 30px;
}
#d2{
width: 150px;
height: 150px;
background-color: hotpink;
}
#d3{
width: 200px;
height: 200px;
background-color: blueviolet;
}
span{
width: 200px;
height: 200px;
background-color: red;
}
.fu{
width: 500px;
height: 500px;
background-color: olive;
position: relative;
}
.xx{
width: 400px;
height: 400px;
background-color: #FF0000;
position: relative;
}
</style>
</head>
<body>
<div class="fu">
<div class="xx">
<div id="d1">
div1
</div>
</div>
</div>
<div id="d2">
div2
</div>
<div id="d3">
div3
</div>
<span>
span
</span>
</body>
</html>
子绝父相
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子绝父相</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.nav{
height: 40px;
margin-top: 50px;
background-color: #2dbb55;
text-align: center;
}
ul{
list-style: none;
display: inline-block;
}
ul>li{
float: left;
position: relative;
}
ul>li>a{
text-decoration: none;
color: white;
font-size: 16px;
line-height: 40px;
padding: 0 13px;
}
img{
width: 28px;
position: absolute;
left: 31px;
bottom: 31px;
}
</style>
</head>
<body>
<!-- 将页面中的导航单独分成一个区 -->
<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>
<img src="image/lvpai.png" >
</li>
<li><a href="">定制游</a></li>
</ul>
</div>
</body>
</html>
固定定位：fixed
是否脱标？会
是否区分元素类型？使用了固定定位的元素都当作行内块使用
- 可以使用span来进行测试，因为span是行级元素本身的宽高是没有效果的，如果设置为fixed定位后span变成了行内块元素，span的宽高有效果了，就证明会区分元素类型。
参照位置？就是body页面，且不会随着页面的滚动而滚动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>固定定位</title> <style type="text/css"> /* 固定定位： fixed 1. 是否脱标？ 会 2. 是否区分元素类型？ 使用了固定定位的元素都当做行内块使用。 3. 参照位置？ 就是body页面，且不会随着页面的滚动而滚动 */ *{ /* 0px时，可以不写单位 */ margin: 0; padding: 0; } #d1{ width: 100px; height: 100px; background-color: skyblue; position: fixed; right: 20px; bottom: 20px; } #d2{ width: 150px; height: 150px; background-color: hotpink; } #d3{ width: 200px; height: 2200px; background-color: blueviolet; } span{ width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div id="d1"> div1 </div> <div id="d2"> div2 </div> <div id="d3"> div3 </div> <span> span </span> </body> </html>
Z-index属性
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
z-index取值为整数类型，可以是负值，z-index仅能在定位元素上奏效，如：position:absolute。
relative不行，因为它不能脱标。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>z-index属性</title> <style type="text/css"> /* z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 z-index取值为整数类型，可以是负值，z-index 仅能在定位元素上奏效，如position:absolute。 */ *{ margin: 0; padding: 0; } #d1{ width: 100px; height: 100px; background-color: skyblue; position: absolute; /* 值越大，越在上面 */ z-index: 3; } #d2{ width: 150px; height: 150px; background-color: hotpink; position: absolute; z-index: 2; } #d3{ width: 200px; height: 200px; background-color: blueviolet; position: absolute; z-index: 1; } </style> </head> <body> <div id="d1"> div1 </div> <div id="d2"> div2 </div> <div id="d3"> div3 </div> </body> </html>
