目录
1.定位:
1.相对定位：
定义:相对于自己原来的位置进行定位
1.1定义属性：position:relative;
1.2方位属性：top、right、bottom、left
1.3 特点：
1.3.1 不脱标，原来的空间位置不释放
2.绝对定位：
2.1 定义属性:position: absolute;
2.2方位属性：top、right、bottom、left
2.3 特点：
2.3.1 脱标，原来的空间位置释放
2.4 参考位置：
2.4.1 相对于body定位----如果当前盒子的父级没有定位，那么参考的就是body
2.4.2 相对于最近的定位父级定位----如果当前盒子的父级有定位，那么参考的就是 最近的定位父级---一般情况下：父相子绝---就近原则
3.固定定位：
3.1定义属性：position:fixed;
3.2方位属性：top、right、bottom、left
3.3 特点：
3.3.1 相对于浏览器窗口进行定位
3.3.2 不随滚动条滚动
3.3.3 不占据文档流---脱标
4.定位居中:
4.1 实现步骤：
5.堆叠层级 z-index:
- 默认效果：按照标签书写顺序，后来者居上
- 作用：设置定位元素的层级顺序，改变定位元素的显示顺序
- 属性名：z-index
- 属性值：整数数字（默认值为0，取值越大，层级越高）
| 定位模式 | 属性值 | 是否脱标 | 显示模式 | 参照物 |
| 相对定位 | relative | 否 | 保持标签原有显示模式 | 自己原来位置 |
| 绝对定位 | absolute | 是 | 行内块特点 | 1.已经定位的祖先元素 2.浏览器可视区 |
| 固定定位 | fixed | 是 | 行内块特点 | 浏览器窗口 |
标签代码:
<p>段落1</p>
<div class="box1">1</div>
<p>段落2</p>
<div class="box2">2</div>
<p>段落3</p>
<div class="bigbox">
<div class="box3">3</div>
</div>
<p>段落4</p>
<div class="box4">4</div>
<p>段落5</p>
<div class="box5">5</div>
<div class="box6">6</div>样式代码:
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p {
height: 100px;
background-color: skyblue;
}
.box1 {
width: 300px;
height: 300px;
background-color: sandybrown;
position: relative;
top: 50px;
left: 30px;
transform: translateY(-50%);
}
.box2 {
width: 300px;
height: 300px;
background-color: rgb(111, 212, 133);
position: relative;
top: -80px;
left: 100px;
}
.bigbox {
position: relative;
width: 400px;
height: 400px;
background-color: tan;
}
.bigbox .box3 {
width: 300px;
height: 300px;
background-color: rgb(183, 111, 212);
position: absolute;
top: 40px;
left: 30px;
}
.box4 {
width: 300px;
height: 300px;
background-color: rgb(223, 149, 207);
position: absolute;
top: 180px;
left: 120px;
}
.box5 {
width: 300px;
height: 300px;
background-color: rgb(223, 149, 149);
position: fixed;
right: 0;
top: 0;
}
.box6 {
width: 300px;
height: 300px;
background-color: rgb(211, 149, 223);
position: fixed;
right: 0;
bottom: 0;
}
</style>效果:
小案例(购物车):
标签代码:
<div class="bigbox">
<img src="./img/购物车.png" alt="" />
<span>我的购物车</span>
<div class="z">0</div>
</div>样式代码:
<style>
.bigbox {
display: flex;
justify-content: space-evenly;
align-items: center;
position: relative;
width: 150px;
height: 50px;
border: 1px solid rgb(190, 190, 190);
}
.bigbox img {
width: 30px;
}
.bigbox span {
font-size: 18px;
color: red;
}
.bigbox .z {
position: absolute;
top: 5px;
left: 30px;
text-align: center;
width: 20px;
height: 20px;
color: white;
background-color: red;
border-radius: 10px;
}
</style>效果:
2.CSS 精灵:
- CSS 精灵，也叫 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position 精确的定位出背景图片的位置。
- 优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度
- 实现步骤：
1.创建盒子，盒子尺寸与小图尺寸相同
2.设置盒子背景图为精灵图
3.添加 background-position 属性，改变背景图位置
3.1 使用 PxCook 测量小图片左上角坐标
3.2 取负数坐标为 background-position 属性值（向左上移动图片位置）
标签代码:
<div class="map"></div>
<div class="wj"></div>
<div class="d"></div>
<div class="k"></div>
<div class="h"></div>
<div class="s"></div>样式代码:
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.map {
width: 205px;
height: 154px;
background-image: url("img/icon.png");
background-position: 0 0;
}
.wj {
width: 100px;
height: 30px;
background-image: url("img/icon.png");
background-position: -204px -75px;
}
.d {
position: absolute;
top: 0;
right: 0;
width: 38px;
height: 42px;
background-image: url("img/icon.png");
background-position: 0 -192px;
}
.k {
position: absolute;
top: 42px;
right: 0;
width: 38px;
height: 42px;
background-image: url("img/icon.png");
background-position: -40px -192px;
}
.h {
position: absolute;
top: 84px;
right: 0;
width: 38px;
height: 42px;
background-image: url("img/icon.png");
background-position: -81px -192px;
}
.s {
position: absolute;
top: 126px;
right: 0;
width: 38px;
height: 42px;
background-image: url("img/icon.png");
background-position: -122px -192px;
}
</style>效果:
icon.png图片
3.CSS 修饰属性:
1.垂直对齐方式 vertical-align
- 属性名：vertical-align
- 属性值:
| 属性值 | 效果 |
| baseline | 基线对齐(默认) |
| top | 顶部对齐 |
| middle | 居中对齐 |
| bottom | 底部对齐 |
2.过渡 transition
- 作用：可以为一个元素在不同状态之间切换的时候添加过渡效果
- 属性名：transition（复合属性）
- 属性值：过渡的属性 花费时间 (s)
- 提示：
1. 过渡的属性可以是具体的 CSS 属性
2. 也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）
3. transition 设置给元素本身
3.透明度 opacity
- 作用：设置整个元素的透明度（包含背景和内容）
- 属性名：opacity
- 属性值：0 – 1
0：完全透明（元素不可见）
1：不透明
0-1之间小数：半透明
4.光标类型 cursor
- 作用：鼠标悬停在元素上时指针显示样式
- 属性名：cursor
- 属性值:
| 属性值 | 效果 |
| default | 默认值，通常是箭头 |
| pointer | 小手效果，提示用户可以点击 |
| text | 工字型，提示用户可以选择文字 |
| move | 十字光标，提示用户可以移动 |
标签代码:
<div class="box">
<img src="./img/猫.jpg" alt="" />
垂直居中对齐
</div>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<img src="./img/猫.jpg" alt="" class="cat" />
<button>小刘</button>样式代码:
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 150px;
height: 200px;
/* line-height: 200px;只对文本有用，与图片无关 */
line-height: 200px;
background-color: sandybrown;
}
.box img {
width: 30px;
vertical-align: middle;
}
table,
tr,
td {
border: 1px solid black;
border-collapse: collapse;
}
td {
width: 100px;
height: 100px;
text-align: right;
vertical-align: bottom;
}
.cat {
width: 100px;
/* 动画过渡效果：all所有属性 时间1s */
transition: all 2s;
}
.cat:hover {
width: 200px;
/* transform: rotate(45deg);---旋转45度 */
transform: rotate(45deg);
}
button {
width: 100px;
height: 50px;
border: none;
transition: all 2s;
}
button:hover {
background-color: burlywood;
border-radius: 10px;
/* transform:css动画
scale(3)---放大3倍
translateX(100px)---向右平移100px
translate(50px, -50px)---向右平移50px，向上平移50px*/
transform: scale(3) translateX(100px) rotate(360deg);
color: white;
}
</style>效果:
1515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
