本文详细介绍了CSS中的定位技术，包括相对定位、绝对定位、固定定位和粘性定位，以及它们的特点和应用场景。通过实例展示了如何使用定位实现元素的布局和交互，如淘宝焦点图、元素的显示与隐藏、CSS高级技巧如精灵图和三角形绘制。此外，还探讨了用户界面样式，如更改鼠标样式、表单轮廓和防止拖拽等，以及如何处理文字溢出显示省略号。文章通过多个代码示例帮助读者深入理解和应用CSS定位技术。
定位
定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式。
边偏移则决定了该元素的最终位置
定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为4个：
边偏移，就是定位的盒子移动到最终的位置
有top、bottom、left、right4个属性
static
默认定位
相对定位relative
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的
语法：
选择器 {position: relative;}
相对定位的特点：
- 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对它。（不脱标，继续保留原来位置）
参照物是原来的自己
<p class="positioned">...</p>
.positioned {
position: relative;
background: yellow;
top: 10px;
left: 20px;
}
作用：在原来的位置上，向下移动10px，向右移动20px
绝对定位 absolute
绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的
语法：
选择器 {position: absolute;}
绝对定位的特点：
- 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
- 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
- 绝对定位不再占有原先的位置（脱标 ）
子绝父相
子级是绝对定位的话，父级要用相对定位
相对定位经常用来作为绝对定位的父级
因为父级需要占有位置，因此是相对定位
子盒子不需要占有位置，因此是绝对定位
当然，不是一层不变的，其他情况也可能会遇到。只是子绝父相比较常见
参照物是祖先元素
固定位置fixed
固定位置是元素 固定浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变
语法：
选择器 {position: fixed;}
固定定位的特点：
- 以浏览器的可视窗口为参照点移动元素
- 跟父元素没有任何关系
- 不随滚动条滚动
- 固定定位不再占有原先的位置
类似苹果的手机的辅助小圆球，他就固定在某处，随便滚动，都不变
粘性定位 sticky
粘性定位可以被认为是 相对定位和固定定位的混合
语法：
选择器{position: sticky; top: 10px;}
粘性定位的特点：
- 以浏览器的可视窗口为参照点移动元素（固定定位特点）
- 粘性定位占有原先的位置（相对定位特点）
- 必须添加top、left、right、bottom其中一个，才有效
类似于固定在顶部的tableView的section
定位叠放次序 z-index
就是，在Z轴方向的大小
语法：
选择器 {z-index: value};（value没有单位，比如1即可）
数值越大，越在前面。可以为负数或0
如果属性值相同，则后来者居上
只有定位的盒子，才有z-index属性
其他知识点
-
行内元素添加绝对或者固定定位，可以直接设置高度和宽度
-
块级元素添加绝对或者固定定位，不给宽度高度，默认是内容的大小
-
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）。但是绝对定位（固定定位）会压住下面标准流所有的内容。浮动之所以不会压住文字，因为浮动产生的最初目的：就是为了做文字环绕效果的
-
如果一个盒子既有left属性，又有right属性，则默认执行left属性
-
如果一个盒子既有top属性，又有bottom属性，则默认执行top属性
淘宝焦点图练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" lang="en">
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
.tb-promo {
position: relative;
top: 30px;
left: 50%;
margin-left: -200px;
width: 400px;
height: 200px;
}
.tb-promo img {
height: 100%;
width: 100%;
}
.left, .right {
position: absolute;
top: 50%;
margin-top: -10px;
width: 20px;
height: 30px;
background-color: rgba(0,0,0,0.3);
color: white;
text-align: center;
line-height: 30px;
text-decoration: none;
}
.tb-promo .left {
left: 0;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.tb-promo .right {
right: 0;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.tb-promo .promo-nav {
float: left;
position: absolute;
bottom: 15px;
left: 50%;
width: 70px;
height: 13px;
margin-left: -35px;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 6.5px;
}
.tb-promo .promo-nav li {
float: left;
width: 8px;
height: 8px;
background-color: white;
border-radius: 4px;
margin: 3px;
}
</style>
</head>
<body>
<div class="tb-promo">
<img src="./img/企业微信20220420-165631@2x.png" alt="">
<a href="#" class="left"> < </a>
<a href="#" class="right"> > </a>
<ul class="promo-nav">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
元素的显示与隐藏
1. display
display: none;隐藏对象
display: block;除了转换为块级元素之外，同时还有显示元素的意思
display隐藏元素后，不再占有原来的位置
2. visibility
visibility: visible;元素可见
visibility: hidden;元素隐藏
visibility隐藏元素后，继续占有原来的位置
3. overflow 溢出
什么是溢出呢？
超出元素内容的部分，就是溢出
overflow: visible;溢出部分可见
overflow: hidden;溢出部分隐藏
overflow: scroll;溢出部分显示滚动条，可以滚动查看
overflow: auto;溢出了，溢出部分显示滚动条；不溢出，不显示滚动条
该元素不是针对元素的，而是针对溢出部分的
土豆案例练习
鼠标一经过就出现遮罩与按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" lang="en">
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
position: relative;
width: 444px;
height: 320px;
background-color: green;
margin: 30px auto;
}
.box img {
width: 100%;
height: 100%;
}
.box .mask {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4) url(img/3.1@2x.png) no-repeat center;
}
.box:hover .mask{
display: block;
}
</style>
</head>
<body>
<div class="box">
<div class="mask"></div>
<img src="img/企业微信20220420-165631@2x.png" >
</div>
</body>
</html>
需要注意的是：.box:hover，冒号左右不能留有空格
CSS高级技巧
精灵图
有许多小图，每次频繁请求服务器，但是每次都要一个小图标，太浪费
所以，可以在请求的时候，一下响应发送一张包括很多图标的大图
精灵技术的目的：有效减少服务器接收和发送请求的次数，提高页面的加载速度
比如，这个sprite（精神）精灵图：
那，怎么使用其中的小图标呢？
主要是通过移动背景图片的位置，background-position
使用的时候，可以使用：
background: url(img/sprite.png);
background-position: -182px 0px;
或者简写：
background: url(img/sprite.png) no-repeat -182px 0px;
练习：拼出自己的名字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" lang="en">
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
}
span{
display: inline-block;
}
.a {
width: 115px;
height: 130px;
background: url(img/abcd.jpg) no-repeat 0px 0px;
}
.s {
width: 115px;
height: 130px;
background: url(img/abcd.jpg) no-repeat -250px -410px;
}
.i {
width: 68px;
height: 130px;
background: url(img/abcd.jpg) no-repeat -322px -130px;
}
</style>
</head>
<body>
<span class="a"></span>
<span class="s"></span>
<span class="i"></span>
<span class="a"></span>
</body>
</html>
- 如果遇到一些结构和样式比较简单的小图标，可以用字体图标
CSS三角型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
width: 0px;
height: 0px;
border-left: 100px solid pink;
border-right: 100px solid green;
border-top: 100px solid red;
border-bottom: 100px solid blue;
}
.box1 {
width: 0px;
height: 0px;
margin: 100px auto;
border-left: 100px solid transparent;
border-right: 100px solid rgba(0, 0, 0, 0);
border-top: 100px solid red;
border-bottom: 100px solid rgba(0, 0, 0, 0);
}
</style>
</head>
<body>
<div class="box">
</div>
<div class="box1">
</div>
</body>
</html>
三角形练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.bigBox {
margin: 100px auto;
width: 100px;
height: 100px;
background-color: pink;
position: relative;
}
.arrowBox {
width: 0px;
height: 0px;
margin: 100px auto;
border-left: 10px solid transparent;
border-right: 10px solid rgba(0, 0, 0, 0);
border-top: 10px solid transparent;
border-bottom: 10px solid pink;
position: absolute;
bottom: 0px;
left: 50px;
margin-left: -10px;
}
</style>
</head>
<body>
<div class="bigBox">
<div class="arrowBox">
</div>
</div>
</body>
</html>
CSS用户界面样式
更改一些用户操作样式，以便提高更好的用户体验
- 更改用户的鼠标样式
- 表单轮廓
- 防止表单域拖拽
1. 鼠标样式cursor
li {cursor: pointer};
- 当点击文本框的时候，有颜色，可以使用
input {outline: none;}去除颜色 - textarea多行文本输入的时候，右下角默认有托大变小功能，可以使用
textarea {resize: none;}去掉 <textarea rows="10" cols="22"></textarea>中间不要换行或者留空格，不然输入字段第一个字会有距离变化vertical-align经常用于设置图片或表单和文字垂直（只针对行内元素或行内块元素有效）
解决图片下方留有一点点空白
由于图片与文字默认是baseline模式，所以，默认图片下方会留有一点空白，供文字使用
如果想图片下方没有空白，可以使用如下方法：
方法一(推荐)
使用vertical-align，model除了baseline的任意模式
方法二
图片改为块级元素img {display: block;}
溢出的文字省略号显示
单行文本溢出显示省略号
必须满足三个条件
- 强制一行内显示
white-space: nowrap;(nowrap，不要换行) - 溢出的部分隐藏：
overflow: hidden; - 使用省略号代替超出部分：
text-overflow: ellipsis;
margin-left: -1px;可解决边框重复颜色加深的问题
用上面的方法是可以解决边框重复，但是有个问题，如果有经过边框颜色变换的时候，中间的边框，有一边是不同颜色的
解决方法：
鼠标经过某个盒子的时候，提高当前盒子的层级
如果没有定位，则添加相对定位(position: relative;)
如果有定位，则加z-index(z-index: 1;)
小练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 70px;
background-color: pink;
margin: 10px auto;
padding: 5px;
}
.picBox {
float: left;
width: 120px;
height: 60px;
margin-right: 10px;
}
img {
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="picBox">
<img src="img/img.png" alt="">
</div>
<p>的哈较好的卡号SD卡函数的卡上打卡机还打算科技活动</p>
</div>
</body>
</html>
底部page练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 100px auto;
text-align: center;
}
.box a{
display: inline-block;
width: 36px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid lightgray;
/* text-underline-style: none; */
text-align: center;
line-height: 36px;
text-decoration: none;
color: black;
}
.box a:hover {
list-style: none;
}
.box .pre,
.box .next {
width: 80px;
}
.box .noBorder{
border: none;
background-color: white;
}
.box input {
height: 36px;
width: 45px;
border: 1px solid #ccc;
outline: none;
}
.box button {
width: 60px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="box">
<a href="#" class="pre"><<上一页</a>
<a href="#" class="noBorder">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#" class="noBorder">...</a>
<a href="#" class="next">下一页>></a>
跳转到第
<input type="text" name="" id="" value="" />
页
<button type="button">确定</button>
</div>
</body>
</html>
秒杀新旧价格练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" lang="en">
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
width: 160px;
height: 24px;
line-height: 24px;
border: 1px solid red;
margin: 50px auto;
}
.miaosha {
position: relative;
float: left;
width: 90px;
height: 100%;
background-color: red;
text-align: center;
color: white;
font-size: 17px;
font-weight: 500;
margin-right: 8px;
}
.miaosha i {
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-color: transparent white transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;
}
.origin {
font-size: 12px;
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="box">
<span class="miaosha">
￥1000
<i>
</i>
</span>
<span class="origin">￥2000</span>
</div>
</body>
</html>
扫一扫
2356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
