您现在的位置：首页
--> CSS/HTML
• CSS选择器
选择器是CSS的核心，从最初的元素、class/id选择器，演进到伪元素、伪类，以及CSS3中提供的更丰富的选择器，定位页面上的任意元素开始变得愈发的简单。
CSS 选择器是一种应用于 DOM 节点查找场景的特定微型语法，本质上和正则表达式一样都是一种模式匹配语言，灵活使用可以方便得获取指定位置的节点集合。
目前 W3C 推荐标准为 Selectors Level 3 ，在 ie9+ 以及 firefox，chrome，mobile 等浏览器上原生有基本一致的实现，而在 ie 下则需要使用 javascript 模拟实现，本文介绍一种基于匹配回朔的 css3 选择器引擎实现，特定应用于 ie6，7，8 下。
回顾历史，CSS1于1996.12.17发正式版，它是为辅助HTML的展现效果而生的。 1998.5.12，CSS2发正式版。随后发修订版CSS2.1，纠正了CSS2中的一些错误。注意从CSS2起，CSS的作用就不是辅助展现了，变为全全负责展现。 （注：当年CSS2的勘误表有兴趣可以看看） CSS2.1明确了2个模型，一个是众所周知的盒模型(Box model)，CSS1没有盒模型的概念，盒模型的前身在CSS1里叫做面向盒的格式化模型。元素抽象为盒，以盒为对象设计思路清晰多了。CSS3的盒模型丰富了更多属性。盒的产生，以及盒的定位就是CSS2.1定义的第二个模型－可视格式化模型(Visual Formatting Model)。CSS3相关的布局标准实际上也在这个大的框架之下。
各种浏览器之间的竞争的白热化意味着越来越多的人现在开始使用那些支持最新、最先进的W3C Web标准的设备，以一种更具交互性的方式来访问互联网。这意味着我们终于能够利用更强大更灵活的CSS来创造更简洁，更好维护的浏览器前端代码。现在让我们来看一看一些也许你还不知道的让人兴奋的CSS 功能。
如果你开发web相关应用或者网站的话，肯定知道CSS对于页面布局的重要性。在本篇CSS技巧中我们将介绍页面加载的流程来帮助你更好的实现页面布局...
在分析各个网站的CSS时，我们经常可以看到一些网站有很多的元素共享了一张背景图片，而这张背景图片包含了所有这些元素需要的背景，这种技术就叫做CSS Sprites。这样做有什么好处呢？ 显而易见，浏览器在载入每一张图片的时候都会发起一个HTTP请求。 如果使用CSS Sprites技术，将所有的图片合成一张图片，那么，这样多个HTTP请求会被合成一个HTTP请求。 这样就既能大大降低后台服务器的开销，又能加快网页载入速度。 CSS Sprites原理： CSS Sprites是通过背景图片外加背景图片定位来实现的。
什么是BFC？
BFC(Block Formatting Context)，简单讲，它是提供了一个独立布局的环境，每个BFC都遵守同一套布局规则。例如，在同一个BFC内，盒子会一个挨着一个的排，相邻盒子的间距是由margin决定且垂直方向的margin会重叠。而float和clear float也只对同一个BFC内的元素有效。
项目中常常有同学遇到这样的问题，现象是给元素设置了overflow:hidden，但超出容器的部分并没有被隐藏，难道是设置的hidden失效了吗？ 其实看似不合理的现象背后都会有其合理的解释。
朋友问的，我也顺手研究了一下。从youku等网站下载的flv格式的文件，用传统的SWF网页源码不行，应该是这样。。。。
• CSS基线之道
网页设计布局中一直比较流行网格对齐，但只是针对水平的对齐，很少或者没有涉及垂直对齐，这篇文章很详细的讲解了垂直网格，乃至基线对其的相关，而css3中的多列布局的也使其显得更为重要，因此还是很有必要去了解学习，至少也是一种思路。
前一段某项目中页面在IE6突然出现了乱码，当时做了各种排查，最终推测是使用了HTML5的DOCTYPE和Charset以及中文注释的问题，于是临时采用旧的Charset方法来修复了下，后面乱码再没出现...
CSS3 font-face特性不多介绍了，可以实现漂亮的自定义字体，更能用将图标转换为字体(font-icon)来实现提高图标的质量并兼容各种分辨率。而font-icon的最佳使用环境是移动终端，因为移动终端的屏...
前些天在做一个项目的时候，用到了阴影，阴影是个方向都有的，于是写了一大坨box-shadow来实现，然后今天看到bricss说到filter:drop-shadow，豁然开朗...
大家已经非常熟悉响应式网页设计了吧，但是我们通常会忽略很多旧的没有采用响应式设计的网站，其实这类网站在移动终端的用户体验更为关键——因为它们没有对移动设备做任何优化...
这里驳斥一个观点：“尽量都使用class，因为控制样式的时候class的优先级是同级的，id的优先级更高，它的出现会破坏样式优先级的平衡”。首先我觉得这是一个假命题，所谓的“平衡”是不存在的，也没有必要去刻意维护，通过id来表示的内容一定是相对特殊的，优先级自然高一些，这样的优先级设计是如此的自然。我能够接受的全部是class的适用范围仅是一些底层的css基础样式，如oocss里的基础样式，或很多网站都会有common.css文件或general.css文件，里面的东西尽量用class没问题。
传说Windows 8刚上市没几天就卖出了4000多万份，好厉害。然后我们就发现项目中很多页面在IE10中表现不正常了。有的是之前对各版本ie的hack引发的，有些不确定是否是ie10引出的bug，所以惯性思维让我们重新寻找针对IE10的CSS Hack。。。
Web标志(the mark of the Web)这个细节很有意思，也是我从这本书中学到的知识点。解决的主要问题是：IE浏览器环境下，如果一个网页中需要加载JavaScript文件，则默认安全设置的IE浏览器会弹出对话框，提醒用户是否“允许加载阻止的内容”(IE浏览器将JavaScript脚本列入了安全考虑范围)。点击允许后，才会执行JavaScript代码，这很会影响网站的体验。为了解决此问题，就需要运用Web标志(Mark of The Web)。
• 颜色的代码表达式
知道为什么给色彩命名总是很麻烦吗？因为任何两个人都没法对同一个颜色进行精确的感知和描述——尤其是当他们受到网站自身的情绪或气质影响时。给色彩命名， 最容易被印象所误导。即使像“蓝色”这样的说法也是不确切的。比如为了更准确，可以说是“天蓝”，“海蓝”，“牛仔蓝”或是“电焊火光蓝(arc welder blue)”。
之前的一篇文章JS判断从哪个方向判断进入一个容器中提到了一个效果，通过计算鼠标位置以及一些数学方法，来判断鼠标是从哪个方向进入以及离开该容器的。今天我这里搜索到一个不错的实战效果，分享给大家。是基于jquery的一个插件。该效果出品人是老外，原文地址 该效果用到的几点技术，一个是css3的动画效果，这里不是采用的js的动画效果，所以兼容性存在不足。另外就是之前提到的针对进入方向的判断。
记得我有篇博文是写用js来实现滑动菜单(个性导航)的例子 博文地址-js个性导航 demo演示-狠狠的点击这里 css3能实现吗？ 随着css3的强大和流行，就用css3来实现了一个 css3 demo演示 怎么实现？ 今天的主角是nth-child选择器和 ~ 选择器，以及transition来打下龙套。简单介绍下： :nth-child(n) 选择某个元素的一个或多个特定的子元素，n表示第几个。例如 p span:nth-child(1)，选中p下面的第一个span，n是从1开始的，这很怪，猜是 w3c 的家伙集体打瞌睡了。n 也可以是表达式，如 2n 表示选择所有偶数个，等于even；2n+1 表示选择基数个，等于 odd；3n表示选择顺序是 3的倍数的子元素等等； ~ 兄弟选择器，选择跟在某个元素后面的特定兄弟元素，例如 p ~ div选中跟p同级，且在p后面的div； + 临近兄
近3天十大热文
-
[69] 招聘技巧一二 -
[14] [译]Google Chrome中的高性能网
-
[14] 关于Linux的文件系统cache
-
[14] 在FreeNAS/BSD搭建基于Nginx+
-
[13] 最近总结的一些技巧(vim,python,s
-
[12] 我对技术方向的一些反思
-
[12] 如何让ssh登录更加安全
-
[12] Linux常用系统信息查看命令
-
[9] Redis和Memcached的区别
-
[9] Linux(Ubuntu 10.04)上安装
赞助商广告
