一、以淘宝新版首页为实例讲述网页布局

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点，为什么一个标签，我给他设置了那么多的属性，算错了又得重算，真是公公背媳妇过河———吃力不讨好啊!)