这是我参与「第四届青训营 」笔记创作活动的的第十二天
写在前面
以下是我学习CSS过程中的一些CSS的学习笔记记录,主要目的是用于巩固基础知识，方便日后的回看复习。本节内容主要包含CSS里的一些小技巧
精灵图
- 什么是精灵图？
- 把网页里的小的图片（图标等），整合到一张大图去一次发送，从而减少客户端向服务端的请求次数，进而提高页面的加载速度
- 重点
- 对象：主要针对背景图片、小图片等一些不会经常变化的图片
- 应用：框定一个盒子，移动背景图片，使需要的图片显示出来(background-position)
字体图标
- 优点
- 以文字展示图标，方便更改
- 轻量级
- 灵活性
- 兼容性
- 使用
- 下载字体，放入文件夹，link一下，再给个盒子
CSS三角
- 使用：宽高为0，设定边框，会看到一个正方形被分割成四个三角形，此时只要将对应三个设置成透明即可，修改边框宽度可以修改三角形的大小
- 代码示例：
.box { width: 0; height: 0; line-height: 0; font-size: 0; border: 50px solid transparent; border-left-color: pink; }
用户界面样式
- 更改用户的鼠标样式
cursor
| 属性值 | 描述 | | --- | --- | | default | 默认 | | pointer | 小手（点击） | | move | 拖拽 | | text | 文本 | | not-allowed | 禁止 | - 轮廓线
outline- 给表单添加 outline: 0; 或者 outline: none; 样式后，可去掉默认的蓝色边框
- 防止拖拽文本域：
resize: none
vertical-align 属性应用
- 用于设置图片或表单和文字垂直对齐
- 语法格式
vertical-align: baseline | top | middle | bottom; - 属性值
| 值 | 作用 | | --- | --- | | baseline | 默认，把元素放置在父元素的基线上 | | top | 把元素的顶端与行中最高元素的顶端对齐 | | middle | 把元素放置在父元素的中部 | | bottom | 把元素的顶端与与行中最低的元素的顶端对齐 | - 图片底侧空白缝隙解决方案
- 问题原因：图片和文字默认基线对齐，空白缝隙是给文字留位置引起的
- 解决方案
- 改变图片与文字的对齐方式
- 把图片转换为块级元素
溢出的文字省略号显示
- 单行文本
/*1.先强制一行内显示文本*/ white-space: nowrap;/*(默认normal自动换行)*/ /*2.超出的部分隐藏*/ overflow: hidden; /*3.文字用省略号替代超出的部分*/ text-overflow: ellipsis; - 多行文本
div { overflow: hidden; text-overflow: ellipsis; /*弹性伸缩盒子模型显示*/ display: -webkit-box; /*限制在一个块元素显示的文本你的行数*/ -webkit-line-clamp: 3; /*设置或检索伸缩盒对象的子元素的排列方式*/ -webkit-box-orient: vertical; }
写在最后
以上便是我的一些学习笔记，若有不足，欢迎指出
