CSS-3
定位
作用：灵活的改变盒子在网页中位置
相对定位
div {
position: relative;
top: 200px;
left: 200px;
}
特点：
1. 改变位置的参照物是"自己原来的位置"
2. 不脱标（不脱离标准），占据原来的位置
3. 标签显示模式的特点不会改变
绝对定位
div {
position: absolute;
bottom: 0;
right: 0;
}
使用场景：
子级绝对定位，父级相对定位（子绝父相）
特点：
1. 脱标（脱离标准），不会占据原来的位置
2. 参照物：先找最近的已经定位的祖先元素，如果所有祖先元素都没有定位，参照浏览器可视区改位置
3. 显示模式特点改变：宽高生效（具备了行内块的特点）
固定定位
div {
position: fixed;
top: 0;
right: 0;
}
使用场景：
元素的位置在网页滚动时不会改变
特点：
1. 脱标（脱离标准），不会占据原来的位置
2. 参照物：浏览器窗口
3. 显示模式特点：具备行内块特点
定位居中
方式一：
img {
position: absolute;
left: 50%;
top: 50%;
margin-left: -213px;
margin-top: -241px;
}
方式二：
img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
子级的水平、垂直两个方向都偏移父级的50%
然后，子级向左、向上移动自身尺寸的一半（有两种实现方式）
方式一：使用 margin，手动计算
margin-top: -100px;
margin-left: -100px;
方式二：（自动计算，推荐使用）
transform: translate(-50%, -50%);
堆叠层级
<style>
div {
position: absolute;
width: 200px;
height: 200px;
}
.box1 {
background-color: pink;
/* 取值是整数，默认是0，取值越大显示顺序越靠上 */
z-index: 1;
}
.box2 {
background-color: skyblue;
left: 100px;
top: 100px;
z-index: 2;
}
</style>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
默认效果：
按照标签书写顺序，后来者居上
作用：
设置定位元素的层级顺序，改变定位元素的显示顺序
CSS 精灵
div {
width: 112px;
height: 110px;
background-color: pink;
background-image: url(./images/img0.png);
background-position: -256px -276px;
}
作用：
将所有的小图片集合到一个大图里面，将大图发给用户，需要显示小图的时候，就定位到大图中的小图位置即可，这样可以减少多个小图片向服务器申请，从而减少服务器的压力
步骤：
1. 创建盒子，盒子尺寸与小图尺寸相同
2. 设置盒子背景图为精灵图
3. 添加 background-position 属性，改变背景图位置
3.1 使用 PxCook 测量
3.2 取负数坐标为 background-position 属性值（向左上移动图片位置）
字体图标
<style>
.iconfont {
font-size: 200px;
color: pink;
}
</style>
<body>
<span class="iconfont icon-dianzan"></span>
</body>
字体图标：
展示的是图标，本质是字体
作用：
在网页中添加简单的、颜色单一的小图标
优点：
1. 灵活性：灵活地修改样式，例如：尺寸、颜色等
2. 轻量级：体积小、渲染快、降低服务器请求次数
3. 兼容性：几乎兼容所有的主流浏览器
4. 使用方便：先下载再使用
垂直对齐方式
<style>
div {
border: 1px solid #000;
}
img {
/* 垂直居中 */
/* vertical-align: middle; */
/* 顶对齐：最高内容的顶部 */
/* vertical-align: top; */
/* 底对齐：最高内容的底部 */
vertical-align: bottom;
}
</style>
<body>
<div>
<img src="./images/img1.png" alt="">
Hello World!
</div>
</body>
属性名：vertical-align
属性值 效果
baseline 基线对齐
top 顶部对齐
middle 居中对齐
bottom 底部对齐
过渡
<style>
img {
width: 100px;
height: 100px;
transition: all 2s;
}
img:hover {
width: 400px;
height: 400px;
}
</style>
<body>
<img src="./images/img2.png" alt="">
</body>
作用：可以为一个元素在不同状态之间切换的时候添加过渡效果
属性名：transition（复合属性）
属性值：过渡的属性 花费的时间（s）
提示：
过渡的属性可以是具体的 CSS 属性，如 width、height......
也可以设置为 all （所有属性都产生过渡效果）
透明度
img {
opacity: 0.1;
}
作用：设置整个元素的透明度（包含背景和内容）
属性名：opacity
属性值：0 ~ 1
光标类型
div {
width: 200px;
height: 200px;
background-color: pink;
cursor: pointer;
}
作用：鼠标悬停在元素上时指针显示样式
| 属性值 | 效果 |
|---|---|
| default | 默认值，通常是箭头 |
| pointer | 小手效果，提示用户可以点击 |
| text | 工字形，提示用户可以选择文字 |
| move | 十字光标，提示用户可以移动 |
提升网站排名
SEO：搜索引擎优化，提升网站搜索排名
网页头部 SEO 标签：
- title：网页标题标签
- description：网页描述
- keywords：网页关键词
<meta charset="utf8" version='1'>
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"/>
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>