CSS高级

已于 2023-11-12 11:36:52 修改
阅读量37 收藏
点赞数
文章标签： css html 前端
于 2023-10-28 14:32:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxzx1289/article/details/134089724
版权

1、定位

作用：灵活的改变盒子在网页中的位置
实现： 1.定位模式： position
            2. 边偏移：设置盒子的位置
                           left
                           right
                           top
                           bottom
使用场景：让多个标签在同一个位置实现

​​​​​​1.1相对位置

position: relative

特点： 1、不脱标，占用自己原来位置
            2、显示模式特点保持不变 
            3、设置边偏移则相对自己原来位置移动 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		 <style>
			.div{
				position: relative;
				top:100px;
				left:200px;
				background-color: pink;
				width: 100px;
				height: 100px;
			}
		 </style>
	</head>
	<body>
		<div class="div"></div>
	</body>
</html>

1.2绝对位置

position: absolute
使用场景：子级绝对定位，父级相对定位（ 子绝父相 ）
特点： 1、脱标，不占位
            2、显示模式具备行内块特点
            3、设置边偏移则相对最近的已经定位的祖先元素改变位置
            4、如果祖先元素都未定位，则相对浏览器可视区改变位置 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		 <style>
			 .father{
				 position: relative;
			 }
			.father span{
				position: absolute;
				top:0;
				left:0;
				background-color: pink;
				width: 100px;
				height: 100px;
			}
		 </style>
	</head>
	<body>
		<div class="father">
			<span></span>
		</div>
	</body>
</html>

1.3定位居中

实现步骤：1. 绝对定位
                  2. 水平、垂直边偏移为 50%
                  3. 子级向左、上移动自身尺寸的一半
                        左、上的外边距为 – 尺寸的一半
                        transform: translate(-50%, -50%) 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		 <style>
			.father span{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				width: 100px;
				height: 100px;
				background-color: pink;
			}
		 </style>
	</head>
	<body>
		<div class="father">
			<span></span>
		</div>
	</body>
</html>

1.4固定定位

position: Ũxed
场景：元素的位置在网页滚动时不会改变
特点： 1、脱标，不占位
            2、显示模式具备行内块特点
            3、设置边偏移相对浏览器窗口改变位置 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		 <style>
			.father span{
				position: fixed;
				right: 0;
				top: 0;
				width: 100px;
				height: 100px; 
				background-color: pink;
			}
		 </style>
	</head>
	<body>
		<div class="father">
			<span></span>
		</div>
	</body>
</html>

1.5堆叠层级z-index

默认效果：按照标签书写顺序，后来者居上
作用：设置定位元素的层级顺序，改变定位元素的显示顺序
属性名： z-index
属性值： 整数数字 （默认值为 0 ，取值越大，层级越高） 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		 <style>
			
			.box{ 
				position: absolute;
				width: 100px;
				height: 100px;
				background-color: pink;
				z-index: 1;
			}
			.box2{
				position: absolute;
				width: 100px;
				height: 100px;
				background-color: skyblue;
				left: 100px;
				top: 100px;
				z-index: 2;
			}
		 </style>
	</head>
	<body>
		<div class="box"></div>
		<div class="box2"></div>
	</body>
</html

2、高级技巧

2.1CSS精灵

CSS 精灵，也叫 CSS Sprites ，是一种网页 图片应用处理方式 。把网页中 一些背景图片 整合到 一张图片 文件中，再 background-position 精确的定位出背景图片的位置。
优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度
实现步骤：
1. 创建盒子， 盒子尺寸 与 小图 尺寸 相同
2. 设置盒子 背景图 为精灵图
3. 添加 background-position 属性，改变 背景图位置
    3.1 使用 PxCook 测量小图片 左上角坐标
    3.2 取 负数 坐标为 background-position 属性值（向左上移动图片位置） 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			li{
				list-style: none;
			}
			.service{
				margin: 100px auto;
				width: 1190px;
				height: 42px;
				/* background-color: pink; */
			}
			.service ul{
				display: flex;
			}
			.service li{
				display: flex;
				padding-left: 40px;
				width: 297px;
				height: 42px;
				/* background-color: aqua; */
			}
			.service li h5{
				margin-right: 10px;
				width: 36px;
				height: 42px;
				background: url(./img/sprite.png) 0-192px; ;
			}
			.service li:nth-child(2) h5{
				background-position: -41px -192px;
			}
			.service li:nth-child(3) h5{
				background-position: -82px -192px;
			}
			.service li:nth-child(4) h5{
				background-position: -123px -192px;
			}
			.service li p{
				font-size: 18px;
				color: #444;
				font-weight: 700;
				line-height: 42px;
			}
		</style>
	</head>
	<body>
		<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>
	</body>
</html>

2.2字体图标

字体图标： 展示的是图标，本质是字体
作用：在网页中添加 简单的、颜色单一 的小图标
优点 1、 灵活性 ：灵活地修改样式，例如：尺寸、颜色等
        2、轻量级 ：体积小、渲染快、降低服务器请求次数
        3、兼容性 ：几乎兼容所有主流浏览器
        4、使用方便 ：先下载再使用

2.2.1下载字体

iconfont 图标库： https://www.iconfont.cn/
登录 → 素材库 → 官方图标库 → 进入图标库 → 选图标，加入购物车 → 购物车，添加至项目，确定 → 下载至本地

2.2.2使用字体

1. 引入字体样式表（ iconfont.css ）
2. 标签使用字体图标类名
          iconfont ：字体图标基本样式（字体名，字体大小等等）
          icon-xxx ：图标对应的类名

2.2.3上传矢量图

作用：项目特有的图标上传到 iconfont 图标库，生成字体

上传步骤：上传 → 上传图标 → 选择 svg 矢量图，打开 → 提交 → 系统审核

3、CSS修饰样式

3.1垂直对齐方式

属性名：vertical-align

属性值效果
baseline基线对齐（默认）
top顶部对齐
middle居中对齐
bottom 底部对齐

3.2过度

作用：可以为一个元素在不同状态之间切换的时候添加 过渡效果
属性名： transition （复合属性）
属性值： 过渡的属性 花费时间 (s)
提示：1、 过渡的属性可以是具体的 CSS 属性
           2、也可以为 all （两个状态属性值不同的所有属性，都产生过渡效果）
           3、transition 设置给元素本身 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		 <style>
			.div{
				width: 100px;
				height: 100px;
				background-color: pink;
				transition: all 1s;
			}
			.div:hover{
				width: 500px;
				height: 500px;
				background-color: green;
			}
		 </style>
	</head>
	<body>
		<div class="div">123</div>
	</body>
</html>

3.3透明度

作用：设置 整个元素的透明度 （包含背景和内容）
属性名： opacity
属性值： 0 – 1
            1、0 ：完全透明（元素不可见）
            2、1 ：不透明
            3、0-1 之间小数：半透明

3.4光标类型cursor

作用：鼠标悬停在元素上时指针显示样式

属性名：cursor

属性值效果
default默认值，通常是箭头
pointer小手效果，提示用户可以点击
text工字形，提示用户可以选择文字
move十字光标，提示用户可以移动

大猩猩爱吃薯片
关注
12个CSS高级技巧汇总
12-11
【CSS高级技巧汇总】 1. **使用`:not()`去除菜单边框** 在创建菜单时，我们可以使用`:not()`伪类来简洁地为除最后一个元素之外的所有菜单项添加边框。例如： ```css .nav li:not(:last-child) { border-right: ...
CSS 高级技巧总结(必看)
09-24
掌握CSS高级技巧可以显著提升网页开发的效率和性能，同时使代码更为简洁高效。本文将分享一系列CSS高级技巧，帮助开发者提升开发能力。 首先，利用:not()伪类可以简化边框的应用。传统方法是在每个菜单项添加边框，...
CSS 高级学习教程
天马3798
02-25 523
10.Css 选中样式、滚动条样式。4.Css 字体渐变、背景渐变。2.Css 变量、函数，计算。1.Css 选择器优先级。3.Css Flex 布局。7.Css 与js交互使用。一、CSS 高级学习教程。9.Css 整屏幕布局。8.Css 表格布局。
CSS高级技巧
2301_80063528的博客
02-23 2247
CSS高级技巧
【前端】CSS高级技巧
qq_45764950的博客
11-04 720
将下载包里面的style.cc中的下列代码引入。为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS 雪碧）。把压缩包里面的selection.json重新上传，然后选中自己想要新的图标，重新下载压缩包，并替换原来的文件即可。注意网页中的坐标有所不同（x轴右边走是正值，左边走是负值，y轴上边走是负值，下边走是正值）。注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。字体图标iconfont，展示的是图标，本质属于字体。
精通CSS高级WEB标准解决方案（第三版）笔记
qq_41533224的博客
04-01 1343
精通CSS高级WEB标准解决方案（第三版）笔记
CSS高级篇——阴影
老梁的专栏
10-02 801
阴影可以让元素“浮起来”，盒子（box）和文本都可以用。
CSS高级属性
weixin_45722648的博客
12-15 1212
CSS复合选择器 1、标签指定式选择器 标记指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器两个选择器之间 不能有空格。 2、后代选择器 后代选择器用来选择元素或元素的后代，其写法就是把外层标记写在前边，内层标记下载后面，中间用空格分隔。 当发生嵌套时，内标记就成为外标记的后代。 3、并集选择器 并集选择器是各个选择器通过逗号连接组成，任何...
（六）CSS 高级
weixin_57162892的博客
06-05 444
（六）CSS 高级 1.1 精灵图 1.2 精灵图的使用 2.1 字体图标的产生 2.2 字体图标的优点 2.3 字体图标的下载 3. CSS 三角图形 4.css三角强化 4. CSS 用户界面样式 5. vertical-align 的应用 6. 溢出的文字省略号显示 7. margin 负值巧妙利用 8. 文字围绕浮动元素巧妙运用 9. 行内块元素巧妙运用 10. CSS 初始化......
【Web前端】CSS 高级区块效果
一条晒干的咸鱼的博客
08-31 1934
CSS提供了多种工具和属性，使我们能够创建视觉上引人注目的效果。今天我们继续将深入了解几种高级CSS效果：盒子阴影、滤镜、混合模式和文本背景裁剪，提升网页设计的质感和深度。
【css高级】变量详解
m0_62360527的博客
10-15 1158
使用 CSS 变量方便设计颜色等属性。您可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。
CSS高级知识点
m0_72047330的博客
04-02 1694
这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库，包含了淘宝图标库和阿里妈妈图标库。IcoMoon 成立于 2011 年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使它们成。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
[精通CSS高级Web标准解决方案].CSS.Mastery.pdf
11-12
前端资料
精通CSS高级Web标准解决方案PDF扫描高清版
07-25
《精通CSS：高级Web标准解决方案》是一本专为前端开发者深度探索CSS技术的权威指南，由英国的三位知名Web开发专家尼尔·巴德（Nigel Bardsley）、克里斯·科利森（Chris Collison）和加雷斯·莫尔（Gareth Moore）...
【前端基础】CSS进阶
qq_41413652的博客
11-01 755
目标：掌握复合选择器作用和写法；使用background属性添加背景效果。
第七章利用CSS和多媒体美化页面
2402_83227353的博客
10-29 864
用这个属性可以同时设置列表型属性（list一style-type），列表项图片属性（list-style-image）和列表项位置属性（list-style-position）。border-spacing 属性作用等同于标签属性 cellspacing，即当表格边框独立时（border-collapse 属性等于separate），相邻单元格边框之间的横向和纵向的间距。caption-side 属性设置或检索表格标题在表格的哪一边，此属性必须和表格的caption标签同时使用。
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 2042
【代码】炫酷的登录框!(附源码)
第八章 利用CSS制作导航菜单课后习题
最新发布
2302_80786141的博客
11-01 517
【代码】第八章 利用CSS制作导航菜单课后习题。
CSS高级技巧：精灵图与字体图标实践指南
在CSS高级技巧的学习中，今天我们将深入探讨两个关键主题：精灵图的运用和字体图标技术。首先，让我们来了解精灵图（Sprite）的概念及其在优化网页性能中的作用。 精灵图是一种网页设计技术，通过将多个小图片合并...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值