定位
定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式。
边偏移则决定了该元素的最终位置
定位模式决定元素的定位方式,它通过CSS的position属性来设置,其值可以分为4个:
边偏移,就是定位的盒子移动到最终的位置
有top、bottom、left、right4个属性
相对定位relative
相对定位是元素在移动位置的时候,是相对于它原来的位置来说的
语法:
选择器 {position: relative;}
相对定位的特点:
- 它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)
- 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对它。(不脱标,继续保留原来位置)
参照物是原来的自己
绝对定位 absolute
绝对定位是元素在移动位置的时候,是相对于它的祖先元素来说的
语法:
选择器 {position: absolute;}
绝对定位的特点:
- 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位
- 如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置
- 绝对定位不再占有原先的位置(脱标 )
子绝父相
子级是绝对定位的话,父级要用相对定位
相对定位经常用来作为绝对定位的父级
因为父级需要占有位置,因此是相对定位
子盒子不需要占有位置,因此是绝对定位
当然,不是一层不变的,其他情况也可能会遇到。只是子绝父相比较常见
参照物是祖先元素
固定位置fixed
固定位置是元素 固定浏览器可视区的位置。主要使用场景:可以在浏览器页面滚动时元素的位置不会改变
语法:
选择器 {position: fixed;}
固定定位的特点:
- 以浏览器的可视窗口为参照点移动元素
- 跟父元素没有任何关系
- 不随滚动条滚动
- 固定定位不再占有原先的位置
类似于固定在顶部的tableView的section
粘性定位 sticky
粘性定位可以被认为是 相对定位和固定定位的混合
语法:
选择器{position: sticky; top: 10px;}
粘性定位的特点:
- 以浏览器的可视窗口为参照点移动元素(固定定位特点)
- 粘性定位占有原先的位置(相对定位特点)
- 必须添加top、left、right、bottom其中一个,才有效
定位叠放次序 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>