1. 定位
1.1 相对定位
position: relative
- 改变位置的参照物：自己原来的位置
- 不脱标，占位
- 标签显示模式特点：不改变，即：块级还是块级
html
img{
position: relative;
top: 100px;
left:200px;
}1.2 绝对定位
子绝父相：子组件绝对定位，父组件相对定位
- 脱标，不占为
- 参照物：找到最近的已经定位的祖先元素，如果祖先元素没有定位，参照物浏览器可视区该位置
- 显示模式改变，宽高生效具备了行内块的特点
html
div{
position: relative;
width: 500px;
height: 500px;
background-color: pink;
margin: 0 auto;
}
img{
position: absolute;
top: 0px;
right:0px;
}1.3 居中定位
浏览器的居中直接设置绝对定位：absolute
html
img{
position: absolute;
top: 50%;
left:50%;
/*自己宽高的一半*/
transform: translate(-50%,-50%);
}1.4 固定定位
即：元素的位置在网页滚时不会发生改变，fixed
- 脱标，不占位
- 参照物：浏览器
- 显示模式特点，具备行内块特点
html
img{
position: fixed;
top: 20px;
right: 0px;
}1.5 堆叠顺序
遵循：后来者居上
可以使用
z-index:取值是整数，默认是0，取值越大显示顺序越靠上
html
div{
width: 200px;
height: 200px;
position: absolute;
}
.pink{
background-color: pink;
z-index: 1;
}
.blue{
background-color: blue;
top: 50px;
left: 50px;
}2. css精灵
- 也叫CSS Cprites 是网页图片应用处理方式，把网页一些背景图片整合到一张图片文件中，再background-position的精确定位出背景图片的位置
- 可以减少服务器被请求数量，减轻服务器压力，提高页面加载速度
3. 字体图标
展示的图标 本质是字体
在网页添加简单的、颜色单子的小图标
特点
- 灵活性：灵活的修改样式，尺寸、颜色等
- 轻量级：体积小、渲染快、降低服务器请求次数
- 兼容性：几乎兼容所有主流浏览器
- 使用方便：先下载再使用
使用：素材库 -> 官方图标库 -> 选择素材库加入到购物车 - > 打开购物车新建项目-> 下载到本地
将下载的文件放入到项目中进行引用
icon-yanziwancheng点击下载的html文件找到相关icon名称
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体图标</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
.iconfont{
font-size: 100px;
color: pink;
}
</style>
</head>
<body>
<div class="iconfont icon-yanziwancheng">
</div>
</body>
</html>
4. 垂直对齐方式
vertical-align：谁占的位置高属性放在谁的身上
| 属性值 | 效果 |
|---|---|
| baseline | 基线对齐（默认） |
| top | 顶部对齐 |
| middle | 居中对齐 |
| bottom | 底部对齐 |
html
<head>
<meta charset="UTF-8">
<title>字体图标</title>
<style>
img{
vertical-align: middle;
}
</style>
</head>
<body>
<div >
<img src="imgs/藏獒.png">
<span>123143212341234</span>
</div>
</body>5. 过度transition
作用：可以作为一个元素再不同状态之间切换的时候添加的过渡效果，比如按钮hover属性名：transition
属性值：过渡属性 花费时间（s）
提示
- 过渡的属性可以是具体的css属性
- 也可以是all(两个状态属性值不同的所有属性都产生过渡效果)
- transition 设置给元素本身
html
<head>
<meta charset="UTF-8">
<title>transition</title>
<style>
div{
border: 1px solid pink;
}
img{
width: 200px;
height: auto;
transition: all 1s;
}
img:hover{
width: 400px;
height: auto;
}
</style>
</head>
<body>
<div >
<img src="imgs/藏獒.png">
</div>
</body>6. 透明度opacity
作用：设置整个元素的透明度（包含整个背景和内容）
属性名：opacity
属性值：0-1
- 0：完全透明
- 1：不透明
0-1之间小数：半透明
html
button{
width: 100px;
height: 25px;
opacity: 0.3;
transition: all 0.5s;
}
button:hover{
width: 150px;
height: 50px;
font-size: 32px;
opacity: 1;
border-radius: 20px;
}7. 光标类型cursor
作用：鼠标悬停在元素上时指针显示样式
属性名：cursor
属性值
| 属性名 | 效果 |
|---|---|
| default | 默认值，通常是箭头 |
| pointer | 小手效果，提示用户可以点击 |
| text | 工字形，提示用户可以选择文字 |
| move | 十字光标，提示用户可以移动 |
html
div{
border: 1px solid pink;
cursor: text;
}
img{
width: 200px;
height: auto;
transition: all 1s;
cursor: move;
}
img:hover{
width: 400px;
height: auto;
}
button{
width: 100px;
height: 25px;
opacity: 0.3;
transition: all 0.5s;
cursor: pointer;
}
button:hover{
width: 150px;
height: 50px;
font-size: 32px;
opacity: 1;
border-radius: 20px;
}小经验
1.1 input框
html
.header .search input{
/*浏览器优先生效默认宽，这里重置css属性*/
flex: 1;
width: 0;
border: none; /* 去掉边框 */
outline: none; /* 去掉焦点时的蓝色外框 */
background: transparent; /* 如果不需要背景 */
}
/*选中提示框的样式*/
.header .search input::placeholder{
font-size: 16px;
color: #cccccc;
}