文章目录
CSS笔记
一.CSS概述
1.CSS是Cascading Style Sheets（级联样式表）。
2.CSS是一种样式表语言，用于为HTML文档控制外观，定义布局**（html是网页的基本内容，css是控制修饰网页外观）**。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面 。
3.可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分
优点：
1.分离内容和表现形式
2.重复出现的代码可以提取调用
二.基本语法
1.行内样式表
行内样式表,又有人称内联样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：
<标签名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容
注：每个标签中都有style属性，在此属性中写CSS语法，修饰标签 直接在标签属性行内，优先级最高
2.内嵌样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
注：内嵌样式表与外联样式表语法一样
3.外联样式表
外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中.
注：内嵌样式表与外联样式表语法一样
4.各种样式表优缺点
5.应用代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <style type="text/css"> /* 内嵌样式表 */
p{color: aqua;font-size: 20;}
</style> -->
<link rel="stylesheet" type="text/css" href="css/css1.css"/> <!-- 关联外部样式表 与内嵌样式表语法一样 -->
</head>
<body>
<!-- <p>
<b>
<font size="15" color="aqua">静夜思</font> 普通修饰写的非常麻烦
</b>
</p> -->
<p style="color: aqua;font-size: 20;">静夜思</p> <!-- 行级样式表 直接写在标签内 优先级最高 语法都是键值对 -->
<p>静夜思</p>
<p>静夜思</p>
<p>静夜思</p>
<!-- 总结：
行内样式表：较少使用 优先级高
内嵌样式表：开发测试期间使用
外部样式表：开发最终使用
-->
</body>
</html>
三.选择器（常用）
解释：用来将样式表与指定标签进行选择关联的
1.标签选择器
通过标签选择器可以选择页面中的所有指定标签
语法：标签名 {} （一个选择器对应一类标签 一对多）
2.id选择器
id 选择器：通过标签的id属性值选中唯一的一个标签
语法： #id属性值 {} （一个选择器对应一个有id的唯一标签 id不能重复 一对一）
3.类选择器
类选择器：通过标签的class属性值选中一组标签
语法：.class属性值{} （与id选择器不同类选择器可以一对多 id不能重复但类可以重复 一对多）
4.通配选择器
通配选择器:可以用来选中页面中的所有的标签
语法：*{} （选中网页中的所有标签）
5.选择器组合
选择器组合：通过选择器分组可以同时选中多个选择器对应的标签
语法：选择器1,选择器2,选择器N{}
示例：
#p1,.p2,.p3,p{color: chartreuse;} /* 选择器组合 */
6.选择器优先级
（行内样式表）>id选择器>类选择器>标签选择器>通配选择器
7.具体代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{color: aqua;} /* 标签选择器 使用标签名称作为选择依据 */
#p1{color: red;} /* id选择器 id不能重复 */
.p2{color: brown;}
.p3{color: blue;} /* 类选择器 类可以重复 */
*{color: darkgreen;} /* 通配选择器 选中网页中所有标签 优先级最低*/
/* 选择器优先级 (行内样式表)>id选择器>类选择器>标签选择器>通配选择器 */
#p1,.p2,.p3,p{color: chartreuse;} /* 选择器组合 */
</style>
</head>
<body>
<p id="p1">静夜思</p>
<p class="p2">床前明月光，</p>
<p class="p3">疑是地上霜。</p>
<p class="p2">举头望明月，</p>
<p class="p3">低头思故乡。</p>
</body>
</html>
四.基本属性
注：CSS中的属性基本都是以键值对的形式存在的 建议一行只写一个属性
1.文本
● color：字体颜色
● font-size：字体大小
● font-family：字体
● text-align：文本对齐
● text-decoration:line-through：定义穿过文本下的一条线
● text-decoration:underline：定义文本下的一条线
● text-decoration:none：定义标准的文本
● font-style: italic;斜体文本
● font-weight:字体粗细
● line-height:设置行高
● letter-spacing可以指定字符间距
● text-indent用来设置首行缩进
代码示例及注释：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#p1{
/* 注:最好一行只放一个属性 键值对 */
color: #A52A2A; /* 颜色 */
font-size: 30px; /* 字体大小 */
font-weight: 900; /* 字体加粗 */
/* text-decoration: line-through; /* 文本修饰删除线 */
text-decoration: underline; /* 文本修饰下划线 */
text-align: center; /* 文本对齐方式 居中*/
font-family: 隶书; /* 设置字体 */
font-style: italic; /* 设置字体风格 斜体*/
line-height: 50px; /* 设置行高 行高指的是整行的高度字体大小并不发生改变而且在 整行上下垂直居中 比如在这个案例中字体大小为30px而行高为50px则在整行中字体居中上下各空余10px */
letter-spacing: 20px; /* 字符与字符之间的间距 */
text-indent: 40px; /* 首行缩进两个字符 如在此案例中字体大小为30px则此属性应该为60px如果不是60px则会导致缩进不为两个字符为了避免此种麻烦我们用一个 em 单位 如以下*/
text-indent: 2em; /* 一个em代表一个字符的大小 */
}
a{ /* 将超链接的下划线去除 */
text-decoration: none;
}
</style>
</head>
<body>
<p id="p1">外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中.外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中.外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中.外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中.外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中.</p>
<p id="p2">外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中.外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中.外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中.外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中.外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中.</p>
<p id="p3">外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中.外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中.外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中.外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中.外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中.</p>
<a href="">百度</a>
<a href="">百度</a>
<a href="">百度</a>
<a href="">百度</a>
</body>
</html>
2.背景
● background-color背景颜色
● background-image背景图片 注：背景图片优先级高于背景颜色
● background-repeat背景重复 （当背景图片的大小不足以铺满整个标签时控制背景图片的重复） 注：背景图片默认铺满整个标签大小
● background-size背景图片的尺寸大小 （ （）（）可以有两个参数分别是长和宽，也可以只有一个参数正方形的边长）
● background- position 背景位置
注：backgroud-position是控制背景图片的位置 text-align是控制文本的位置的
代码示例及注释：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p{
height: 800px; /* 标签长度 */
width: 1000px; /* 标签宽度 */
background-color: aquamarine; /* 背景颜色 */
background-image: url(img/bg.jpg); /* 背景图片 背景图片优先级高于背景颜色，背景图片默认重复铺满整个标签大小*/
background-repeat: no-repeat; /* 当背景图片的大小不足以铺满整个标签时控制背景图片的重复 */
background-size: 500px; /*控制背景图片的大小默认在左上方 此项属性有可以有一个也可以有两个参数当有一个参数时
时正方形有两个参数时可能是正方形也可能是长方形 */
background-position: center; /* 背景图片的位置 text-align:center;这个是控制文本位置的 */
}
</style>
</head>
<body>
<p></p>
</body>
</html>
3.列表
列表分为：有序列表和无序列表 ul-li（无序） ol-li（有序）
列表中的属性：
● list-style-image 将图象设置为列表项标志。 (替换列表项的标志标 需要路径)
如：list-style-image: url(img/img.jpg);
● list-style-position 设置列表中列表项标志的位置。 （outside和inside比较重要 outside是列表项的标志在列表内容的外边 inside是列表项标志在列表内容的里面）
如：list-style-position: outside;
● list-style-type 设置列表项标志的类型。
● list-style 简写属性。
如：list-style: none url(img/img.jpg) inside;
代码示例及注释
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li{
list-style-type: none; /* 列表项风格 */
list-style-image: url(img/img.jpg); /* 列表头部标签换为图片 */
list-style-position: outside; /* outside列表头部标签在列表内容外边 inside列表头部标签在列表内容里边 */
list-style: none url(img/img.jpg) inside; /* CSS简写方式(不分先后顺序) */
}
</style>
</head>
<body>
<ul> <!-- 无序列表 -->
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
</body>
</html>
4.伪类
CSS伪类专门用来表示标签的一种的特殊的状态。鼠标的移入，点击，移出，当我们需要为处在这些特殊状态的标签设置样式时，就可以使用伪类（伪元素）
伪类的语法：
:hover伪类表示鼠标移入的状态 （无论是哪个标签都可以用 ：hover只要是个选择器就行了）
:active表示的是被点击的状态
:focus向拥有键盘输入焦点的标签添加样式。 （输入型组件，当获得鼠标焦点时自动切换到此样式表） 注：只针对文本框（因为只有文本框才能获得鼠标焦点）
代码实例及注释：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{
color: aqua; /* 为原来的标签设置属性(颜色) */
}
a:hover{
color: red; /* 鼠标移入 */
}
a:active{
color: blueviolet; /* 鼠标点击 */
}
.txt:focus{ /* focus是鼠标焦点针对文本框 */
color: brown; /* 文本颜色 */
background-color: #FF0000; /* 文本框背景颜色*/
}
</style>
</head>
<body>
<!-- 注：伪类在style部分中使用时冒号前面只要是选择器就行 如： a:hover{} 冒号前面的a是选择器 -->
<!-- 标签有不同的状态，鼠标移动，点击，移出，有时血药为不同的状态的标签添加样式，可使用伪类（伪元素） -->
<!-- 一共有三种伪类 hover active focus -->
<a href="">百度</a>
<a href="">百度</a>
<a href="">百度</a>
<a href="">百度</a>
<a href="">百度</a>
<input type="text" class="txt" />
</body>
</html>
5.透明
定义透明效果的属性是 opacity。
opacity 属性设置标签的不透明级别 值为1。 规定不透明度：从 0.0 （完全透明）到 1.0（完全不透明）。透明时标签位置在页面中是存在的
五.标签分类和display属性
1.块级标签
块级标签：无论内容多少 都会独自占据一行的，可以设置宽和高。
例如p、h1、ul、ol、hr等。
如：p标签：默认宽与父级标签一致，默认高：0或者有内容是内容的高度
2.行级标签
行级标签：只占自身大小的标签，不会占一行，即使设置宽高无效。
例如font、b、i、a等。
a标签 若在不同超链接上用回车进行换行则相当于在中间加空格
3.行级块标签
行级块标签：不占一行但是可以设置宽高
注意：一般使用块级标签包含行级标签
特殊：
a标签可以包含任何标签
p标签不可以包含任何块级标签
4.display属性
可以修改标签的类型
display：none 隐藏标签（标签将在页面中完全消失）
：inline 设置标签为行级标签
：block 设置标签为块级标签
：inlineblock 设置标签为行级快标签
代码及注释
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
块级标签 ：都会独自占一行
如： p h1 ul ol hr
可以设置宽高
p标签：默认宽与父级标签一致 默认高0或者是有内容是内容的高度。 可以设置宽高
行级标签：只占本身的大小，不占一行
如：font b i a
行级块标签：不占一行可以设置宽高
如：img input
注意：一般使用块级标签包含行级标签
特殊：a标签可以包含任何标签
p标签不可以包含任何块标签
display属性：
可以修改标签的类型
display：none； 就是将标签设置没有了不是透明
：inline； 修改为行级标签
:block; 修改为块级标签
：inlineblock； 修改为行级快标签
-->
<body>
<p></p>
<a href="">
<p>aaa</p>
</a>
<p>
<h1></h1>
</p>
</body>
</html>
六.div和span标签
1.div
div：块级标签 （h1，p也是块级标签）有默认的样式或有其他缺陷 div可以包含任何标签，没有任何默认样式，主要用于网页布局
2.span
span：行级标签 没有任何附加样式 内容多大，占多大 是用来选中网页上的文本并给文本添加CSS样式
如：
（用span将文字包起来给文字添加样式）
代码及注释
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
div标签：
块级标签 （h1，p也是块级标签有默认的样式或其他缺陷）
可以包含任何标签 没有任何默认样式 主要用于网页布局
span标签：
行级标签 内容多大占多大
是用来选中网页上的文本 给文本添加CSS样式
例如：用span将文字包起来给文字添加样式
无可代替的标签：表格 表单 超链接 图片 div span
-->
<body>
</body>
</html>
无可代替的标签：【重要】
表格 表单 超链接 图片 div span
七.盒子模型
● CSS处理网页时，它认为每个标签都包含在一 个不可见的盒子里。
● 如果把所有的标签都想象成盒子，那么我们对网页的布局就相 当于是摆
放盒子。
● 我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。
一个盒子我们会分为几个部分：
内容区（content）：放内容的区域
内边距（padding）：内容区到边框的距离
边框（boder）：墙
外边距（margin）：一个标签与另一个标签的距离 (外边距可以重合所以来两个标签相接着的标签只用设置一个或者两个都设置也可以)
标签的大小=内容区大小+内边距大小+边框大小
width和height只是设置内容区大小不是设置整个盒子的大小 如果标签没有设置内边距大小和边框大小那么盒子的大小就等于内容区大小
width和weight属性只适用于块级标签（包含行级块标签）
1.内容区（content）
● 内容区指的是盒子中放置内容的区域，也就是标签 中的文本内容，子标
签都是存在于内容区中的。
● 如果没有为标签设置内边距和边框，则内容区大小 默认和盒子大小是一 致的。
● 通过width和height两个属性可以设置内容区的大小而不是整个盒子的大 小。
● width和height属性只适用于块标签(包含行级块)
2.内边距（padding）
● 顾名思义，内边距指的就是标签内容区与边框以内的空间。
● 内边距会影响整个盒子的大小。
使用padding属性来设置标签的内边距。
例如：
padding-left:10px;
padding-right:10px;
padding:10px 20px 30px 40px
这样会设置标签的上、右、下、左四个方向的内边距。
代码示例及注释：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
盒子模型
CSS处理网页是它认为每个标签都包含在一个不可见得盒子里
一个盒子我们分为几个部分
内容区（content） 放内容的区域
内边距（padding） 内容区到边框的距离
边框（boder） 墙
外边距（margin） 一个标签与另一个标签的距离
标签的大小=内容区大小+内边距大小+边框大小
width和height只是设置内容区的大小，而不是整个标签的大小
如果标签没有设置内边距大小和边框大小，那么盒子大小等于内容区大小
padding：-top
-left
-right
-bottom
padding：10px 5px；
上下内边距 左右内边距
padding：10px 5px 15px 20px；
上边距 右边距 下边距 左边距 (顺时针)
-->
</head>
<body>
</body>
</html>
3.边框(border)
-
可以在标签周围创建边框，边框是标签可见框的最外部。
-
可以使用border属性来设置盒子的边框 在修饰时要定义三个属性： boder-color boder-width boder-style
如：
border-color: red; border-width: 2px; border-style: solid;
也可以简写：
border: red 2px solid; //这是css的简写方式属性不分先后顺序
-
也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框
如：
注：这四个边框也都有boder最基本的三个属性
-
边框可以设置样式：
dotted （点线） dashed （虚线） solid （实线） double （双线） groove （槽线）
border-radius设置四个角为圆角边框
border-top-left-radius设置左上为圆角边框
- outline:none; 去掉文本框聚焦默认样式
4.外边距（margin）
margin: 10px; /* 上下左右都设置外边距为10px */
margin: 10px 5px; /* 上下外边距设为10px左右外边距设置为5px */
-
一个标签距离另一个标签的距离，不会影响标签的大小会影响标签的位置
-
外边距不会影响盒子的整体大小，但是会影响盒子的位置，会影响盒子 的实际控制范围。
-
外边距是标签边框与周围标签相距的空间。 使用margin属性可以设置 外边距。用法和padding类似，同样也提供了四个方向的
margin-top/right/bottom/left。
margin-top: 1px; margin-left: 1px; margin-right: 1px; //活用这四个属性去布局调样式 margin-bottom: 1px; margin的值可以为负值。
margin的值还可以auto，设置外边距为最大值，当将左右外边距设置为 auto时，浏览器会将左右外边距 设置为相等（上下不能给auto值是因为上下没有长度限制没法自动将外边距设为最大值）.
垂直设置为auto时值为0，所以水平居中也可以简写为margin:0 auto。（标签水平居中常用）
5.清除浏览器的默认样式
- 浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的标签都设置了一些默认的margin和padding，而它的这些默 认样式，正常情况下我们是不需要使用的，需要使用时我们会根据需要重新设置。 所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统 的去掉
一般在style标签开头写：
*{ margin: 0;
padding: 0;
}
为什么要这样写？
因为*{}通配选择器的优先级最低
代码示例及注释：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 去掉标签的默认的外边距,内边距 */
*{
margin: 0px;
padding: 0px;
}
.div1{
background-color: #008000;
width: 178px;
height: 178px; /* 设置的是内容区大小*/
padding: 10px;
border: 1px solid red ; /* 设置四个方向的边框*/
/* 外边距 : 一个标签距离另一个标签的距离
不会影响标签的大小,会影响标签的位置 */
}
.div2{
background-color: #008000;
width: 178px;
height: 178px; /* 设置的是内容区大小*/
padding: 10px;
border: 1px solid red ; /* 设置四个方向的边框*/
/* margin-top: 50px;
margin-left: 50px;
margin-bottom: 50px; */
/* margin: 10px; */
/* margin-left: auto;左右设置外边距的值为auto, 外边距会自动为最大值
margin-right: auto;*/
/*margin-top:100px; 上下外边距 只能给具体的数值
margin-bottom: 100px;*/
/* margin: auto; 上下为auto时,值为0*/
margin: 10px auto;
}
</style>
</head>
<body bgcolor="#00FFFF">
<!-- <div class="div1">
</div> -->
<div class="div2">
</div>
sss
<p>ssss</p>
</body>
</html>
注：设置一个标签的长和宽如果是设置内容区的大小，如果没有设置内外边距则默认它们是0
八.文档流（浮动和定位都需要用到这一概念）【重要】
-
文档流指的是文档中的标签在排列时所占用的位置。 将窗体自上而下分 成一行行 ，并在每行中按从左至右的顺序排放标签，即为文档流。
-
也就是说在文档流中标签默认会紧贴到上一个标签的右边，如果右边不 足以放下标签，标签则会另起一行，在新的一行中继 续从左至右摆放。
-
这样一来每一个块标签都会另起一行，那么我们如果想在文档 流中进行 布局就会变得比较麻烦。
网页布局就是通过浮动，定位 来打破这种默认的文档流
九.浮动
1.浮动概念
-
所谓浮动指的是使标签脱离原来的文档流，在父标签中浮动起来
（浮动：原来是二维 加了浮动就像当与网页为了变为三维加了一个z轴，本来的标签漂浮起来了，在三维上多了一个二维平面，标签浮在这个平面上）
/* 浮动使用float属性。 可选值： none ：不浮动 left ：向左浮动 right ：向右浮动 */
float: right;
float:left;
float: none;
-
让标签脱离原来的文档流漂浮起来，原来的空间释放出来。行级标签，块级标签都可以浮动，浮动后标签的宽度为内容的宽度，可以设置宽
-
当一个标签浮动以后，其下方的标签会上移。
2.浮动问题
浮动会使标签完全脱离文档流，也就是不再在文档中在占用位置标签浮动以后即完全脱离文档流，这时不会再影响父标签的高度。也就是浮动标签不会撑开父标签（高度塌陷）
解决办法：
1.给父级标签设置一个高度
2.清除浮动：自动根据浮动标签的高度撑开父级标签
3.清除浮动
- clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不 发生变化。
可选值：
left ： 忽略左侧浮动
right ：忽略右侧浮动
both ：忽略全部浮动
4.一个浮动案例
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.dh{
background-color: #0000FF;
float: left;
width: 200px;
text-align: center;
padding: 10px 0px;
color: white;
font-weight: bold;
}
.dh:hover{
background-color: #00FFFF;
}
.dh_box{
margin: 10px auto;
width: 1000px;
}
</style>
</head>
<body>
<!--
浮动的问题: 不占原来文档流中的空间,下面的标签就会向上移动
高度塌陷,不占原来空间,导致父级标签没有撑开
解决办法:1.我们给父级标签设置一个高度
2.清除浮动, 自动根据浮动标签的高度撑开父级标签
-->
<div class="dh_box">
<div class="dh">首页</div>
<div class="dh">公司新闻</div>
<div class="dh">产品介绍</div>
<div class="dh">联系我们</div>
<div class="dh">关于我们</div>
<div style="clear: left;"></div> <!-- 清除浮动 -->
</div>
<div style="background-color: #7FFF00;width: 700px; height: 100px; margin: auto;">
</div>
</body>
</html>
效果：
十.定位
- 定位的基本思想很简单，它允许你定义的标签相对于其正常位置，或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置。
1.相对定位（relative）
相对定位 ：
- 相对定位是一个非常容易掌握的概念. 相对于它的起点进行移动，移动后原来的位置还被占用。 可以通过position:relative; 开启相对定位， left right top bottom四个属性来设置标签的偏移量
相对定位的特点：
当标签的position属性设置为relative时，则开启了标签的相对定位
1.当开启了标签的相对定位以后，而不设置偏移量时，标签不会发生任何变化
2.相对定位是相对于标签在文档流中原来的位置进行定位
3.相对定位的标签不会脱离文档流
代码及注释：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
background-color: #008000;
width: 100px;
height: 100px;
position: relative;/* 开启了相对定位 如果不给偏移量,标签不会发生任何变化
相对于标签原来的位置进行移动,
标签不会脱离原来的文档流
*/
left: 100px;
top: 100px;
}
.div2{
background-color: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>
</html>
2.绝对定位（absolute）
绝对定位：
- 绝对定位是不占空间的，运用了**绝对定位的标签会脱离原来的文档流，浮动起来因此视觉上会与其他的标签重叠**。 可以通过position: absolute; 开启 绝对定位， left right top bottom四个属性来 设置标签的偏移量
绝对定位特点：
1.开启绝对定位，会使标签脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则标签的位置不会发生变化
3**.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签的绝对定位都会同时开启父标签的相对定位）如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位**
4.绝对定位会使标签提升一个层级
5.绝对定位会改变标签的性质，行级标签变成块标签
代码及注释：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
background-color: #008000;
width: 100px;
height: 100px;
position: absolute;
left: 100px;
top: 100px;
/*
position: absolute; 开启标签的绝对定位
开启后标签就脱离了原来的文档流
left top right bottom设置偏移
绝对定位是相对于离他最近的 开起了定位的父级标签进行定位,（父级标签怎样开启定位？ 只要开启相对定位和绝对定位就行无论设置不设置偏移量）
如果父级标签都没有开启定位,就以浏览器的边框为参照物定位.
(一般情况下开启了子标签的绝对定位,同时会开启父级标签的相对定位)
*/
}
.div2{
background-color: red;
width: 100px;
height: 100px;
}
.div3{
background-color: #7FFF00;
width: 200px;
height: 200px;
position: relative;
}
</style>
</head>
<body>
<div class="div3">
div3
<div class="div1">div1</div>
</div>
<div class="div2">div2</div>
</body>
</html>
3.整屏垂直居中案例
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
background-color: aquamarine;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
/* 因为定位是按它的边角进行定位的，所以想让它居中还要根据标签的大小设置其他的值 */
}
</style>
</head>
<body>
<div class="div1">
lallala
</div>
</body>
</html>
效果：
4.固定定位（fixed）
- 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：
代码及注释：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
background-color: #FAEBD7;
width: 50px;
height: 50px;
position: fixed;
bottom: 100px;
right: 100px;
}
body{
margin: 1000px;
}
</style>
</head>
<body>
<div name="top" id="div2">
</div>
<a href="#top"><div id="div1">
固定定位
</div>
</a>
</body>
</html>
效果：
5.浏览器返回顶部 快速定位案例（锚点 运用固定定位）
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a name="top"></a>
<!-- 特殊符号的转义 -->
HTML 标签
<b>标签的功能是加粗文字
®
<a href="#p1">产品1</a>
<a href="#p2">产品2</a>
<a href="#p3">产品3</a>
<a href="#p4">产品4</a>
<a href="#p5">产品5</a>
<!-- hr分割线 -->
<hr>
<h3>
<a name="p1">产品1</a>
</h3>
<img src="img/1.png">
<hr>
<h3>
<a name="p2">产品2</a>
</h3>
<img src="img/2.png">
<hr>
<h3>
<a name="p3">产品3</a>
</h3>
<img src="img/3.png">
<hr>
<h3>
<a name="p4">产品4</a>
</h3>
<img src="img/4.png">
<hr>
<h3>
<a name="p5">产品5</a>
</h3>
<img src="img/5.png">
<a href="#top" style="position: fixed; right: 20px; bottom: 20px;">返回顶部</a>
</body>
</html>
效果：
扫一扫
1941
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
