越己

摘要： 首先说下为什么要写这篇文章。一个网站，为了添加样式，惯性思维都是加id，加class，问题是如果这是一个大型网站，整个页面使用的id和class会非常多，多到维护起来想死了。其实css提供了一些选择器帮助我们减少id和class，只是很多人很懒，有了id和class就不再关心它们了，为了简化和正规化css编码，专门写一篇IE78下能用的选择器，因为其他浏览器都支持标准，所以可以放心大胆的使用。这里主要说一些不常用的选择器，无视IE6，因为好用的选择器它基本都不支持。IE7支持的IE8肯定也支持，所以就不重复列举了。IE7支持的选择器有: 子选择器(div > span)相邻选择器（h1 阅读全文

摘要： 浮动到底做了什么？浮动如何影响元素的盒模型？浮动的元素和行内元素有何不同？调整浮动元素的位置是通过什么规则进行的？clear属性如何工作，它的目的又是什么？浮动甚至能绊倒有经验的开发者，理解浮动能帮助你解决很多CSS问题。即使你认为已经知道了浮动的所有知识，我们足够深入的分析也许也能让你学到一些新东西。什么是浮动？CSS中的一些元素是块级元素，表示它们会自动另起一行。举个例子，如果你创建了两个段落，每个段落都只有一个单词。这两个单词不会靠在一起，而是会各自占据一行。另一些元素是行内元素，表示它们和前面的内容位于相同的一行。举个例子，<a>可以出现在另一个元素中，比如<p> 阅读全文

摘要： 伪类 VS 伪元素这两个概念很容易混淆，即使你Google或者查W3C的资料都不一定搞得清。答案其实很简单，如下：伪类：作用对象是整个元素首先，来看几个伪类a:link {color: #111}a:hover {color: #222}div:first-child {color: #333}div:nth-child(3) {color: #444}如你所见，尽管这些条件不是基于DOM的，但结果每一个都是作用于一个完整的元素，比如整个链接，段落，div等等。伪元素：作用于元素的一部分还是来看几个例子：p::first-line {color: #555}p::first-letter {c 阅读全文

摘要： css有5种不同的position属性值我们不会讨论inherit，因为顾名思义，它就是继承了父元素的值，而且在比较老的IE版本中，支持情况也不好。任何元素的position属性的默认值都是static。所谓的static定位就是元素在文档流中。当然了，这完全取决于你的HTML结构。另一个值你肯定见过，它就是fixed。说白了，它就是把一个对象钉在背景上，因此无论你把它放在哪，它就会一直在那。我们经常在sidebar的导航元素中看到它的身影，当页面向下滚动了很远的距离，这时候我们想回到顶部，如果没有一个fixed的导航，这种用户体验是很差的。前面这三个值都很浅显易懂，接下来是绝对定位和相对定位 阅读全文

摘要： 需求比如新浪微博的tip，或者别的网站常用的tip，都可以看到三角形的身影，一般来说，都会使用图片，但是我希望能用css解决。三角形的实现方式（不考虑css3）：1. 纯字符2.border可选字符如下：◣◢◤◥▲▼► ◄△▽⊿你可以等比放大缩小，或者改变颜色如果字符无法满足需求，使用border.arrow { display: block; width: 0; height: 0; font-size: 0; /** 下面两行随你配置 **/ border-width: 40px; border-style: solid; border-co... 阅读全文

摘要： 以前一直对em心存疑虑，今天终于了解它的作用了。CSS的单位分绝对和相对两种，比如设置width: 100px，就是绝对值，如果设置成width: 100%，就会相对父元素的大小进行调整。em是一种相对单位，它相对于父元素的文本字体大小，来看一个例子：body { font-size: 100%;}h1 { font-size: 1.5em;}这段CSS表示页面使用字体的默认大小，即16px。h1的大小是默认大小的1.5倍，即24px（16 * 1.5 = 24）http://www.impressivewebs.com/understanding-em-units-css/ 阅读全文

摘要： Java的正则非常坑爹，因为转义的恶心程度已经令人发指了。我先举个简单的例子，假如有个方法，参数是普通字符串，返回的是符合Java规范的正则字符串，众所周知，这需要转义，这里简单一下，仅转义 .public String toRegex(String str) { return str.replaceAll("\\.", "\\.");}可以看到，第一个参数是 \\. ，一般的语言表示为 \. ，但是Java需要转两次，为什么呢？比如JavaScript，会写成var exp = /\./g;exp不是字符串，而是一个正则对象，但是Java是用字符串表示 阅读全文

摘要： 高度自适应问题，我很抵触用js去解决，因为不好维护，也不够自然，但是纯用CSS，难度不小，比如下面我要说的例子。需求：1. 这个矩形的高度和浏览器窗口的高度相同，不能出现纵向滚动条2. 绿色部分高度固定，比如50px3. 紫色部分填充剩余的高度HTML结构暂且如下：<div id="main"> <div id="nav">nav</div> <div id="content">content</div></div>先看1.html, body { height: 阅读全文

摘要： php的动态特性让人印象深刻，比如这里的可变变量和可变函数。可变变量：$var = 'filename';$filename = 'index.php';echo $$var;打印出 "index.php"可变函数：$var = 'getName';function getName() { return 'zhujl';}echo $var();打印出 "zhujl" 阅读全文

摘要： 各个类库基本都有contains函数，检测一个元素是否包含另一个元素。核心方法不外乎两个：contains 和 compareDocumentPositioncontains是IE发明的函数，后来也有别的浏览器支持，比如Chrome，但是Firefox不支持。用法如下：el.contains(el2);如果 el包含el2 或 el === el2，返回true；否则返回false。这很简单，接着说compareDocumentPosition。这个函数来自DOM Level 3 规范，标准浏览器都支持，但IE6-8不支持，IE从9开始支持，但是仅仅是IE9模式下才管用，如果你的IE9用的是小 阅读全文