以淘宝新版首页为实例讲述网页布局
一、以淘宝新版首页为实例讲述网页布局
1.1 流动性(自适应)布局
自适应布局，是指页面主体部分的宽度随着浏览器宽度的大小而发生改变
优点：
1. 显示器宽度利用率高，固定宽度的布局上，宽屏显示器用户的宽屏优势没有体现出来，比较浪费。
2. 网页的生命周期更长。
影响网页寿命因素：功能，web流行趋势，显示器的分辨率等。宽屏显示器的分辨率用户增多，不需要做任何改动，因为其页面自适应于任何分辨率的浏览器，其使用寿命是不会受分辨率影响的。
3. 模块化与重用性
如果一个页面是自适应，其内部的模块也是自适应，那么这个模块可以放在任何地方都不会影响布局，这样的话这个模块的重用性非常很大。
1.2 固定布局
固定布局，指的是页面主体部分宽度固定，不随着浏览器的大小或显示器的分辨率变化
固定布局优点：
1. 布局精良
自适应布局有时给人的感觉松松垮垮，不精致，而固定布局则可以很好的克服这个问题
2. 开发成本
从技术的实现上来讲，固定布局显然更容易实现，依照设计图，设置宽度、高度即可实现。
马化腾对Google产品特点的总结：文字化界面，极致简洁，排版清晰，重点突出。这是页面宽度自适应所必须的的。因为图片，尤其非平铺背景图片要随着浏览器宽度改变而改变是不方面的，即使实现后期的维护等都是需要大量成本的。自适应布局可以克服这一点。
自适应布局方法特点;宏观的布局，从整体入手，不必担心几像素的误差会破坏布局;而固定布局特点：其属于精确布局思想，讲求规整，像素级布局。
1.3 如何在页面制作中融合这两种布局特点?
融合特点：页面主体部分最外框的宽度不变，但是里面的元素水平自适应于外框宽度。即主体固定内部自适应。
优势：
1. 虽然页面不能自适应于浏览器的大小，但是即使后期页面需要改版调整宽度，只需要改最外框的宽度就可以了，只要改一个width值，其改版的成本几乎是0。
2. 内部宽度自适应可以让内部的元素重用性大大增强，不同的页面可以使用同一模块，即使宽度不一样也不用做任何的CSS修改。
自适应评论模块demo
3. 自适应布局的容错性相当高，基本上不会出现错位，或是几个像素的偏差造成的布局混乱，维护成本比固定布局小很多很多。实现困难维护简单。
twitter首页自适应布局demo页面
淘宝新版首页自适应页面demo
二、去除冗余 – 精简您的CSS样式代码(知识点比较细碎，需要点耐心)
问题： 常见的一些没有必要使用CSS代码，但使用了。越是对CSS理解不够，越容易出现这些问题。
前提条件：此处不考虑继承或是CSS reset
2.1 一些常见不必要CSS样式
2.1.1 与默认CSS样式一致
1.
p {width:auto; height:auto;}
上述代码没必要添加，因为默认的任何块状元素的高度几乎都是auto
2.
body,p,h1,h2,h3,h4,h5,h6{margin:0; padding:0;}
body,p,h1~6这些标签，本身的padding值就是0，所以只需要margin:0即可，如下：
body,p,h1,h2,h3,h4,h5,h6{margin:0;}
在CSS reset中，为了方便，都是一堆标签直接套个margin:0;padding:0; 这种做法不推荐，因为会浪费CSS的渲染。
常用的标签就ul,ol列表元素有默认的padding值，如下写法：
body,p,h1,h2,h3,h4,h5,h6{margin:0;}
ul,ol{list-type:none; margin:0; padding:0;}
3.
span{display:inline; float:left; margin-left:3px;}
上面写法多余，因为对于span/a/em/cite/i/b/strong等行内元素默认就是display:inline的
还有对本身就是block水平的元素设置display:block属性(之前看其它网站写的CSS，也一直奇怪/疑惑来着，本身就是block属性，还设置，都怀疑自己学的CSS与其他人不一样!)
li{display:block; padding:4px 0;}
4. 其它情况
p{margin:auto;}
textarea{overflow:auto;}
img,input,button{vertical-align:baseline;}
p{background-position:0 0;}
2.2 没有必要出现的样式
最常见的就是clear:both;的使用。
如果前后没有浮动元素干扰，使用clear:both是没有道理的。
(这样的CSS样式也碰到过，当初看得纠结啊!)
2.3 不起作用的单样式
有些CSS样式只针对特定显示水平的标签起作用
2.3.1 inline水平
inline水平的元素对很多CSS样式都不起反应，例如height/width, clear, margin-top/margin-bottom, vertical-align, overflow等。
inline元素与overflow属性demo
2.3.2 block水平
block水平的元素对vertical-align属性没有作用。
2.3.3 组合起作用
有些样式需要和其他一些特定的CSS属性一起使用才有作用。常见的就是z-index与position属性的组合使用，left/top/bottom/right与position属性的组合使用。
2.4 组合样式中多余的CSS代码
这种情况就多了，实际情况下，牵扯到继承，命名冲突，书写等
一些常见的多余样式的例子
a{display:block; float:left; margin-top:2px;}
display属性完全没有必要，对于a或是span标签而言，没有任何理由使用display+float的组合，float所产生的“包裹”作用已经让元素如同一个inline-block水平的元素，这种作用大于直接的display设置
仅仅一种情况下有必要使用display+float的组合，就是block水平的元素在IE6下的双边距bug问题，这种情况的唯一写法如下：
// 解决IE6下的双边距bug写法
display:inline; float:left; margin-left:3px;
一定要有与float浮动同方向的margin值，否则display:inline是多余的，可以直接去掉。
p{~~height:25px;~~line-height:25px;}
这段代码高度与line-height值一致，通常作用是实现单行文字的垂直居中显示。但是实际上，很多情况下，这里的height是个多余的值，尤其在模块标题处。对于单行文字而言，您设置line-height多大，其实际占据的垂直高度就是多高，没有任何的兼容性问题。
什么时候有必要同时使用呢?
IE6/7清除浮动影响的时候，IE6/7下设置height值可以让元素haslayout从而清除浮动的影响，而line-height无此作用，还有就是其他一些需要layout的情况。
span{display:block; width:100%;}
p{width:100%;}
body{width:100%;}
这也是常见的使用多余CSS样式的情况，width:100%。在一般情况下，对于block属性的元素，width:100%这个属性绝对是多余的。默认的，block水平的元素就是宽度相对于父标签100%显示的。
不使用100%的情况不是绝对的，下面这个组合可能使用width:100%是有必要的
p{width:100%; overflow:hidden;}
在IE6/7(没有IE8)下，对于block水平的元素，我们可以使用width:100%清除浮动造成的影响，原因与上例一样，haslayout，除了这种情况，纯粹的{width:100%;}样式(无float或是position:absolute之类的样式)是不可能出现的。
p{float:left/display:inline; vertical-align:middle;}
设置无用的vertical-align属性也是常见的。对于block/inline水平的元素或是设置了浮动属性或是absolute绝对定位的元素，其都不支持vertical-align属性。
p{position:absolute; left:0; top:0; display:inline; float:left; margin-left:10px;}
设置了绝对定位属性的元素相对特殊些，其不支持的CSS样式可就多了，首先对于display属性，完全没有必要，无论是block/inline-block/inline都是如此，除了现实隐藏外，没有任何组合使用的理由。absolute元素一旦设置了left/top这类定位值，margin属性也就失去了作用(有作用的)，浮动也无效。还有其他很多属性都不支持，例如clear，vertical-align等。
p{height:20px/width:200px; zoom:1; overflow:hidden;}
我们可能会使用zoom清除IE6/7(对IE8无效)浏览器下浮动造成的影响。但是对于IE6/7而言，如果您已经设置了高度值或是宽度值，那么zoom:1完全就是多余的，在IE6/7下含有定值的height或是width与zoom:1起到了同样的一个作用，就是使元素haslayout，可用来清除浮动产生的影响，所以，width/height与zoom:1同时出现也是没有任何理由的。
a{display:inline-block; *display:inline; *zoom:1;}
这是设置元素的inline-block属性，但是对于inline行内元素来说，后面的两个样式就是多余的，因为display:inline-block可以让inline水平的元素表现的就如同真正的inline-block水平一样。
如果是p，则需要上面完整代码
使CSS代码足够精简的方法就是对每个CSS样式都要非常的熟悉了解
三、中国古代道家思想与网页重构的思考(主要涉及网页重构)
对于web设计师，总是要去抓住这个流行趋势，去重新设计页面，于是在web开发中，经常听到的一个词就是改版。部分流行的网站过一段时间后，可能需要改版，而
也有网站可以历经几十年都可以不用改版。
简洁???
简洁的含义到底是什么?是内容少?是去除任何不必要的东西?还是有更深此次的含义。很多网站都称追求简洁的设计，而最终的表现呢?往往差强人意。到底问题出在哪里呢?
设计——————剔除不必要的修饰、保留其本性
抓住代码的寓意以及本质——————深入理解语义化标签
控件——————浏览器对一些表单控件自定义了些样式，按钮，文本输入框，单选/复选框，文本域等。基本上大部分的页面都对这些控件进行了样式干预
页面重构，不仅仅是布局，设计，HTML，还有一个CSS
关于CSS重置(CSS reset)
小结：从页面的布局，结构，设计，以及HTML与CSS代码的各方面追求简洁。
注：张鑫旭本人不用CSS reset，他是按需书写。
来自于评论：基于display:table的CSS布局
四、CSS reset的重新审视 – 避免样式重置
CSS reset作用： 让各个浏览器的CSS样式有一个统一的基准
常见但事实上极不推荐的代码：
*{ margin:0; padding:0; }
4.1 CSS reset的滥用
关于CSS reset，根据您自己的要求做修改，但大部分基本上是直接拷贝过去。
常见标签的默认属性值及相互作用——关于CSS reset的思考
4.2 避免样式重置的理由(或CSS reset的不足)
大部分样式重置的标签不可能全部用到，如h1~h6标签;
如果不对h1~h6标签设置{margin:0}重置该如何?
从SEO的角度讲，一个页面最多只能出现一个h1标签，所以，显然，h1标签的CSS reset完全没有必要，页面什么地方用就设置相应的样式
记住，h1标签是有个默认的margin-top与margin-bottom值的，因此可以有下面这样的属性
h1{margin:10px 0 0;}
对比下CSS reset下的使用：
h1, h2, h3, h4, h5, h6{margin:0;}
.
.
.
h1{margin-top:10px;}
CSS reset：不仅文件大小增加了，CSS代码属性也发生了重置，CSS渲染也增加了。显然不及没有CSS reset来的高效
2. 关于兼容性
哪些标签的默认属性在不同浏览器下有差异?(此处需要重点查询一下常见标签的默认样式)
h1标签的文字的大小，在有些浏览器下大些，有些小些;然后就是一些margin值的些许偏差，然后还有呢?
目前浏览器而言，对于这些默认标签的属性其实差异是很少很小的，兼容性一说实在不能用在标签的默认属性上。
就算有一些差异，为何非得在头部已CSS reset的位置同一呢?当需要的时候，在设置，又有什么差异呢，这样，反而更直接，更高效!
3. CSS库的概念
与性能，优化的概念是相悖的，但其存在似乎有一定的道理，如设置默认的a标签的属性。不过也可这样设置(不用CSS reset的概念来解释它)：
body{margin:0; font:normal 12px/1.5 '宋体';}
a{color:#34538b;}
上面，看不到CSS reset的样子
小结：1.最少的CSS代码，最少的渲染，最少的重置就是最好的CSS样式代码
2. 看完此篇文章应有意识的去整理形成自己的一套reset，再根据实际情况选择是否用它。
3. 评论很有意思，看到了Normalize.css，一种CSS reset替代方案来，让我们谈一谈 Normalize.css
4. 评论区也指出存在部分错误，现在先把这个问题先放这，抽个时间一一验证一下。
5. 评论区有人提到，这样做不值得。测试了*通配符和yahoo rest 渲染时间在IE下相差2毫秒，其它浏览器渲染时间也比较小。嗯，这也是一个思考的角度(其实也想问这样的问题，关于怎么测试渲染时间，暂且也搁置此处，过段时间再来深挖)
*通配符反而是破坏了部分元素的兼容性，例如单复选框与后面文字的间距。
级联是CSS里很重要的一个设计思想，覆盖之前的样式
关于form没有margin值的说法 在IE系列中form是有margin默认值的 在一个form标签的上下部分各添加点内容 就会发现form和他们之间是有明显间隙的
6.果然是评论区更精彩!
下篇为CSS样式设置方面的技巧，也同样来源于张鑫旭个人博客
注：
1. 做这个记录总结起因一是在写网页的时候碰到一些问题，解决不了，知道问题在哪，但不知道该怎么解决(比如一个标签设置的属性特别多，大概有十多个吧，但是有部分样式后面会用到，在这里要不要拆开分成多个属性方便后面复用。但是怎么拆呢?这个是一个问题;
2. 或者用PS测量标签的长、宽、内边距、边框、外边距，尼玛那可测得真精确呀，像素级别妥妥的!这还不算啥，关键是测了宽度还需要去计算，宽度减外边距还剩多少，减边框还剩多少，…一大堆计算，但是累成狗了呀!一直盯着屏幕眼睛也难受是不?
3. 写页面一直觉得不对劲，到了这里觉得自己的书写方式那是绝对有问题，所以跑到网上寻找思路，看看是不是有人也碰到了类似的问题。看到了知乎真阿当的一篇收徒文章(不过我不是去拜师的，行跪师礼这一行为我是没办法接受的!)，先看了一下知乎关注度，又因为之前听过这个网名但是不是具体了解，百度搜了一下发现这人有出过一本书，然后跑去查找书方面的相关信息了，看了一下目录觉得值得一看。
4. 这本书解决了我的一个大问题，关于如何用JavaScript实现面向对象与继承。(虽然现在用面向对象写程序不怎么样，但至少看完这本书我对JavaScript实现面向对象与继承理解又深入了一点点)。看了不少视频，但是讲解都不太容易让人明白，网上也看了许多关于这方面的博客文章，还是理解不了。他写的书特点总结一下：由浅入深(类似“渐进增强”)、通俗易懂，思路也很清晰，可以看到他的思维过程。从这一点来看，如果他来带徒弟的话，可信度还是很高的，基本上不存在坑人的说法，应该是一个好的教学者吧!
5. 不过我的问题还是没有得完全解决，关于CSS部分第4章有提到网格布局，还有一些思想——用面向对象的方式来写CSS，简称oocss。这是个好东西呀，可以解决CSS中命名的以及选择符权重的问题。但是更深入的怎么去操作，没有进行下去。
6. 其实我想看看他是如何架构CSS的，网上找到他的博客去寻找答案，博文基本上被我翻了个遍，没发现关于oocss这方面的(有的话，书中也提到过)
7. 后面就找上张鑫旭、找上大漠来了，这不能怪我呀，谁让他们在前端界这么出名呢!大漠写的关于oocss的文章挺多的，他用BEM与oocss的结合的方式来进行命名，这我暂时还不太习惯。不过他有一个关于给CSS添加命名空间的想法还是很不错的。在这基础上又对命名空间，即选择符前面的前缀，根据组件、对象、工具等分类分别添加简写组成可复用的功能组件，这点对于避免冲突和提高css代码重用也是不错的。
8. 张鑫旭的关于CSS的博客文章也看了一小部分，关于页面布局、重构、页面代码的可复用性有他自己独到的见解，也是非常不错的!(上面第2点关于测量、写页面需要计算，这一问题在这里找到了解决，发现原来他也踩过这个坑。还有一个就是之前看其他人写的HTML大部分会添加一个“额外”的盒子，当时想不出这样写的好处在哪里，觉得纯属多余，这个“多余”的盒子我可一直记着呢，这点我在张鑫旭的博客里也找到了答案，这也就是上面第1、2点，为什么一个标签，我给他设置了那么多的属性，算错了又得重算，真是公公背媳妇过河———吃力不讨好啊!)