CSS学习笔记（六）

最新推荐文章于 2024-07-19 15:50:46 发布

沈辞-

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量67

点赞数

文章标签： css 学习前端

本文链接：https://blog.csdn.net/weixin_51178398/article/details/130041044

版权

一.精灵图

1.为什么需要精灵图
为了减少服务器接受和发送图片请求的次数，提高页面的加载速度，出现了CSS精灵原理。
核心原理：将网页中的一些小的背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

2.精灵图的使用
（1）精灵技术主要针对于背景图片的使用，就是把多个小背景图片整合到一张大图片中
（2）这个大图片称为sprites精灵图，或雪碧图
（3）移动背景位置图片，此时可以使用background-position
（4）移动的距离就是这个目标图片的x和y坐标，注意网页中坐标有所不同
（5）一般情况精灵图都是负值
（6）使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

二.字体图标

1.字体图标的产生
精灵图文件比较大；一旦图片制作完成更换比较复杂；
字体图标为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质是字体

2.字体图标的优点
（1）轻量型：一个字体图标要比一系列的图像小很多
（2）兼容性：几乎支持所有浏览器
（3）灵活性：本质是文字，可以随意更改颜色，透明效果等
结构和样式简单的小图标，就用字体图标
结构和样式复杂的小图片，使用精灵图

3.使用
字体图标下载->字体图标引入->字体图标追加
阿里iconfont字库

三.CSS三角

div{
	width:0;
	height:0;
	line-height:0;
	font-size:0;
	border: 50px solid transparent;
	border-left-color:pink;
}

四.CSS用户界面样式

1.更改用户的鼠标样式
语法格式li{ cursor： pointer； }
小白（默认）：default
小手：pointer
移动：move
文本：text
禁止：not-allowed

2.轮廓线
给表单添加outline：0;或者outline：none样式之后，就可以取消默认的蓝色轮廓
代码格式：input {outline：none }

3.防止拖拽文本域
语法格式：textarea{ resize：none；}

五.vertical-align属性应用

CSS的vertical-align属性使用场景：经常用于设置图片或者表单和文字垂直对齐，只针对于行内元素或者行内块元素

1.图片、表单、文字对齐
语法格式：vertical-align：baseline | top | middle | bottom
默认，基线对齐：baseline
顶线对齐：top
中线对齐：middle
底线对齐：bottom

2.解决图片底部默认空白缝隙问题
bug：图片底部会有一个空白缝隙，原因是行内块元素会和文字的基线对齐
解决：
①给图片添加vertical-align： top | middle | bottom（提倡使用）
②把图片转换为块级元素

六.溢出的文字省略号显示

1.单行文字溢出显示省略号
强制一行内显示文本：white-space：nowrap；（默认normal自动换行）
超出部分隐藏：overflow：hidden；
文字用省略号替代超出的部分：text-overflow：ellipsis；

2.多行文本溢出显示省略号（有较大的兼容性问题）
超出部分隐藏：overflow：hidden；
文字用省略号替代超出的部分：text-overflow：ellipsis；
弹性伸缩盒子模型显示：display：-webkit-box；
限制在一个块元素显示的文本的行数：-webkit-line-clamp：2；
设置或检索伸缩盒对象的子元素的排列方式：-webkit-box-orient：vertical；