CSS高级技巧

1、精灵图

为了有效减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(CSS Sprites、CSS雪碧)。精灵技术主要针对于背景图片使用

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

精灵图主要针对小的背景图片使用,主要借助于背景位置实现-background-position。一般情况下精灵图都是负值(X轴右边走是正值,左边走是负值,Y轴同理)

2、字体图标 iconfont

使用于小图标,字体图标展示的是图标本质属于字体

精灵图缺点:图片文件比较大,图片本身放大和缩小会失真,一旦图片制作完毕想要更换非常复杂

字体图标优点

1、字体图标下载

推荐网站:

2、字体图标引入

下载完毕之后,注意原先的文件不要删后面会用

1、把下载包里面的fonts文件夹放入页面根目录下

2、在CSS样式中全局声明字体:简单理解把这些字体文件通过css引入到我们页面,一定注意字体文件路径

字体声明

3、html标签内添加小图标

3、字体图标追加

字体图标不够用了需要添加新的字体图标到原来的字体文件中。

3、CSS三角

为了照顾兼容性会加上中间两行代码

4、CSS用户界面样式

界面样式就是更改一些用户操作样式以提高用户体验

1、鼠标样式cursor

li {cursor: pointer;}

2、轮廓线outline

取消表单轮廓

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

input {outline: none;}

防止拖拽文本域 resize

默认右下角是可以拖拽的

textarea{ resize: none;}

5、vertical-align 属性应用

经常用于设置图片或者表单(行内块元素)和文字垂直对齐。

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

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

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

解决方案·:1、给图片添加vertical-align:middle/top/bottom等

2、把图片转换为块级元素 display:block;

6、溢出的文字省略号显示

1、单行文本溢出显示省略号---必须满足三个条件

2、多行文本溢出显示省略号

7、常见布局技巧

1、margin负值运用

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

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

2、文字围绕浮动元素

给左边图片加上左浮动

3、行内块巧妙运用

给父盒子添加text-align:center;,里面的行内元素行内块元素都会水平居中

4、CSS三角强化

贯穿删除线:text-decoration: line-through;

8、CSS初始化

为了照顾浏览器的兼容需要对CSS初始化,就是重设浏览器样式

把中文的名称用相应的Unicode编码来代替,避免出现乱码。比如黑体\9ED1\4F53,宋体\5B8B\4F53,微软雅黑\5FAE\8F6F\96C5\9ED1

相关推荐
天天扭码16 分钟前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸36 分钟前
4、中医基础入门和养生
前端·后端
kooboo china.39 分钟前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom1 小时前
Fluid:云原生数据加速与管理的简单入门与实战
前端
凉豆菌1 小时前
在html中如何创建vue自定义组件(以自定义文件上传组件为例,vue2+elementUI)
vue.js·elementui·html
鬼面瓷1 小时前
CAPL编程_03
前端·数据库·笔记
帅云毅1 小时前
Web漏洞--XSS之订单系统和Shell箱子
前端·笔记·web安全·php·xss
北上ing1 小时前
同一页面下动态加载内容的两种方式:AJAX与iframe
前端·javascript·ajax
小墨宝2 小时前
js 生成pdf 并上传文件
前端·javascript·pdf
HED2 小时前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能