子匠_Zijor | 前端开发 / 程序媛 / 潜心学艺。

分类:CSS & CSS3

使用JS控制伪元素的几种方法

一. 缘由:

本文源于在OSC社区中,有人提问如何用jq获取伪元素。我第一想法是强大的CSS Query应该可以获取伪元素吧。

然而事实上,CSS Query并不能。即我们不能通过$(“:before”)、$(dom).find(“:before”)或document.querySelector(“:be…

+ 阅读更多

:before和:after伪元素的常见用法总结

1. 利用content属性,为元素添加内容修饰:

1) 添加字符串:

使用引号包括一段字符串,将会向元素内容中添加字符串。栗子:

a:after { content: "after content"; }

2) 使用attr()方法,调用当前元素的属性的值:

栗子:

a:after { content: attr(href); }
a:after { content: attr(data-attr); }

3)使用url()方

+ 阅读更多

环形进度条的实现方法总结和动态时钟绘制(CSS3、SVG、Canvas)

缘由:

在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度【效果如下图所示】,且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”。当时第一…

+ 阅读更多

CSS3滤镜特效增强效果

CSS3滤镜种类

CSS3 Filters滤镜效果共有十种特效,分別是:

CSS Filter 特效名称
grayscale 灰度
sepia 褐色老照片色
saturate 饱和度
hue-rotate 色相旋转
invert 反色
opacity 透明度
brightness 亮度
contrast 对比度
blur 模糊
drop-shadow 阴影

语法

elm {
    filter: none | <filter-function > [ <filter-function>
+ 阅读更多

使用srcset + sizes + w标识符实现响应式图片

Tencent前端笔试题竟然考了3道关于srcset + sizes + w标识符实现响应式图片的不定项选择题,当时就蒙了,完全没接触过这种方法来实现响应式图片呐。在此之前的记忆和实践中,一般都是用media query有时还会配合JavaScript判断来实现按屏幕宽度加载相应图片,但是遇到高分屏的情况就比较鸡肋,记得工作室网站当时就直接放弃了兼容高分屏。

考完以后,开始疯狂…

+ 阅读更多

CSS中超链接伪类link,visited,hover,active的顺序分析

超链接标签的CSS伪类包括link,visited,hover,active。

1. a伪类解释:

link:设置a对象在未被访问前的CSS样式;

visited:设置a对象在其链接地址已被访问过时的CSS样式;

hover:设置对象在其鼠标悬停时的CSS样式;

active:设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的CSS样式;

2. a伪类的顺序研究

鼠标经过的“未访问链接”同时拥有a:l…

+ 阅读更多

CSS中字体单位em,rem,px,pt 总结

px

px是pixel缩写,是基于像素的单位。根据显示器的分辨率来确定长度,像素是相对于显示器屏幕分辨率而言的。譬如,windows用户所使用的分辨率一般是96像素/英寸,而mac用户所使用的分辨率一般是72像素/英寸。

pt

pt是point(磅)缩写,是一种固定长度的度量单位,大小为1/72英寸。

em

em:是相对于其父元素来设置字体大小的。

这样就会存在一个问题,进行任何元素设置…

+ 阅读更多

Normalize.css和Reset CSS的区别

Normalize.css 简介

github:http://necolas.github.io/normalize.css/

浏览器支持情况:Chrome, Firefox, Opera, Safari 6+, IE 8+;

Reset CSS 简介

Eric的Reset CSS:http://meyerweb.com/eric/tools/css/reset/

CSS Reset到Normalize.css的历史

为什…

+ 阅读更多

IE Hacks 学习笔记汇总

选择器 Hacks

  • html .selector // 仅IE4~6支持;

*+html .selector // 仅IE7标准模式和IE8兼容模式(IE7标准)支持;

*:first-child+html #selector // 仅IE7标准模式和IE8兼容模式(IE7标准)支持;

html>body #selector // 除IE6及其以下版本浏览器以外,所有浏览器都支持;

html>/**/body .selector…

+ 阅读更多

CSS3选择器 学习总结

之前学CSS和jQuery的时候做过一点CSS选择器的笔记。现在拿出来再看一遍,发现又忘记了不少。于是决定把它贴出来,方便以后查阅。

参考地址:

CSS选择器分类:http://www.w3.org/TR/css3-selectors/

CSS选择器的浏览器支持:http://labs.qianduan.net/css-selector/

选择器种类

一. 基本选择器

选择器 描述 CSS版本
* 选择全部元素 2
E 选择全
+ 阅读更多

针对IE6下的bug处理方法 汇总(持续更新中…)

IE6的条件注释语句:

<!-- [if IE6]>
    <link href="ie6.css" rel="stylesheet" type="text/css">
<![endif]-->

不支持PNG图片透明度

问题:

PNG文件格式最大的优点是支持alpha透明度。…

+ 阅读更多

CSS伪元素选择器 总结

伪元素主要有以下六个:

::first-line

::first-letter

::after

::before

::selection

::backdrop

有时你会发现伪元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类和伪元素。大多数浏览器都支持这两种表示方式。只有 ::selection 永远只能以两个冒号开头(::)。

::first-line

:first-line用于向文本的首行…

+ 阅读更多

用float clear和BFC清除浮动 学习总结

CSS定位机制有三种,分别是普通流、浮动和绝对定位。浮动能很好地完成一些布局,在页面布局中的地位举足轻重,但也随之带来了不少的副作用,让人即爱又恨。如能消除浮动带来的副作用,浮动还是十分好用的一种布局方式。所谓的清除浮动,目的基本上都是为了消除浮动带来的副作用,常用的清除浮动的方法有CSS clear闭合浮动和触发浮动元素父元素的BFC来闭合浮动。

浮动的工作原理

浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响…

+ 阅读更多

BFC布局 学习总结

一. w3c规范中的BFC定义:

“浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文)。

在BFC中,盒子从顶端开始垂直地一个接一个地排列,两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中…

+ 阅读更多

CSS等高布局的实现方法

等高布局目前最流行的方法就是集“隐藏容器溢出”、“正内补丁”和“负内补丁”于一身的方法,有木有不明觉厉的赶脚?抛开这些乱七八糟的专有名词,其实就是比较常规的布局而已。

方法1:“隐藏容器溢出”+“正内补丁”+“负内补丁”

实现方法

给需要等高布局的元素用padding-bottom来填充,然后用margin-bottom来消除pa…

+ 阅读更多

三栏布局:”两边固定中间栏宽度自适应” 的实现方法

系列文章:《两栏布局:一栏固定宽度另一栏自适应 的实现方法
本文主要是总结三栏布局中的“中间栏固定宽度两边自适应”的布局方法。

方法1:两边绝对布局,中间使用margin

HTML代码:

<div class="parent">
    <div class="main">
    <div class="left">
    <div class="right">
</div>

CSS代…

+ 阅读更多

两栏布局:一栏固定宽度另一栏自适应 的实现方法

响应式页面布局的迅速普及,一栏固定宽度另一栏自适应宽度的需求比较常见。是时候mark down一下了。

假如我们要实现左右两栏布局,左栏固定宽度,右栏宽度自适应。以下是一些常用的实现方法。

方法1. 左浮动 + margin

固定宽度栏定义左浮动并固定宽度,以使自适应宽度栏div.main能浮动起来;通过定义自适应宽度栏的margin-left等于固定栏的宽度,使视觉上左右两栏分离。
HTML代码:

<div 
+ 阅读更多

line-height:1.5、1.5em与150%的区别

先来栗子感受下这两者的视觉区别:

line-height: 1.5

我的行高是1.5
我的行高是1.5

line-height: 150%

我的行高是150%
我的行高是150%

line-height: 1.5em

我的行高是1.5em
我的行高是1.5em

结论

当父元素的行高为150%或1.5em时,会根据父元素的字体大小先计算出行高值然…

+ 阅读更多

CSS实现水平垂直居中布局的方法 总结

居中的美感置于当下亦不为过时。元素的居中对齐,能起到视觉聚焦的作用和避免处女座抓狂。在页面重构中,遇到最多的布局需求就是元素居中,因此作此总结。
假设以下实例的HTML代码均为:
HTML:

<div class="parent">
    <div class="current"></div>
</div>

一. 已知宽度

+ 阅读更多

CSS盒模型 知识点总结

SS盒模型描述了在文档树中的元素中通过CSS可视化格式模型(visual formatting model)进行布局的矩形盒子;

盒类型:
块级元素、内联元素、内联块级元素;
常用的块级元素有:div, p, h1~6, ol, ul, table, address, blockquote, form;
常用的内联元素:a, span, br, i, em, strong, q, cite, code;
常见的内联块级元素有:img, input…

+ 阅读更多

CSS层叠和特殊性

层叠的重要度次序从高到低:

标有!important的用户样式;

标有!important的作者样式;

作者样式;

用户样式;

浏览器/用户代理应用的样式。

特殊性

为了计算规则的特殊性,CSS给每种选择器都分配了一个数字值。然后将每个选择器的特殊性的值相加计算出其总的特殊性。这保证了特殊的选择器不会被一般选择器的样式所覆盖。

选择器的特殊性分为4个等级:a, b, c, d:

如果是行内样式,a=1;其余情况a=0;

如果是ID…

+ 阅读更多

透明背景兼容性处理

可使用opacity属性、rgba或者png图片实现透明背景。

使用opacity

譬如:
opacity:0.8 // 取值范围为0~1;针对新版本浏览器;

filter:alpha(opacity=80) // 取值范围为0~100;针对IE

使用rgba

其中,rgba中的a表示alpha透明度,取值为0~1。

譬如:

background-color:rgba(0, 0, 0, 0.8);或者background-color:rgba(#…

+ 阅读更多