CSS高级
目录
1、定位
作用：灵活改变盒子在网页中的位置，甚至两个标签重叠显示。例如，实现轮播图。
flex完成结构化布局，但是不能让两个标签重叠显示。
定位可以将两个标签重叠显示。
实现：
1、定位模式： position属性
2、边偏移属性：设置盒子的位置。
- left
- right
- top
- bottom
1.1 相对定位 relative
position: relative
改变标签位置要加边偏移属性。相对位置在标签原来位置的基础上按照边偏移属性进行位置改变。
代码实现
让图片的div可以在文字上面。
<style>
/* 1、改变位置的参照物是 标签自己原来的位置
2、不脱标，占位（图片div挪走后，原来的位置没有被占用）
3、标签显示模式特点，不变（如块级模式仍是块级模式） */
div {
position: relative;
top: 100px;
left : 200px
}
</style>效果
工作中一般不会使用相对定位，因为不脱标的特点导致的。工作中相对定位都是与其他定位模式配合使用的。
1.2 绝对定位 absolute
position: absolute
使用场景：子级元素如何改变，都只会出现在父级元素的内部，不会超出父级的范围。子级绝对定位，父级相对定位（子绝父相）。
代码实现
CSS
<style>
/* 绝对定位：
1、脱标不占位（标签本身的位置会被其他元素占用）
2、绝对定位参照物，先找最近的已经定位的祖先元素。如果所有祖先元素都没有定位，参照浏览器可视区改位置
3、绝对定位显示模式特点改变：宽高生效，具备了行内块的特点 */
/* 子级：展会活动文字 */
.news span {
position: absolute;
top: 0;// 上方
right: 0;//右方
// 总结下来就是右上方
}
/* 父级 */
.news {
position: relative;
}
</style>效果
span是行内块显示模式，设置了宽高不会生效。要想行内块模式的元素的宽高生效，1 设置display为block，2采用子绝父相定位模式。
1.3 定位居中
比如登录/注册窗口居中。
实现步骤：
步骤1、定位：子绝父相（窗口在父级里居中）；绝对定位（窗口在浏览器窗口居中）
步骤2、子级元素的水平、垂直边偏移设置为50%（此时还不是最终的居中效果，需要水平往左挪自己宽度的一半，垂直向上，挪自己宽度的一半）
步骤3、子级向左、上移动自身尺寸的一半
步骤3有两种方法
- 方式1: 加边距实现
- 子级向左、上移动自身尺寸的一半
- 给子级元素加左边距100px，那么子级元素在原来的位置上向右移动100px。相反，子级元素向左移动，则加左边距-100px。同理，子级元素向上移动，那么上边距加-100px。
- 子级向左、上移动自身尺寸的一半
- 方式2 transform写法
- transform: translate(-50%, -50%)
- 推荐方式2，更加方便
代码实现
<style>
img {
// 步骤1 定位方式
position: absolute;
// 步骤2 右移，下移
left: 50%;
top: 50%;
// 步骤3
// 加边距写法
/* margin-left: -265px;
margin-top: -127px; */
// transform写法
transform: translate(-50%, -50%);
}
</style>1.4 固定定位
position: fixed
场景： 元素的位置在网页滚动时不会改变
代码实现
<style>
div {
/* 1、固定定位，脱标，不占位置
2、参照物：浏览器窗口
3、显示模式：行内块模式*/
position: fixed;
top: 0;
right: 0;
}
</style>1.5 堆叠层级 z-index
默认效果: 按照标签书写顺序，后来者居上
作用：设置定位元素的层级顺序，改变定位元素的显示顺序
代码实现
<style>
div {
position: absolute;
}
.box {
/* 取值是整数，默认是0.取值越大显示顺序越靠上 */
z-index: 0;
}
</style>1.6 定位总结
轮播图 子绝父相
固定图 固定定位
2、CSS高级技巧
2.1 CSS 精灵
2.1.1 CSS精灵学习
CSS 精灵，CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position精确定位出背景图片位置。
优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度。
实现步骤：
1、创建盒子，盒子尺寸和小兔尺寸相同
2、设置盒子背景图为精灵图
3、添加background-position属性，改变背景图位置
3.1 使用PxCook测量小图片左上角坐标
3.2 取负数坐标为background-position属性值（向左上移动图片位置）
代码实现
<style>
div {
width: 112px;
height: 110px;
background-color: rgb(247, 230, 232);
background-image: url(./abcd.jpg);
background-position: -256px -276px;
}
</style>2.1.2 案例-CSS精灵-京东服务
京东服务
代码实现
CSS
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.service {
width: 1190px;
height: 42px;
/* background-color: pink; */
margin: 100px auto;
}
.service ul {
display: flex;
}
.service li {
display: flex;
padding-left: 42px;
width: 1190px;
height: 42px;
/* background-color: skyblue; */
}
.service li h5 {
width: 36px;
height: 42px;
/* background-color: pink; */
background-image: url(./sprite.png);
background-position: 0px -192px;
margin-right: 10px;
}
.service li:nth-child(2) h5{
background-position: -41px -192px;
}
.service li:nth-child(3) h5{
background-position: -77px -192px;
}
.service li:nth-child(4) h5{
background-position: -108px -192px;
}
.service li p {
font-size: 18px;
color: #444;
font-weight: 700;
line-height: 42px;
}
</style>HTML
<div class="service">
<ul>
<li>
<h5></h5>
<p>品类齐全，轻松购物</p>
</li>
<li>
<h5></h5>
<p>品类齐全，轻松购物</p>
</li>
<li>
<h5></h5>
<p>品类齐全，轻松购物</p>
</li>
<li>
<h5></h5>
<p>品类齐全，轻松购物</p>
</li>
</ul>
</div>2.2 字体图标
2.2.1 字体图标定义
字体图标：展示的是图标，本质是字体。
作用：在网页中添加简单纯色的小图标
优点：
1.灵活性：灵活修改样式，例如尺寸颜色
2.轻量级：体积小，渲染快，降低服务器请求次数
3.兼容性：几乎兼容所有主流浏览器
4.使用方便：先下载再使用
2.2.2 字体图标-下载字体
iconfont图标库：iconfont-阿里巴巴矢量图标库
下载字体：
2.2.3 字体图标-使用字体
1、引入字体样式表 iconfont.css
<link rel="stylesheet" href="./iconfont/iconfont.css">2、标签使用字体图标类名
2.1 iconfont：字体图标基本样式（字体名，字体大小等）
2.2 icon-xxx: 图标对应的类名
<span class="iconfont icon-xxx"> </span>
例如
<span class="iconfont icon-shouye-zhihui"></span>3、可以自定义字号颜色等
<style>
.iconfont {
font-size: 200px;
color: blue;
}
</style>
iconfont.css自带默认样式，优先级高。
所以修改字体图标大小，注意选择器优先级高于 iconfont类。
2.2.4 字体图标-上传矢量图
作用：项目特有的图标上传到iconfont图标库，生成字体。
上传到iconfont网站。
上传svg图片
一般是去除颜色提交
审核通过就可以下载和使用了。
3、修饰属性
3.1 垂直对齐方式 vertical-align
属性名：vertical-align
给谁加：谁占的高度最大就给谁加，比如一个图片img，一行字。给img图片加vertical-align
属性值：
只要不是基线对齐，图片底部就不会有空白。
vertical-align去掉图片底部的空白，另外一个方法是给图片转显示模式，display: block。
图片底部有空白原因：浏览器把行内块当字处理，基线对齐（行内也是基线处理），块不当字处理，所以就不用基线对齐了，所以就去掉空白了。
3.2 过渡属性 transition
作用: 可以为一个元素在不同状态之间切换的时候添加过渡效果
属性名：transition（复合属性）
属性值：过渡的属性 花费时间(s)
提示：
1、过渡属性可以是具体的CSS属性
2、也可以是all（两个状态属性值不同的所有属性，都产生过渡效果） 最常使用
3、transition设置给元素本身，不是加给元素状态
代码实现
3.3 透明度属性 opacity
作用：设置整个元素的透明度（包含背景和内容）
rgba可以让背景半透明，opacity让背景和内容都半透明
属性名：opacity
加在要改变透明度的元素上。
属性值：0-1
0：完全透明（元素不可见）
1：不透明
0-1小数：半透明
3.4 光标类型 cursor
作用：鼠标悬停在元素上时指针显示样式
属性名：cursor
加在要改变鼠标光标的元素上。
属性值：
4、综合案例-轮播图
1、定位
2、字体图标
3、Flex布局
注意
1、箭头是鼠标放上去的时候显示，鼠标不放上去就不显示。所以用:hover
2、圆点：在图片上方->子绝父相
CSS
<link rel="stylesheet" href="./icon/iconfont/iconfont.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.banner {
position: relative;
width: 564px;
height: 315px;
margin: 100px auto;
overflow: hidden;
}
/* 图片 */
.banner img {
width: 564px;
/* 限制图片的宽 */
border-radius: 12px;
/* 给图片加圆角，而不是.banner */
vertical-align: middle;
/* 只要值不是 基线 就行了 */
}
.banner ul {
display: flex;
}
/* 箭头 */
.banner .prev,
.banner .next {
display: none;
/* 隐藏 */
position: absolute;
top:50%;
transform: translate(0,-50%);
/* 宽高背景色一样 */
width: 20px;
height: 30px;
background-color: rgba(0,0,0,0.3);
text-decoration: none;
color: #fff;
line-height: 30px;
}
/* 用户鼠标划到banner区域，箭头要显示 display:block */
.banner:hover .prev,
.banner:hover .next {
display: block;
}
.banner .prev {
left:0;
border-radius: 0 15px 15px 0;
}
.banner .next {
right:0;
border-radius: 15px 0 0 15px;
text-align: center;
}
/* 圆点 */
.banner ol {
display: flex;
position: absolute;
bottom: 20px;
left: 50%;
transform: translate(-50%);
border-radius: 10px;
height: 13px;
background-color: rgba(255,255,255,0.3);
}
.banner ol li {
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 50%;
margin: 3px;
cursor: pointer;
}
.banner ol .active {
background-color: #ff5000;
}
</style>HTML
<div class="banner">
<!-- 轮播图 ul>li -->
<ul>
<li><a href="#"><img src="./images/banner1.jpg" alt=""> </a></li>
<li><a href="#"><img src="./images/banner2.jpg" alt=""> </a></li>
<li><a href="#"><img src="./images/banner3.jpg" alt=""> </a></li>
</ul>
<!-- 箭头 -->
<!-- 上一张 -->
<a href="#" class="prev">
<i class="iconfont icon-zuoce"></i>
</a>
<!-- 下一张 -->
<a href="#" class="next">
<i class="iconfont icon-zuoce"></i>
</a>
<!-- 圆点 -->
<ol>
<li></li>
<li class="active"></li>
<li></li>
</ol>
</div>
1151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
