1.常用标签
1 | |
图像链接
1 | |
链接标签
1 | |
锚点标签
快速定位页面中的某一个位置
1 | |
表格标签
1 | |
列表标签
无序列表
1 | |
有序列表
1 | |
自定义列表
1 | |
表单标签
组成部分：表单域、提示信息、表单控件
表单域
1 | |
表单控件（元素）
- input标签
1 | |
- 增加用户体验，点击文字即可在文本框输入
1 | |
2.相对路径和绝对路径
- 绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径（不常用）
- 相对路径：以引用文件所在位置为参考基础，而建立出的目录路径
- 同一级路径 图像文件位于HTML文件同一级 直接引用
- 下一级路径 图像文件位于HTML文件下一级 /
- 上一级路径 图像文件位于HTML文件上一级 ../
3.CSS基础选择器
选择器：
- 基础选择器
- 标签选择器：选出所有相同的标签
- 类选择器：差异化选择不同的标签，单独一个或多个
- id选择器: 只能被调用一次
- 通配符选择器（*）：页面中的所有的元素（标签）被定义
- 复合选择器
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
1 | |
4.CSS字体属性
1 | |
5.CSS文本属性
1 | |
6.CSS引入的三种方式
- 行内样式
- 内部样式
- 外部样式
1 | |
7.Emmet语法
1 | |
8.符合选择器
- 后代选择器：选择父代所选的子元素
- 子选择器：选择最近的子元素
- 并集选择器：选择多组标签定义相同的样式
- 伪类选择器: 添加某些特殊的效果
后代选择器
1 | |
子选择器
1 | |
并集选择器
1 | |
伪选择器
链接伪选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<style>
/*未访问的链接*/
a:link{
color: #333333;
text-decoration: none;
}
/*访问过的链接*/
a:visited {
color: orange;
}
/*选择鼠标经过的链接*/
a:hover {
color: blue;
}
/*鼠标按住没松开的链接*/
a:active {
color: green;
}
</style>
<body>
<a href="#">链接伪类选择器</a>
</body>focus伪类选择器
1
2
3
4
5
6
7
8
9
10
11
12<style>
/*选中光标变色*/
input:focus {
background: blue;
color: red;
}
</style>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
9.CSS的元素显示模式
定义：就是元素(标签)以什么方式进行显示，比如
自己独占一行，比如一行可以放多个
分类：
- 块元素 ：
、
、
、- 、
- 独占一行
- 可以设置样式
- 可以放块元素和行内元素
- 行内元素：
等- 相邻行内元素一行上可以显示多个
- 高宽设置无效
- 行内元素只能容纳文本或其他行内元素
- 行内块元素：
- 结合行元素和块元素的特点
注意：文字类的元素内不能使用块级元素 例如：
、
注意：链接不能再放链接，特俗链接可以放块级元素
元素模式相互转换
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23<style>
a {
width: 500px;
height: 250px;
color: red;
display: block;
background: blue;
}
div {
width: 500px;
height: 100px;
display: inline;
background: red;
}
span {
display: inline-block;
}
</style>
<body>
<a href="#">转换为块级元素
<div>转换为行块元素</div>
<span>转换为行快元素</span>
</body>
单行文字垂直居中
让文字的行高等于盒子的高度
1
2
3
4
5
6div {
width: 80px;
height: 50px;
background: red;
line-height: 50px;
}
案例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
a {
display: block;
width: 200px;
height: 50px;
background: gray;
color: white;
text-decoration: none;
text-indent: 2em;
line-height: 50px;
}
a:hover {
background: orange;
}
</style>
<body>
<a href="#">手机</a>
<a href="#">笔记本</a>
<a href="#">出行</a>
<a href="#">耳机</a>
<a href="#">旅游</a>
<a href="#">逛逛</a>
</body>
</html>10.CSS背景
- 属性：背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41<style>
div {
width: 800px;
height: 500px;
line-height: 50px;
/*背景图片*/
background-image: url("2.jpg");
/*背景颜色 默认颜色transparent*/
background-color: orange;
/*背景平铺 */
/*不平铺*/
background-repeat: no-repeat;
/*!*沿着x轴*!*/
background-repeat: repeat-x;
/*!*沿着y轴*!*/
background-repeat: repeat-y;
/*background-position: 方位名词
前后不按顺序
如果只写一个，另一个默认为居中
*/
background-position: center top;
background-position: right center;
/*background-position: 精确定位
第一个是x轴，第一个是y轴,顺序不能颠倒
如果只写一个，另一个默认为居中
*/
background-position: 50px 30px;
/*background-position: 混合单位
第一个是x轴，第一个是y轴,顺序不能颠倒
*/
background-position: center 30px;
/*背景图片固定 默认是不固定的scroll*/
background-attachment: fixed;
/*背景复合型写法 没有固定的顺序*/
background：orange url("2.jpg") no-repeat center top fixed;
}
</style>- 背景色半透明
1
2
3
4
5
6
7
8
9
10
11
12<style>
div {
background: rgba(0,0,0,0.3);
width: 400px;
height: 300px;
}
</style>
<body>
<div></div>
</body>11.CSS三大特性
- 层叠性：
- 样式冲突：就近原则
- 样式不冲突：不会层叠
- 继承性：子类继承父类的元素样式（text- font- line- 以及color属性）
- 优先级：!important>行内样式>id选择器>类(伪类)选择器>元素选择器>继承
- 权重：无穷>1,0,0,0>0,1,0,0>0,0,1,0>0,0,0,1>0,0,0,0
- 注意：继承权重为0，如果元素没有直接选中，不管父元素权重有多高，都会执行子元素
层叠性
层叠性：
- 样式冲突：就近原则
- 样式不冲突：不会层叠
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<style>
/*不会层叠*/
div {
color: red;
font-size: 30px;
}
/*覆盖性*/
div {
color: pink;
}
</style>
<body>
<div>
层叠性
</div>
</body>继承性
继承性：子类继承父类的元素样式（text- font- line- 以及color属性）
1
2
3
4
5
6
7
8
9
10
11
12
13<style>
div {
color: red;
font-size: 30px;
}
</style>
<body>
<div>
<!--继承父类属性-->
<p>层叠性</p>
</div>
</body>- 行高继承性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>行高的继承</title>
<style>
body {
color: pink;
/* font: 12px/24px 'Microsoft YaHei'; */
font: 12px/1.5 'Microsoft YaHei';
}
div {
/* 子元素继承了父元素 body 的行高 1.5 */
/* 这个1.5 就是当前元素文字大小 font-size 的1.5倍 所以当前div 的行高就是21像素 */
font-size: 14px;
}
p {
/* 1.5 * 16 = 24 当前的行高 */
font-size: 16px;
}
/* li 么有手动指定文字大小 则会继承父亲的 文字大小 body 12px 所以 li 的文字大小为 12px
当前li 的行高就是 12 * 1.5 = 18
*/
</style>
</head>
<body>
<div>粉红色的回忆</div>
<p>粉红色的回忆</p>
<ul>
<li>我没有指定文字大小</li>
</ul>
</body>
</html>优先级
优先级：!important>行内样式>id选择器>类(伪类)选择器>元素选择器>继承
- 权重：无穷>1,0,0,0>0,1,0,0>0,0,1,0>0,0,0,1>0,0,0,0
- 注意：继承权重为0，如果元素没有直接选中，不管父元素权重有多高，都会执行子元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<title>CSS优先级</title>
<style>
.test {
color: red;
}
div {
color: pink!important;
}
#demo {
color: green;
}
</style>
</head>
<body>
<div class="test" id="demo" style="color: purple">你笑起来真好看</div>
</body>12.盒子模型
定义：就是把HTML页面中的布局元素看作是一个矩形盒子，也就是一个盛装内容的容器
组成部分：
- 边框（border）
- 外边距（margin）
- 内边距（padding）
- 实际内容（content）
边框（border）
- 边框有三部分组成：边框粗细 边框样式 边框颜色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25<style>
div {
width: 300px;
height: 200px;
/* border-width 边框的粗细 一般情况下都用 px */
border-width: 5px;
/* border-style 边框的样式 solid 实线边框 dashed 虚线边框 dotted 点线边框*/
border-style: solid;
/* border-style: dashed; */
/* border-style: dotted; */
/* border-color 边框的颜色 */
border-color: pink;
/* 边框的复合写法 简写: */
border: 5px solid pink;
/* 上边框 */
border-top: 5px solid pink;
/* 下边框 */
border-bottom: 10px dashed purple;
}
</style>
</head>
<body>
<div></div>
</body>- 表格细线边框
1
2/* 表示相邻边框合并在一起 */
border-collapse: collapse;内边距（padding）
- 注意：如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<style>
div {
width: 200px;
height: 200px;
background: pink;
padding-left: 12px;
padding-top: 15px;
/* padding-bottom: 10px;
padding-right: 10px;*/
}
</style>
<body>
<div>
内边距内边距内边距额
</div>
</body>- 复合型写法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* 内边距复合写法(简写) */
/*表示上下左右的内边距都为5px */
padding: 5px;
/*表示上下内边距为5px,左右内边距为10px */
padding: 5px 10px;
/*表示上内边距为5px，左右内边距为10px,下边距为20px */
padding: 5px 10px 20px;
/*表示上内边距为5px，右内边距为10px,下边距为20px 做内边距为30px顺时针 */
padding: 5px 10px 20px 30px;
}
</style>
</head>
<body>
<div>
盒子内容是content盒子内容是content盒子内容是content盒子内容是content
</div>
</body>外边距（margin）
- 控制盒子和盒子之间的距离 复合型写法和内边距一样
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<style>
div {
width: 200px;
height: 200px;
background: pink;
}
/* .one {
margin-bottom: 20px;
}*/
.two {
margin-top: 20px;
}
</style>
<body>
<div class="one">1</div>
<div class="two">2</div>
</body>典型应用：让盒子水平居中 前提：指定宽度，左右外边距设置为auto
1
2
3
4
5
6
7
8
9
10
11
12
13<style>
div {
width: 500px;
height: 200px;
background: pink;
margin: 0 auto;
}
</style>
<body>
<div></div>
</body>让行内元素或者行内块元素水平居中给其父元素添加属性 text-align: center;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<style>
div {
width: 500px;
height: 200px;
background: pink;
margin: 0 auto;
text-align: center;
}
</style>
<body>
<div>
<span>行内块元素</span>
</div>
</body>嵌套块级元素垂直外边距塌陷问题解决方案
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28<title>外边距合并-嵌套块级元素垂直外边距塌陷</title>
<style>
.father {
width: 400px;
height: 400px;
background-color: purple;
margin-top: 50px;
/*可以为父元素定义上边框 */
/* border: 1px solid red; */
/* border: 1px solid transparent; */
/*可以为父元素定义内边距 */
/* padding: 1px; */
/*可以为父元素添加overflow: hidden; */
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>清楚内外间距
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<title>清除内外边距</title>
<style>
/* 这句话也是我们css 的第一行代码 */
* {
margin: 0;
padding: 0;
}
span {
background-color: pink;
margin: 20px;
}
</style>
</head>
<body>
123
<ul>
<li>abcd</li>
</ul>
<span>行内元素尽量只设置左右的内外边距</span>
</body>13.圆角边框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37<style>
.yuanxing {
width: 200px;
height: 200px;
background-color: pink;
/* border-radius: 100px; */
/* 50% 就是宽度和高度的一半 等价于 100px */
border-radius: 50%;
}
.juxing {
width: 300px;
height: 100px;
background-color: pink;
/* 圆角矩形设置为高度的一半 */
border-radius: 50px;
}
.radius {
width: 200px;
height: 200px;
/* border-radius: 10px 20px 30px 40px; */
/* border-radius: 10px 40px; */
border-top-left-radius: 20px;
background-color: pink;
}
</style>
</head>
<body>
1. 圆形的做法:
<div class="yuanxing"></div>
2. 圆角矩形的做法:
<div class="juxing"></div>
3. 可以设置不同的圆角:
<div class="radius"></div>
</body>14.盒子阴影
属性
- h-shadow 必须 水平阴影的位置，允许负值
- v-shadow 必须 垂直阴影的位置，允许负值
- blur 可选。模糊距离
- spread 可选。阴影尺寸
- color 可选。阴影颜色
- inset 可选，将外部阴影（outset）改为内部阴影
注意:默认的外阴影outset，但是不可以写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
/* box-shadow: 10px 10px; */
}
div:hover {
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
}
/* 原先盒子没有影子,当我们鼠标经过盒子就添加阴影效果 */
</style>
</head>
<body>
<div></div>
</body>文字阴影
属性
- h-shadow 必须 水平阴影的位置，允许负值
- v-shadow 必须 垂直阴影的位置，允许负值
- blur 可选。模糊距离
- spread 可选。阴影尺寸
15.浮动
三种布局
- 标准流：行内元素和块级元素
- 浮动
- 定位
浮动只影响后面的不影响前面的
特性
浮动元素脱离标准流（脱标）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23<style>
/* 设置了浮动（float）的元素会：
1. 脱离标准普通流的控制（浮）移动到指定位置（动）。
2.浮动的盒子不在保留原先的位置 */
.box1 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
width: 300px;
height: 300px;
background-color: rgb(0, 153, 255);
}
</style>
</head>
<body>
<div class="box1">浮动的盒子</div>
<div class="box2">标准流的盒子</div>
</body>浮动的元素会一行内显示并且元素顶部对齐
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25<style>
div {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.two {
background-color: purple;
height: 249px;
}
.four {
background-color: skyblue;
}
</style>
</head>
<body>
<div>1</div>
<div class="two">2</div>
<div>3</div>
<div class="four">4</div>
</body>浮动的元素具有行内块元素的特性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27<style>
/* 任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。 */
span,
div {
float: left;
width: 200px;
height: 100px;
background-color: pink;
}
/* 如果行内元素有了浮动,则不需要转换块级\行内块元素就可以直接给高度和宽度 */
p {
float: right;
height: 200px;
background-color: purple;
}
</style>
</head>
<body>
<span>1</span>
<span>2</span>
<div>div</div>
<p>ppppppp</p>
</body>
浮动元素经常和标准流父级搭配使用
清除浮动
本质：清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流
方法：
额外标签法也称为隔墙发
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47<title>清除浮动之额外标签法</title>
<style>
.box {
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
.damao {
float: left;
width: 300px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 200px;
background-color: black;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
<div class="ermao">二毛</div>
<div class="ermao">二毛</div>
<div class="ermao">二毛</div>
<!-- <div class="clear"></div> -->
<!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
<span class="clear"></span>
</div>
<div class="footer"></div>
</body>父级添加overflow属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39<title>为什么需要清除浮动</title>
<style>
.box {
/* 清除浮动 */
overflow: hidden;
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
.damao {
float: left;
width: 300px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div class="box">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</div>
<div class="footer"></div>
</body>父级添加after伪元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50<title>伪元素清除浮动</title>
<style>
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 专有 */
*zoom: 1;
}
.box {
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
.damao {
float: left;
width: 300px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</div>
<div class="footer"></div>
</body>父级添加双伪元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51<title>伪元素清除浮动</title>
<style>
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.box {
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
.damao {
float: left;
width: 300px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</div>
<div class="footer"></div>
</body>
16.定位
定义：将某一个盒子定位在某一个位置
组成：定位=定位模式+边偏移
定位模式
定位模式决定元素的定位方式，通过position属性来设置
- 静态定位：默认定位，按照标准流摆放
- 相对定位：相对自己的位置移动，原来标准流的位置继续保留
- 绝对定位：
- 相对于祖先元素来说的（没有祖先元素或者祖先元素没有定位都以浏览器标准流）
- 如果祖先有定位，则以最近一级定位的祖先为参考点
- 绝对定位不在占有原来的位置（脱标）
- 固定定位：固定于浏览器的可视区域
- 以浏览器的可视窗口为参照移动元素
- 跟父元素没有任何关系
- 不随滚动条滚动
- 固定定位不在占有原先的位置
- 粘性定位
- 以浏览器的可视窗口为参照移动元素（固定定位特点）
- 粘性定位占有原先的位置（相对定位特点）
- 必须添加top、left、right、bottom其中一个才有效
子绝父相：父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位
相对定位
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26<title>相对定位</title>
<style>
.box1 {
position: relative;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
width: 200px;
height: 200px;
background-color: deeppink;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>绝对定位
- 父级无定位
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27<title>绝对定位-无父亲或者父亲无定位</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: skyblue;
}
.son {
position: absolute;
/* top: 10px;
left: 10px; */
/* top: 100px;
right: 200px; */
left: 0;
bottom: 0;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>- 父级有定位
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34<title>绝对定位-父级有定位</title>
<style>
.yeye {
position: relative;
width: 800px;
height: 800px;
background-color: hotpink;
padding: 50px;
}
.father {
width: 500px;
height: 500px;
background-color: skyblue;
}
.son {
position: absolute;
left: 30px;
bottom: 10px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="yeye">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>固定定位
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<title>固定定位</title>
<style>
.dj {
position: fixed;
top: 100px;
left: 40px;
}
</style>
</head>
<body>
<div class="dj">
<img src="images/pvp.png" alt="">
</div>
</body>固定定位小技巧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25<title>固定定位小技巧-固定到版心右侧</title>
<style>
.w {
width: 800px;
height: 1400px;
background-color: pink;
margin: 0 auto;
}
.fixed {
position: fixed;
/* 1. 走浏览器宽度的一半 */
left: 50%;
/* 2. 利用margin 走版心盒子宽度的一半距离 */
margin-left: 405px;
width: 50px;
height: 150px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="fixed"></div>
<div class="w">版心盒子 800像素</div>
</body>定位叠放次序 z-index
- 数值可以是正整数、负数，默认是auto，数值越大，盒子越靠上
- 如果属性值相同，则按照书写的顺序，后来居上
- 数字后面不能加单位
- 只有定位的盒子才有z-index属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31<title>定位的堆叠顺序</title>
<style>
.box {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
}
.xiongda {
background-color: red;
z-index: 1;
}
.xionger {
background-color: green;
left: 50px;
top: 50px;
z-index: 2;
}
.qiangge {
background-color:blue;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div class="box xiongda">熊大</div>
<div class="box xionger">熊二</div>
<div class="box qiangge">光头强</div>
</body>绝对定位盒子居中
- 加了绝对定位的盒子不能通过margin: 0 auto水平居中，但是可以通过以下算法实现水平和垂直居中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<title>绝对定位水平垂直居中</title>
<style>
.box {
position: absolute;
/* 1. left 走 50% 父容器宽度的一半 */
left: 50%;
/* 2. margin 负值 往左边走 自己盒子宽度的一半 */
margin-left: -100px;
top: 50%;
margin-top: -100px;
width: 200px;
height: 200px;
background-color: pink;
/* margin: auto; */
}
</style>
</head>
<body>
<div class="box"></div>
</body>定位的特殊性
- 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
- 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容大小
- 浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题
扩展
- 浮动元素只会压住标准流的盒子，但是不会压住下面标准流的文字或者图片
- 但是绝对定位（固定定位）会压住下面标准流的所有的内容
边偏移
- 边偏移就是定位的盒子移动的最终位置，有top、bottom、left、right 4个属性
17.元素的显示与隐藏
三个属性
- display：隐藏元素后，不在占有原来的位置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23<title>显示隐藏元素之display</title>
<style>
.peppa {
/* 隐藏对象 */
display: none;
/* 显示对象 */
/* display: block; */
width: 200px;
height: 200px;
background-color: pink;
}
.george {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="peppa">佩奇</div>
<div class="george">乔治</div>
</body>- visibility：隐藏元素后，继续占有原来的位置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23<title>显示隐藏元素之display</title>
<style>
.baba {
//元素可见
visibility: visible;
//元素隐藏
visibility: hidden;
width: 200px;
height: 200px;
background-color: pink;
}
.mama {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="baba">猪爸爸</div>
<div class="mama">猪妈妈</div>
</body>- overflow溢出
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24<title>显示隐藏元素之overflow</title>
<style>
.peppa {
/* overflow: visible; */
/* overflow: hidden; */
/* scroll 溢出的部分显示滚动条 不溢出也显示滚动条 */
/* overflow: scroll; */
/* auto 溢出的时候才显示滚动条 不溢出不显示滚动条 */
/* overflow: auto; */
width: 200px;
height: 200px;
border: 3px solid pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="peppa">
《小猪佩奇》，又名《粉红猪小妹》（台湾名为粉红猪），英文名为《Peppa
Pig》，是由英国人阿斯特利（Astley）、贝克（Baker）、
</div>
</body>
本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！
目录
- 、