分类: CSS/CSS3
CSS预处理---Less使用案例
前言示例12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152@import "../../assets/less/common";.countDownAd { &:extend(.flexLayout); padding: 30rem /
CSS3媒体查询@media功能使用总结
前言 媒体查询包含一个可选的媒体类型和零或多个表达式来限制使用媒体特性的样式表范围，这些表达式会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备的类型以及所有的表达式的值都是true，那么该媒体查询的结果就是true。例如width，height，color。CSS3中的Media queries让内容的呈现可以只针对特定范围的输出设备而不必去改变内容本身。
CSS中a:link、a:visited、a:hover、a:active的使用总结
前言伪类 伪元素 区别 可以理解为：伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到。伪类用一个冒号来表示，而伪元素则用两个冒号来表示。 概述:link 选择器对指向未被访问页面的链接设置样式，即页面初始化加载完成的时候。:visited 选择器用于选取已被访问的链接，即已经访问过的链接。:hover 选择器用于设置鼠标指针浮动到链接上时的样式，即鼠
CSS3的pointer-events属性及典型应用
概念 pointer-events是CSS3中的属性，最常用的有以下两个取值：1pointer-events:none|auto 设置“pointer-events:none”后元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。 应用1 当已经
CSS的颜色空间-Color Name、HEX、RGB、RGBA、HSL、HSLA
前言 通过CSS指定元素颜色是经常遇到的操作。在CSS中有多种表示颜色的方式。其中，RGBA、HSL、HSLA这三个是CSS3中新增的颜色表示方法。CSS提供了很多和color相关的属性，常用的主要有color、background-color、border-color、text-decoration-color等。下面的说明，均以对background-color的赋值为例。 Color
CSS[内容盒模型]和[边框盒模型]的对比分析
盒模型概述 盒模型是CSS中的一个重要概念和组成部分，直接决定了页面的基本布局。下图是一张网上常见的关于CSS盒模型的立体图，很好的解释了盒模型中的基本概念。 不同种类和版本的浏览器对于width, height, padding, border, margin的解析有所不同，导致同样的CSS代码在不同浏览器上有不相同的效果。本文对此进行小结。 所有HTML元素可以看作盒子，在CSS中，”
CSS相关单位(pt,px,PPI,DPI,em,rem)
单位介绍 pt:磅（point），绝对单位，印刷行业常用，等于1/72英寸(即0.03526厘米，1英寸 = 2.54厘米)。 px:像素（pixel），相对长度单位，相对于显示器屏幕分辨率而言。 PPI:像素密度（Pixel Per Inch），每英寸所拥有的像素数量。因此PPI数值越高，即代表显示屏能够以越高的密度显示图像。当然，显示的密度越高，拟真度就越高。 DPI:点数密度（Dot