分类: CSS/CSS3

记录点滴,修炼自己。
0

CSS居中问题总结

前言  本篇集中对CSS中的各种居中问题进行总结。整体上需要居中的元素可以分为两大类-内联元素和块级元素,而居中方式又要考虑水平和垂直两个方向。 内联元素居中水平居中 使用”text-align:center”根据以下W3C的官方文档: 属性“text-align”用于描述块级元素中的行内内容如何布局。我们知道,块级元素的显示占据一整行,而行内元素可以在一行内并列显示,常用的行内元素有<

0

CSS预处理---Less使用案例

前言示例12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152@import "../../assets/less/common";.countDownAd { &:extend(.flexLayout); padding: 30rem /

0

CSS中a:link、a:visited、a:hover、a:active的使用总结

前言伪类 伪元素 区别  可以理解为:伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到。伪类用一个冒号来表示,而伪元素则用两个冒号来表示。 概述:link 选择器对指向未被访问页面的链接设置样式,即页面初始化加载完成的时候。:visited 选择器用于选取已被访问的链接,即已经访问过的链接。:hover 选择器用于设置鼠标指针浮动到链接上时的样式,即鼠

0

CSS3媒体查询@media功能使用总结

前言  媒体查询包含一个可选的媒体类型和零或多个表达式来限制使用媒体特性的样式表范围,这些表达式会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备的类型以及所有的表达式的值都是true,那么该媒体查询的结果就是true。例如width,height,color。CSS3中的Media queries让内容的呈现可以只针对特定范围的输出设备而不必去改变内容本身。

0

CSS3的pointer-events属性及典型应用

概念  pointer-events是CSS3中的属性,最常用的有以下两个取值:1pointer-events:none|auto   设置“pointer-events:none”后元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。 应用1  当已经

0

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

0

CSS[内容盒模型]和[边框盒模型]的对比分析

盒模型概述  盒模型是CSS中的一个重要概念和组成部分,直接决定了页面的基本布局。下图是一张网上常见的关于CSS盒模型的立体图,很好的解释了盒模型中的基本概念。  不同种类和版本的浏览器对于width, height, padding, border, margin的解析有所不同,导致同样的CSS代码在不同浏览器上有不相同的效果。本文对此进行小结。  所有HTML元素可以看作盒子,在CSS中,”

0

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