网站运营成本个人网站的建设目标
本文介绍定位和CSS中的修饰属性。
目录
1. 定位
1.1 相对定位
1.2 绝对定位
1.3 定位居中
1.4 固定定位
1.5 z-index堆叠层级
2. 修饰属性
2.1 垂直对齐方式 vertical-align
2.2 过渡属性
2.3 透明度 opacity
2.4 光标类型 cursor
1. 定位
灵活改变盒子在网页中的位置
实现：
position
加上边偏移属性：top bottom left right
1.1 相对定位
position:relative
一般和其他定位相互配合使用
1.2 绝对定位
position:absolute
子级绝对定位，父级相对定位
（子级无论怎么改变都会出现在父级区域的里面）
<!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>img {width: 400px;}.news {/* 父级相对 */position: relative;/* 版心 */margin: 100px auto;width: 400px;height: 350px;background-color: #f8f8f8;}/*1.绝对定位 脱标 不占位2.绝对定位参照物：先找最近的已经定位的祖先元素，如果没有祖先元素，就参照浏览器可视区改位置3.显示模式改变：宽高生效（具备了行内块）*/.news span {/* 子级绝对 */position: absolute;/* 边偏移属性改变位置 *//* 要去右上角 */right: 0;top: 0;/* span原来是行内，display转为块级 */display: block;width: 92px;height: 32px;background-color: rgba(0, 0, 0, 0.6);text-align: center;line-height: 32px;color: #fff;}</style>
</head>
<body><div class="news"><img src="./5.webp" alt=""><span>展会活动</span><h4>2222世界移动大会</h4></div>
</body>
</html>
1.3 定位居中
在浏览器窗口中实现定位居中
实现步骤：
1. 绝对定位
2. 水平、垂直边偏移为50%
3. 子级向左、上移动自身尺寸的一半（也可以transform:translate(-50%,-50%)）
<style>img {/* 子级绝对 */position: absolute;/* 右移、下移浏览器页面的一半 */left: 50%;top: 50%;/* 左移自身图片宽度的一半 我的图片宽度是810，所以左移405px */margin-left: -405px;/* 上移同理 */margin-top: -540px;}</style>
</head>
<body><img src="./5.webp" alt="">
</body>
第二种写法：
<style>img {/* 子级绝对 */position: absolute;/* 右移、下移浏览器页面的一半 */left: 50%;top: 50%;transform: translate(-50%,-50%);}</style>1.4 固定定位
position:fixed
在页面中无论怎么滑动，都不会动位置
<style>* {margin: 0;padding: 0;}img {width: 200px;height: 200px;}/*固定定位：1. 脱标 不占位 2. 参照物：浏览器窗口 3. 行内块特点*/div {position: fixed;/* 浏览器窗口的最顶部 */top: 0;/* 浏览器窗口的最右部 */right: 0;/* 加个宽度，看是否发生变化 */width: 500px;}</style>
可以看到滑动页面时他的位置也不变
1.5 z-index堆叠层级
默认效果：按照标签书写顺序，后来者居上，后写的压在前一个上面
作用：设置定位元素的层级顺序，改变定位元素的显示顺序
如图效果：
下面代码演示：
<!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 {position: absolute;/* 定位后，后来者居上 */width: 200px;height: 200px;}.box1 {background-color: pink;/* z-index取值是整数，默认是0，取值越大显示顺序越靠上 */z-index: 1;}.box2 {background-color: skyblue;/* 加边偏移，明显看到堆叠效果 */left: 100px;top: 100px;/* z-index取值比box1大才能压在他上面 */z-index: 2;}</style>
</head>
<body><div class="box1">box1</div><div class="box2">box2</div>
</body>
</html>
2. 修饰属性
2.1 垂直对齐方式 vertical-align
属性名：vertical-align
属性值：
baseline 基线对齐(默认)
top 顶部对齐
middle 居中对齐
bottom 底部对齐
什么是基线，为什么头像和昵称不能同行？
原因：将图片也当成文字处理，都在同一基线对齐
<style>div {border: 1px solid #000;}img {width: 200px;height: 200px;/* 谁占的块大，给谁加 *//* 1. middle文字和图片对齐居中 */vertical-align: middle;/* 2. top顶对齐 *//* vertical-align: top; *//* 3.bottom底部对齐 *//* vertical-align: bottom; */}</style>
</head>
<body><div><!-- 默认：图片和文字，一个偏上一个偏下 --><img src="./5.webp" alt="">我是谁？我在哪？</div>
</body>居中：
还有一种方法：直接取消底下的空白
转换为块级即可，让浏览器认为这是块，就不当成文字和其他文字一行了
img {width: 200px;height: 200px;display:block;
}2.2 过渡属性
transition
可以为一个元素在不同状态之间切换的时候添加过渡效果（如大小变化）
属性名：transition 复合属性
属性值：过渡的属性 花费时间 秒s
写法：
1. 可以是具体的CSS属性
2. 也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）
3. transition 设置给元素本身
<style>/* 默认 */img {width: 200px;height: 150px;/* 属性值不同的都变化 时间1s *//* 加给标签本身 */transition: all 1s;}/* 鼠标滑动到图片时 */img:hover {width: 300px;height: 300px;}</style>
</head>
<body><img src="./5.webp" alt="">
</body>2.3 透明度 opacity
设置整个元素的透明度 (包含背景和内容)
属性名：opacity
属性值：0-1
0：完全透明（元素不可见）
1：不透明
0-1小数：半透明
2.4 光标类型 cursor
鼠标悬停在元素上时显示指针显示样式
属性名：cursor
属性值：
default 默认值 通常是箭头
pointer 小手效果 提示用户可以点击
text 工字型 提示用户可以选择文字
move 十字光标 提示用户可以移动
<style>div {width: 200px;height: 200px;background-color: pink;/* cursor:pointer; 小手 */cursor:pointer;/* 工字型 可以选择文本的 */cursor: text;/* 可以移动 */cursor: move;}</style>
</head>
<body><div></div>本文介绍定位和CSS中的修饰属性。