摘要： 请在主流浏览器中打开测试页面，在Fiddler里查看http请求。1. 隐藏图片测试：test_1.html结论：只有Opera不产生请求。注意：用visibility: hidden隐藏图片时，在Opera下也会产生请求。2. 重复图片测试：test_2.html结论：所有浏览器都只产生一次请求。3. 重复背景测试：test_3.html结论：所有浏览器都只产生一次请求。4. 不存在的元素的背景测试：test_4.html结论：背景仅在应用的元素在页面中存在时，才会产生请求。这对CSS框架来说，很有意义。5. 隐藏元素的背景测试：test_5.html结论：Opera和Firefox对于用d 阅读全文

摘要： 上篇中讨论了各种已有的布局实现。仔细分析各种布局的技术实现，可以发现下面三种技术被经常使用：浮动 float负边距 negative margin相对定位 relative position这是实现布局的三个最基本的原子技术。只要巧妙组合，并加以灵活运用，就能“拼”出各种布局的实现方案。尝试之路考虑以下DOM结构：利用浮动元素的负边距来定位：这样我们得到了第一个尝试页面 pe_layout_example1.html.可以看出，通过简单的负边距，已经让sub和extra定位到正确的位置。剩下的问题是如何让main也定位到正确的位置。一个自然的想法是，给main的容器#bd添加padding:效 阅读全文

摘要： 来看一个经典的三栏布局：从内容出发（渐进增强的核心思想），一份合理的HTML结构如下：main是主要内容，sub是辅助内容，比如导航、相关文章等，extra是额外信息，比如广告等，具体含义根据实际情况来定。书写HTML文档有个非常重要的原则是：重要的内容放前面。这能让文档更富语义，能提高可访问性，对SEO也更友善。写好上面的代码后，我们来看看如何实现三栏布局。（书写HTML时，尽量以内容为向导，要避免一上来就考虑布局，这体现的是内容与表现的分离，同时也是渐进增强思想在工作流程中的体现。）Table布局经典得一塌糊涂的表格布局，在渐进增强面前落花流水——表格布局要求书写HTML代码时，首先考虑布 阅读全文