摘要：前言对于css文件而言，选择器的写法有它的讲究，如——1> 不要用ID选择器2> 不要用通配符*选择器3> 选择器的层级......对于属性值的写法也有他的讲究，如——1> 复合属性，如font、background、margin、padding等2> 颜色、单位、hack、css3属性等........ 阅读全文

摘要：LESS（官网在此：http://lesscss.net/）的魅力相信大家都已明了，个人认为它最大的魅力在于能够清晰的展现嵌套关系。针对现有的项目，它的应用难点主要在于——何时转换为css，即是否利于开发调试、是否利于一键部署现有项目是基于css的，如何很好的将css转换成less，进而以后维护le... 阅读全文

摘要：不知道大家对vertical-align是否碰到了麻烦，今天对其做了一个系统的分析，主要有两篇文章向大家推荐，深入理解了这两篇文章，相信大家就能解决很多实际碰到的问题。具体能够解决什么问题，读透了，自然就知道了。 流氓文章一：大家都对vertical-align的各说各话 官方文章二：各浏览器对常用行内替换元素的 'baseline' 位置理解不同 在这儿，我先截一个图放在这里—— 这个图来自第一个文章，这里的文本font-size: 18px;行高(这里由父元素决定) line-height: 36px;，这张图能够清晰的看出font-size和line-height属性对v 阅读全文

摘要：每每有新项目，第一步就是应当使用一个reset.css来重置样式。滥用不如不用，直接拿个现成的reset.css过来将导致后期各种离奇bug的发生。所以最好还是自己写一个reset.css，并且要明白每一条reset都是用来做什么的。 1 /* 1.默认色彩 */ 2 /* YUI2 */ 3 html { 4 /* 不要在reset中设置背景色和字体颜色 */ 5 color: #000; 6 background: #FFF; 7 } 8 9 /* 2.边距 */ 10 /* YUI2 */ 11 body, div, dl, dt, dd,... 阅读全文

摘要：先说BFC|haslayout的应用场景： 1>触发BFC | haslayout可以包含内部元素的浮动（闭合浮动）； 2>触发BFC | haslayout可以阻止元素被浮动元素覆盖； 3>触发BFC | haslayout可以阻止垂直外边距折叠（合并）。 再说BFC | haslayout的触发方式： 触发BFC常用方式： float: left | right; position: absolute | fixed; display: inline-block | table-cell | table-caption overflow: auto ... 阅读全文

摘要：很多人都已经习惯称之为清除浮动，但是确切地来说是不准确的。 1> 清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none； 2> 闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。 通过上图实例发现，其实我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，在footer上设置clear：both清除浮动并不能解决warp高度塌陷的问题。 故：用闭合浮动比清除浮动更加严谨，所以应准确称之为：闭合浮动。 清理浮动的方式有很多，总结如下—— 1> 添加额外标签(如<div styl 阅读全文

摘要：本篇随笔主要介绍3个比较相近的文本属性word-wrap、white-space、word-break，先看看官方API对这3个属性的介绍——word-wrap : normal | break-word normal : 默认值。允许内容顶开指定的容器边界break-word: 内容将在边界内换行。如果需要，词内换行( word-break )也将发生 white-space : normal | pre | nowrap normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行 pre : 换行和其他空白字符都将受到... 阅读全文

摘要：话不多说，直接附上总结表格——格式操作Chrome/FF/IE7/IE8IE6gif不透明全透明的部分转为白色，半透明的部分转为常色(对于不支持的颜色转为白色)同左索引色透明支持全透明，不支持半透明同左alpha透明以索引色透明方式进行输出同左png不透明同gif的不透明同左索引色透明同gif的索引色透明同左alpha透明支持全透明，支持半透明支持全透明，半透明的部分输出全透明png24--不支持全透明，不支持半透明同左png32-­-同png8的alpha透明同左jpg--不支持全透明，不支持半透明 需要说明的是，如果一张图片既包含了全透明部分，又包含了半透明部分，同时也包含了非透 阅读全文

摘要：我们常常需要这样的效果：半透明的纯色背景浮动着高亮不透明的文本。当然，通常我们有两种实现方式，总结如下—— 1> 第一种实现方式：使用opacity和filter: alpha(opacity=XX)div.x { width: 500px; height: 50px; background-color: black; /* 这种方式使得里面的内容也呈现为半透明 */ filter: alpha(opacity=70); /* 针对IE */ opacity: 0.7; ... 阅读全文

摘要：所有CSS布局都依赖于三个基本概念：定位、浮动和空白边操作。不同的技术其实没有本质的区别，而且如果理解了核心概念，那么创建自己的布局是相当容易的。 本文主要是总结实际中使用的CSS布局技巧，从简单布局到高级布局。本文分享的布局只是基于XHTML1.0-transitional，可工作在各大主流浏览器中，对有浏览器差异性的技巧在此不作分享。1. 文档流：1.1 文档流也称普通流。1.2 文档流将窗体自上而下分成一行行，并在每行中按照从左至右的顺序排放元素。1.3 有三种情况将使得元素脱离文档流而存在，分别是浮动、绝对定位、固定定位。1.4 脱离文档流的元素不占任何正常文档流空间，并且叠放层... 阅读全文