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

分类:Front End

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

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

1. a伪类解释:

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

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

+ 阅读更多

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

px

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

+ 阅读更多

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/

+ 阅读更多

常用的meta整理笔记

meta标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他…

+ 阅读更多

git 常用命令总结

每个git子命令的文档都可以通过使用git help subcommand、git –help subcommand或者git subcommand –help来查看。

用裸双破折号“–”来分离一系列参数。

Git放在对象库中的对象只有4种类型:块(blob)、目录树(tree)、提交(commit)和标签(tag)。…

+ 阅读更多

搜索引擎优化——SEO 学习笔记

SEO:Search Engine Optimization,搜索引擎优化;

分为:白帽SEO和黑帽SEO;

内容SEO

网站标题、关键字、描述;

网站内容优化;

合理设置Robot.txt文件;

网站地图;

增加外链引用;…

+ 阅读更多

IE Hacks 学习笔记汇总

选择器 Hacks

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

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

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

+ 阅读更多

CSS3选择器 学习总结

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

参考地址:

CSS选择器分类:…

+ 阅读更多

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

IE6的条件注释语句:

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

不支持PNG图片透明度

问题:

PNG文件格式最大的优点是支持alpha透明度。但是IE6并不直接支持PNG透明度,IE7及其以上版本浏览器则支持。…

+ 阅读更多

CSS伪元素选择器 总结

伪元素主要有以下六个:

::first-line

::first-letter

::after

::before

::selection

::backdrop

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

+ 阅读更多

HTML中src和href的区别

老是一不小心就搞混src和href,所以查资料,作此总结。

一. 请求资源类型不同

src:是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素;…

+ 阅读更多

HTML5新增标签 学习总结

最近每次笔试都栽在这上面表示坑shi人啦啦啦~~~~记不住哇,这么多的标签记不住哇~。好吧,吐槽完毕。作为一名志于体面的页面仔,冷静下来,良心发现还是应该好好总结下这个基本知识的。…

+ 阅读更多

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

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

+ 阅读更多

BFC布局 学习总结

一. w3c规范中的BFC定义:

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

+ 阅读更多

CSS等高布局的实现方法

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

+ 阅读更多

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

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

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

+ 阅读更多

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

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

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

+ 阅读更多

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

+ 阅读更多

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

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

+ 阅读更多

浏览器模式和文档模式 学习笔记

模式的触发方式

浏览器根据DOCTYPE是否存在以及使用的DTD声明来选择要启动的文档模式。

混杂模式的触发方式

  1. 没有doctype声明;
  2. 在页面的第一行添加XML声明如"",在IE6下会触发混杂模式;
  3. 前面有空格或注释;

准标准模式的触发方式

  1. 加DOCTYPE声明,比如:
  1. 设置X-UA-Compatible触发;

触发标准模式

文档模式的检测

+ 阅读更多

CSS盒模型 知识点总结

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

盒类型:
块级元素、内联元素、内联块级元素;
常用的块级元素有:div,…

+ 阅读更多

CSS层叠和特殊性

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

标有!important的用户样式;

标有!important的作者样式;

作者样式;

用户样式;

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

特殊性

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

+ 阅读更多

透明背景兼容性处理

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

使用opacity

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

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

+ 阅读更多

SVG绘图(二) —— 渲染满天星辰

看到一些炫酷的动画,总有种好想实现它,但是又无奈于腹中的代码量略少,只好不明觉厉,圆圆的大眼睛里满是对新事物的渴求。

在网页中嵌入动画,过去比较流行采用Falsh、Java…

+ 阅读更多

SVG绘图(一)—— 线条逐帧动态渲染

相信大家都见过这样的神奇技术:一根线条构成的画能自动逐帧描绘自己,特么炫酷。这种技术用Flash和AE等工具来实现的话不算难事,可惜所得文件略大。在本文中,想介绍一种稍微高那么一点逼格的实现方法,用纯codes写。所用到的技术是…

+ 阅读更多

【笔记】SVG性能优化

一. SVG的优化
1. 把一些要重复使用的元素都写在元素里。的子元素在文档解析的时候也不会渲染,只有在引用的时候才渲染,所以这样就可以做到一次解析,处处渲染,而不是每次使用的时候都解析一次,渲染一次,从而提高了SVG的性能。

+ 阅读更多