从头学前端-CSS基础04

CSS高级技巧

精灵图 css sprites

为了有效减少服务器接收和发送的频率，减轻服务器的压力；将许多的小图片放到一张大图片上去；就是精灵技术，CSS sprites;
精灵技术主要针对背景图片, 精灵图就是一张大的背景图片
使用时主要移动背景图片位置，使用backgroud-position属性
一般情况下都是往上走，往左走，所以backgroud-position的值都是负值
字体图标iconfont

字体图标展示的是图标，本质上是文字；可以改变颜色等属性
字体图标需要下载，下载地址有很多，推荐https://iconfont.cn/
CSS改变鼠标样式：
CSS设置表单轮廓线outline

input {outline: none};
CSS中的vertical-align属性：

可以使图片，表单和文字对齐，垂直居中
只能应用于行内元素和行内块元素；
vertical-align: baseline | bottom | middle | top |
图片默认是基线对齐，会导致图片底侧和边框会有空隙；可

从头学前端-CSS基础04相关推荐

从头学前端-CSS基础01
CSS简介: CSS是层叠样式表的简称,有时也会称之为CSS样式表或级联样式表.CSS也是一种标记语言(和html一样,不是个编程语言): Html主要是页面结构,显示元素内容,CSS是美化页面,布局 ...
从头学前端-CSS基础02
一个工具: 前端快速开发插件Emmet Emmet 的前身就是 Zen Coding. 它是一组专门用来提高编写 HTML 和 CSS 代码速度的便利工具.将它整合进文本编辑器,可以提供一些功能和快捷 ...
从头学前端-CSS基础03
页面布局三大核心,盒子模型,浮动和定位 1.盒子模型盒子模型组成: 盒子模型组成的主要有边框border,外边距margin ,内边距padding,内容content: 边框border: bo ...
从头学前端-35：溢出处理
大家好,我是一碗周,一个不想被喝(内卷)的前端.如果写的文章有幸可以得到你的青睐,万分有幸~ 这是[从头学前端]系列文章的第三十五篇-<溢出处理> 本篇文章介绍CSS中内容溢出的处理,主要 ...
前端——CSS基础学习【part 2】
前端--CSS基础学习[part 2] Emmet CSS的复合选择器 CSS的元素显示模式 CSS的背景 CSS的三大特性 CSS 盒子模型 Emmet 快速生成HTML结构语法 (1)生成标签,输 ...
前端css基础知识点之PC端项目-规范
前端css基础知识点之PC端项目-规范 1 文件管理文件名用英文命名 css文件夹 reset.css(常用的浏览器样式) public.css(公共的样式.比如页面的头部尾部.重复使用字体.字号等 ...
前端css基础知识点之opacity——透明度
前端css基础知识点之opacity--透明度 opacity opacity:num /*num 0到1*/ 兼容性 ie9及以上和标准浏览器都支持特点设置opacity的元素的所有后代会一起具 ...
前端CSS基础之案例--图片
用<前端CSS基础>文章里的内容完成一个图片案例效果展示: 代码实现: <!DOCTYPE html> <html lang="en"> &l ...
前端css基础知识点之sprite——雪碧（精灵）
前端css基础知识点之sprite--雪碧(精灵) css sprite css精灵或css雪碧把网页中一些背景图片整合到一个大文件中,然后利用 background-image.backgroun ...

从头学前端-CSS基础04

CSS高级技巧

从头学前端-CSS基础04相关推荐

最新文章

热门文章