CSS高级技巧

奕翎
172 阅读10分钟

CSS高级技巧

精灵图

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度

因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称 CSS Sprites 、CSS 雪碧）

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

使用精灵图核心：

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

使用精灵图核心总结：

  1. 精灵图主要针对于小的背景图片使用
  2. 主要借助于背景位置来实现---background-position
  3. 一般情况下精灵图标都是负值（千万注意网页中的坐标：x轴右边走是正值，左边走是负值，y轴同理）

字体图标

字体图标的使用场景：主要用于显示网页中通用、常用的小图标

精灵图是有诸多优点的，但是缺点很明显：

  1. 图片文件还是比较大
  2. 图片本身放大和缩小都会失真
  3. 一旦图片制作完毕想要更换非常复杂

此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体

字体图标的优点：

  • 轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器请求

  • 灵活性：本质其实就是文字，可以很随便的改变颜色、产生阴影、透明效果、旋转等

  • 兼容性：几乎支持所有的浏览器，请放心使用

注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化

总结：

  1. 如果遇到一些结构和样式比较简单的小图标，就用字体图标
  2. 如果遇到一些结构和样式复杂一点的小图片，就用精灵图

字体图标的加载原理：

Snipaste_2022-09-07_19-36-00.png

Snipaste_2022-09-07_19-36-19.png

只向服务器请求了一次

字体文件格式

不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件

  1. TureType(.ttf)格式

.ttf字体是Windows和Mac的最常见的字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+

  1. Web Open Font Format(.woff)格式

.woff字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+

  1. Embedded Open Type(.eot)格式

.eot字体是IE专用字体，支持这种字体的浏览器有IE4+

  1. SVG(.svg)格式

.svg格式是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+

字体图标是一些网页常见的小图标，我们直接网上下载即可，因此使用可以分为：

  1. 字体图标的下载
  2. 字体图标的引入（引入到我们html页面中）
  3. 字体图标的追加（以后添加新的图标）

字体图标的下载

推荐下载网站：

icomoon

icomoon 字库 icomoon.io

icoMoon成立于2011年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使它们成一字型，该字库内容种类繁多非常全面，唯一的遗憾是国外服务器，打开网速较慢

  • 进入网址
  • 点右上角 **IcoMoon App ** 紫色图标
  • 单击挑选想要的字体图标
  • 还可以点左下角 Add Icons From Library... 红色图标进行挑选
  • 中间有个铅笔图标可以对选中字体图标进行编辑
  • 挑选完后点击右下方 Generate Font 图标下载到本地
iconfont

这个是阿里妈妈M2UX的一个iconfont 字体图标字库，包含了淘宝图标和阿里妈妈图标库，可以使用AI制作图标上传生成

字体图标的引入

icomoon
  • 解压压缩包
  • 将 fonts 文件夹放到页面的根目录下（一定注意字体文件路径的问题）
  • 在CSS样式中全局声明字体：简单理解把这些字体文件通过CSS引入到我们页面中，在文件中找到 style.css 文件，复制一份即可

Snipaste_2022-09-07_19-12-47.png

<style>
    /* icomoon字体图标的引入 */
    @font-face {
        font-family: 'icomoon';
        src: url('fonts/icomoon.eot?etgs7y');
        src: url('fonts/icomoon.eot?etgs7y#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?etgs7y') format('truetype'),
            url('fonts/icomoon.woff?etgs7y') format('woff'),
            url('fonts/icomoon.svg?etgs7y#icomoon') format('svg');
        font-weight: normal;
        font-style: normal;
        font-display: block;
    }
</style>

字体图标的使用

icomoon
  • 打开文件中的 demo.html 文件，找到想要的字体图标复制后面的小框框粘贴使用即可
  • 给字体设置font-family: 'icomoon';

字体图标的追加

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中

icomoon
  • 进入网址
  • 点右上角 **IcoMoon App ** 紫色图标
  • 单击左上角 Import Icons 紫色图标
  • 选择文件中的 selection.json 文件导入
  • 选择新的图标下载
  • 将原来的文件进行替换

CSS三角

网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标

一张图，你就直到CSS三角是怎么来的了，做法如下：

Snipaste_2022-09-07_21-48-15.png

div {
    width: 0;
    height: 0;
    line-height: 0; //照顾低版本浏览器，防止出现兼容性问题
    font-size :0;  //照顾低版本浏览器，防止出现兼容性问题
    border: 50px solid transparent;
    border-left-color: pink;
}

CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验

  • 更改用户的鼠标样式
  • 表单轮廓
  • 防止表单拖拽

鼠标样式 cursor

li {cursor: pointer; }

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

属性值描述
default小白 默认
pointer小手
move移动
text文本
not-allowed禁止

轮廓线 outline

给表单添加outline: 0;或者outline: none;样式之后，就可以去掉默认的蓝色边框

input {outline: none; }

防止拖拽文本域 resize

实际开发中，我们文本域右下角是不可拖拽的

textarea{ resize: none;}

注意：文本域最好放在一行上写，中间不要有空格，不然文本域内部会有空隙

vertical-align属性的应用

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

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效

在对div盒子设置vertical-align属性时，可以提前将盒子转换为行内块元素

语法：

vertical-align: baseline | top | middle | bottom
值描述
baseline默认 元素放置在父元素的基线上
top把元素的顶端与行中最高的元素的顶端对齐
middle把此元素放置在父元素的中部
bottom把元素的顶端与行中最低的元素的顶端对齐

Snipaste_2022-09-10_20-56-39.png

图片、表单都属于行内块元素，默认的vertical-align是基线对齐

Snipaste_2022-09-10_21-09-16.png

此时可以给图片、表单着行内块元素的**vertical-align属性设置为middle**就可以让文字和图片或表单垂直居中对齐了

解决图片底部默认空白缝隙问题

bug：图片底部会有一个空白缝隙，原因是行内块元素会和文字的基线对齐

主要的解决方法有两种：

  1. 给图片添加vertical-align: middle | top | bottom;等（提倡使用的）
  2. 把图片转换为块级元素display :block;

溢出的文字省略号显示

单行文本溢出省略号显示

必须满足三个条件：

/*1.先强制一行内显示文本*/
white-space: nowrap; （默认 normal 自动换行）
/*2.超出的部分隐藏*/
overflow: hidden;
/*3.文字用省略号替代超出的部分*/
text-overflow: ellipsis;

多行文本溢出省略号显示

多行文本溢出显示省略号，有较大的兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webKit内核）

overflow: hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
dsiplay: -webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp: 2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient: vertical;

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单

常见布局技巧

margin负值巧妙运用

Snipaste_2022-09-10_21-46-05.png

让每个盒子margin 往左移动 -1px 正好压住相邻盒子边框

Snipaste_2022-09-10_21-46-13.png

鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有加定位，则加相对定位（保留位置），如果有定位，则加z-index）

文字围绕浮动元素巧妙运用

Snipaste_2022-09-10_21-56-40.png

巧妙运用浮动元素不会压住文字的特性

Snipaste_2022-09-10_21-57-17.png

Snipaste_2022-09-10_21-57-27.png

Snipaste_2022-09-10_21-57-37.png

行内块的巧妙运用

Snipaste_2022-09-10_22-11-51.png

CSS三角巧妙运用

Snipaste_2022-09-10_22-27-59.png

原理：

Snipaste_2022-09-10_22-28-13.png

实现步骤：

  • div {
    width: 0;
    height: 0;
    line-height: 0; //照顾低版本浏览器，防止出现兼容性问题
    font-size :0;  //照顾低版本浏览器，防止出现兼容性问题
    border-top: 50px solid pink;
    border-right: 50px solid skyblue;
    border-bottom: 50px solid blue;
    border-left: 50px solid green;
}

Snipaste_2022-09-10_22-28-54.png

  • 将底部边框宽度改成0

Snipaste_2022-09-10_22-29-07.png

  • 将顶部边框宽度改成100px

Snipaste_2022-09-10_22-29-25.png

  • 将左侧边框宽度改成0

Snipaste_2022-09-10_22-29-55.png

  • 将顶部边框颜色改为transparent

Snipaste_2022-09-10_22-30-12.png

代码：

div {
    width: 0;
    height: 0;
    line-height: 0; //照顾低版本浏览器，防止出现兼容性问题
    font-size :0;  //照顾低版本浏览器，防止出现兼容性问题
    border-color: transparent skyblue transparent transparent;
    border-style: solid;
    border-width: 100px 50px 0 0;
}

CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容性，我们需要对CSS初始化

简单理解：CSS初始化是指重设浏览器的样式（也称CSS reset）

每个网页都必须首先进行CSS初始化

下面以 京东css初始化代码为例

/*把我们所有标签的内外边距清零*/
* {
    margin: 0;
    padding: 0
}

/*em和i斜体的文字不倾斜*/
em,
i {
    font-style: normal
}

/*去掉li的小圆点*/
li {
    list-style: none
}

/**/
img {
    /*照顾低版本浏览器 如果图片外面包含了链接会有边框的问题*/
    border: 0;
    /*取消图片底侧有空白缝隙的问题*/
    vertical-align: middle
}

button {
    /*当我们鼠标经过button的时候 鼠标变成小手*/
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /*抗锯齿性 让文字显示得更加清晰*/
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    /*"\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好*/
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}

/*清除浮动*/
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

Unicode编码字体：

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码的时候出现乱码的问题

比如：

  • 黑体： \9ED1\4F53
  • 宋体： \5B8B\4F53
  • 微软雅黑： \5FAE\8F6F\96C5\9ED1
avatar
文章
阅读
粉丝