雷雪松的个人博客

雷雪松的博客，一个优秀的个人技术博客。
-

CSS样式

CSS是指层叠样式表 (Cascading Style Sheets)，CSS样式可以对网页对象的位置排版和布局，支持文本，背景，外观等各种属性的设置，并能够进行初步交互设计，是真正做到网页表现与内容分离的一种样式设计语言。CSS样式主要包括一些常用的CSS样式，CSS技巧和CSS教程。

CSS预处理工具Stylus简介

WEB前端 、

Stylus是一个CSS预处理器，提供一种高效、动态和富有表现力的方式来生成CSS。Stylus 比较激进，利用缩进、空格和换行来减少需要输入的字符。不过同时也兼容CSS语法。下面雷雪松详细的介绍一下如何使用预处理工具Stylus。
阅读原文 »

如何让文本中的 \n 在HTML中换行？

WEB前端

在实际前端开发中，在textarea中用户输入大段文本时，可能会有换行。这时获取到的字符串是\n。在展示的时候如何还原用户输入时的样式呢？可能有的人会说用正则表达式来把\n替换成 HTML 换行标签<br>。有没有更简单的办法呢？答案就是使用CSS的white-space属性。今天雷雪松给大家讲解一下如何让文本中的\n在HTML中换行。
阅读原文 »

移除未使用 CSS 工具 PurgeCSS 详解

WEB前端 、

PurgeCSS 是一个能够通过字符串串对比，来决定移除不不需要的 CSS 的工具。PurgeCSS 通过分析你的内容和 CSS 文件，首先它将 CSS 文件中使用的选择器与内容文件中的选择器进行匹配，然后它会从 css 中删除未使用的选择器，从而生成更小的 CSS 文件。对于 PurgeCSS 的配置因项⽬目不不同⽽而异，它不不仅可以作为 webpack 的插件，还可以作为 postcss 的插件。下面雷雪松就详细得讲解一下移除未使用 CSS 工具 PurgeCSS。
阅读原文 »

Flex 常用属性详解

WEB前端

Flex 是2009年W3C 提出了一种新的方案。Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，可以很方便得给 HTML 元素布局。在 Flex 布局出来之前，主要是通过 CSS 的 float 浮动和 position 定位来布局，在实现一些布局时非常不方便，比如：水平垂直居中，全屏上中下铺满。但是如果使用 Flex 就非常容易。下面雷雪松就详细得讲解一下Flex 常用属性。
阅读原文 »

一段css让全站变灰

WEB前端

为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世通报的深切哀悼，国务院今天发布公告，决定2020年4月4日（明天）举行全国性哀悼活动。很多平台都把网页设置为灰色，表示哀悼。如果立即从设计修图、按设计图代码修改，那工作量是灾难性的。能不能用一段代码解决呢？答案是：有的，CSS3的filter。下面雷雪松带你一起看一下如何只通过一段CSS让全站变灰。
阅读原文 »

前端截图取色工具Snipaste

WEB前端

在Web前端开发中，在写页面CSS样式时经常要用工具去取色来设置字体颜色、背景颜色、边框颜色等等，以还原设计图的最佳效果。今天给大家推荐的取色工具是Snipaste。Snipaste 是一个简单但强大的截图工具，也可以让你将截图贴回到屏幕上！Snipaste 既可以截图也有吸色取色的功能。下面雷雪松就详细的讲解一下前端截图取色工具Snipaste。
阅读原文 »

CSS选择器的优先级

WEB前端

在雷雪松的博客前面的文章已经详细的介绍了CSS选择器和CSS常用的属性和值。下面再讲解一下CSS选择器的优先级。什么叫CSS选择器优先级呢？简单的讲就是浏览器通过CSS选择器组成的匹配规则判断定义的多条CSS指令优先级，决定最忠元素显示的属性值。那下面就具体的看看关于CSS选择器优先级的规则。
阅读原文 »

史上最全的浏览器兼容性问题和解决方案

WEB前端

浏览器兼容性问题是指因为不同的浏览器对同一段CSS代码解析不同导致页面显示效果不统一的情况。一般情况下，我们希望用户无论使用什么浏览器来查看网页效果都应该是一样的。浏览器的兼容性问题是Web前端开发人员经常会碰到的和必须要解决的问题。下面雷雪松整理出来了史上最全的浏览器兼容性问题和解决方案。
阅读原文 »

Web前端开发工程师课程大纲

WEB前端 、、

雷雪松整理出来的一套独一无二的Web前端开发课程。本套Web前端开发课程专门为想励志成为优秀web前端工程师的学习者而总结归纳的，本套Web前端课程舍弃了一些不常用的即将废弃的HTML标签，不适用的前端知识点，重点讲解一些常用的Web前端技巧。不管你对Web前端有基础还是没有基础，只要努力掌握课程中的知识点都可以成为一名优秀的Web前端工程师。
阅读原文 »

HTML基础之常用的语义化命名

WEB前端 、

在WEB前端开发过程中，给文件命名、class和id命名可能是大部分程序员遇到的难题。如何让命名更加清晰容易区分又带有语义化，可能并不简单。合理的文件命名、class和id命名可以使你的代码看起来更加高大上，而且后期也一目了然，方便维护。下面雷雪松带看看我们WEB开发过程中总结的一些HTML常用的语义化命名。
阅读原文 »