摘要：假设有这样一个需求：header和主区域是原来就有的，现在要在页面中加一个背景图，要求该背景图层在主区域之下，但在主区域之外的部分可点击，是一个链接。我简单思考了下，就知道不能用背景图实现，因为背景图是无法点击的。虽然可以勉强用js监听body点击然后根据点击位置来判断是否是背景图发生了点击，但这未免太笨拙。于是决定在主区域下铺一层，设置z-index:-1.图片设置为bgImg的背景图。代码如下： 但是事实证明这样设置后, bgImg无法被点击到，hover时也不会显示手形，因为z-index为负值的... 阅读全文

摘要：我个人比较喜欢的css书写顺序：1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.背景(background, border等)4.文字系列(font, line-height, letter-spacing, color- text-align等)5.其他(animation, transition等)因为我习惯把页面当成一张白纸，而我们书写样式就像是在纸上作画，我喜欢先描绘出轮廓，再充实细节。描绘轮廓包括：确定下笔的位置(position, top, rig 阅读全文

摘要：这两天读了《CSS权威指南第三版》的第6章，对vertical-align小节有些疑惑，在浏览器对text-top和text-bottom的处理上作者讲的不够清晰，例子也很片面。下面具体跟大家谈谈。友情提示：下面的内容需要你先理解 替换元素，非替换元素，css行模型（行高，行间距，内容区，行内框，行框）等相关概念，有欠缺的朋友请先到google充电。vertical-align的其它取值这里就不讲了，想了解的可以参考下面链接的几篇文章，这里只讲text-top和text-bottom.在讲到text-bottom时，作者原文是这样说的："vertical-align: text-bo 阅读全文

摘要：white-space [normal | pre | pre-wrap | pre-line | nowrap]css中的white-space属性用来设置文本中空白字符的处理方式，其中空白字符包括空格，tab, 换行符等，可取值有：normal：合并空白字符（多个空格或tab会被合并为一个空格），忽略换行符，允许根据容器宽度自动换行（下面简称自动换行）nowrap：合并空白字符，忽略换行符，不允许自动换行（这时想换行只能通过插入br标签来实现）pre：保留所有空白字符和换行符，不允许自动换行pre-wrap：保留所有空白字符和换行符，允许自动换行pre-line：合并空白字符，保留换行符， 阅读全文

摘要：1. 把css放在head区 Before a browser can begin to render a web page, it must download and parse any stylesheets that are required to lay out the page. Even if a stylesheet is in an external file that is cached, rendering is blocked until the browser loads the stylesheet from disk. 由于页面中所有css下载并解析完成之前, 浏览 阅读全文

摘要：最近研究css性能优化，明白了浏览器读取css选择器的顺序是从右到左。但是为什么呢？这就涉及到了浏览器渲染页面的顺序，而关于浏览器的渲染，我们首页要了解浏览器的架构浏览器构架图如上图所示，浏览器主要由 用户界面（User Interface）, 浏览器引擎(Browser engine), 渲染引擎（Rendering engine), 网络模块(Networking)，js解析器(Javascript Interpreter)，用户界面后台（UI Backend）和数据持久层(Data persistence) 等几部分组成。其中各模块除了Browser engine是用来协调Render 阅读全文