《编写高质量代码??Web前端开发修炼之道》读后随笔_html/css

CSS Hack：

display:inline-block

水平居中的问题

垂直居中的问题

使用子选择器应对复杂变化

z-index相关问题以及Flash和IE6下的select元素

PNG图片的IE6透明问题

this的指向

自定义标签属性

首页

web前端

html教程

《编写高质量代码??Web前端开发修炼之道》读后随笔_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:06 PM

结构样式行为的分离

结构标准包括XML标准、XHTML标准、HTML标准；样式标准有CSS标准；行为标准主要包括DOM标准和ECMAScript标准。

通常的项目会按照如上的方式进行分离，但自己曾今做过的一个项目整个网站架构是按照模块进行分离的：

需求：设计一个网站，该网站的用途是根据用户需求生成网站，

例如一个企业展示网站，需要主页A，主页A包括布局（例如头部容器，导航容器，焦点图容器，然后之后再一个三列的容器，然后再页尾容器）。

每个模块都有样式（例如颜色，背景图片，边距）；每个模块都有配置信息（例如最新产品模块是否显示产品描述）。

如果按照结构样式行为分离的方式设计，那么我必须将如上的七个模块的样式配置都提取成CSS文件，还有每个模块的渲染JS提取成一个JavaScript文件，这么操作真能提高开发效率以及维护效率么？

目前的实现是：

1. 最终的页面只有一个JS文件，无CSS和额外的JS文件。

2. 页面由布局（排版）和模块（功能）两个部分组成。

3. 服务端根据用户请求的页面，从数据库中读取JSON格式的页面布局配置，用户生成最终页面的布局。

4. 服务端根据用户请求的页面，输出关联的每个模块的HTML以及该模块对应的JS渲染脚本（JS渲染脚本包含了JSON格式的样式信息和其他配置信息）。

5. 输出页面。

最终页面的源码输出看起来类似如下：

------------------------------------------------

通用JS封装

模块1HTML

模块2HTML

模块3HTML

模块1脚本

模块2脚本

模块3脚本

------------------------------------------------

对于服务端，实际上是实现了：插件（对应一个DLL）、插件模板（例如导航有水平导航，有垂直导航）、插件视图这样的架构（视图会从模板继承样式，例如一个水平导航可以有水平导航1，水平导航2）。

现在假设我的页面B也需要和页面A同样样式同样配置的导航，那么在服务端只需要：

1. 选择导航插件

2. 选择导航插件中的“水平导航”模板

3. 配置该模板的颜色、背景图片、动画效果等配置，标记为TPL1

4. 使用TPL1生成视图，标记为View1和View2

5. 在页面A的布局位置放入View1，在页面B的布局位置放入View2

6. 若今后需要同时修改A和B的背景图片，只需要修改TPL1的背景图片

7. 若今后需要只修改B的背景图片，只需要修改View2的背景图片

HTML标签的语义化

先确定HTML，确定语义的标签，再来选用合适的CSS。

使用Firefox的Web Developer插件来禁用CSS，看页面展现效果。

例如一个标题和内容的模块方案：

<标题>这里是标题内容<a href="#">更多</a></标题><段落>段落一的内容</段落><段落>段落二的内容</段落>

登录后复制

这里的“更多”事实上不应该属于标题标签中，调整后如下：

<div><标题>这里是标题内容</标题><a href="#">更多</a></div><段落>段落一的内容</段落><段落>段落二的内容</段落>

登录后复制

当页面内容标签无法满足设计需求时，才会适当添加DIV和SPAN等无语义的标签来辅助实现。

提高CSS质量

最常用的组织CSS的方式：base.css + common.css + page.css

基础类应该具备通用性和原子性，例如：

.f12{font-size:12px;}.zoom{zoom:1;}

登录后复制

用划线表示从属关系：例如".timeList-lastItem"从属于".timeList"样式。

用前缀表示开发人员：例如".xf-timeList-lastItem"、".jn-timeList-lastItme"。

多用组合，少用继承的原则：将类中不稳定的部分分离出来，单独设置成一个类，相对稳定的剩下的部分设置成另一个类，通过类的组合（多个class）实现最终样式。

CSS的权重计算：HTML标签的权重是1，class的权重是10，id的权重是100；例如"strong.demo"的权重是10+1=11；例如"#test.red"的权重是100+10=110。

CSS sprite：利用background-position来实现。

CSS Hack：

1. IE条件注释，也可以用于JS的Hack

<!--[if gt IE 6]><link type="text/css" href="test.css" rel="stylesheet" /><![endif]-->

登录后复制

2. 选择符前缀

"*html"星号前缀只对IE6生效；

"*+html"星号加前缀只对IE7生效；

在向后兼容方面存在一些风险，不能保证以后的IE版本都不识别*html和*+html。

3. 样式属性前缀

"_width:60px;"只在IE6下生效；

"*width:60px;"在IE6和IE7下生效。

4. 超链接hover的兼容：

顺序：:link :visited :hover :active　　(lv ha)

display:inline-block

<!DOCTYPE html><html><head>    <meta http-equiv=Content-Type content="text/html;charset=utf-8"></meta>    <style type="text/css">        body,ul,li{margin: 0px;padding: 0px;}        ul{list-style: none;}        li{display: inline-block;*display: inline;*zoom:1;}        ul li {border:solid 1px #eee;padding: 2px 20px;}    </style></head>    <body>        <div>            <ul><li>标题1</li><li>标题2</li><li>标题3</li></ul>        </div>    </body></html>

登录后复制

position:absolute和float会隐式地改变display类型，不论之前设置了什么类型，都会让元素以display:inline-block的方式显示，就算显示设置display:inline或者display:block也无效。

IE6下的float双边距BUG就可以通过设置display:inline来解决。

水平居中的问题

给父元素设置text-align:center可以实现文本、图片等行内元素的水品居中。

确定宽度的块级元素可以通过设置margin-left:auto和margin-right:auto来实现。

不确定宽度的块级元素实现水平居中：

1. 可以通过将需要水平居中的块级元素放入table标签实现（不设置table标签的宽度，仅设置margin-left:auto和margin-right:auto就可以实现水平居中），缺点是增加了无语义的标签。

2. 改变块级元素的display为inline类型，然后使用text-align:center实现居中，缺点是块级元素变成行内元素后，无法设置长宽值等。

3. 通过给父元素设置float并设置position:relative和left:50%，子元素设置position:relative和left:-50%来实现水平居中，缺点是设置了position:relative，如下所示：

<!DOCTYPE html><html><head>    <meta http-equiv=Content-Type content="text/html;charset=utf-8"></meta>    <style type="text/css">        body,ul,li{margin: 0px;padding: 0px;}        .ccenter{position: relative;float: left;left: 50%;}        .ccenter-in{position: relative;left: -50%;}        .show{border:solid 1px #eee;margin: 10px;padding:10px;}    </style></head>    <body>        <div class="ccenter">            <div class="ccenter-in show">这里的内容想要水平居中显示</div>        </div>    </body></html>

登录后复制

垂直居中的问题

父元素高度确定的单行文本的垂直居中可以通过设置line-height来实现。

CSS中有一个vertical-align属性只有在父元素为td或者th的时候才生效，在现代浏览器下（IE8+）可以设置块级元素的display类型为table-cell来激活vertical-align属性，但IE67下并不支持；

<!DOCTYPE html><html><head>    <meta http-equiv=Content-Type content="text/html;charset=utf-8"></meta>    <style type="text/css">        body,ul,li{margin: 0px;padding: 0px;}        .ccenter{height: 200px;display: table-cell;vertical-align: middle;*position: relative;}        .fixie67vmiddle{*position: absolute;*top: 50%;}        .fixie67vmiddle-in{*position: relative;*top:-50%;}        .show{border:solid 1px #eee;margin: 10px;padding:10px;}    </style></head>    <body>        <div class="ccenter hcenter">            <div class="fixie67vmiddle">                <div class="ccenter-in hcenter-c show">这里的内容想要垂直居中显示</div>            </div>        </div>    </body></html>

登录后复制

另外想要实现块元素居中，还可以通过更简单的方式：

.vhcenter{        width: 400px;        height: 200px;        padding: 20px;        position: absolute;        top: 50%; left: 50%;        margin-left: -210px; /* (width + padding)/2 */        margin-top: -120px; /* (height + padding)/2 */}

登录后复制

使用子选择器应对复杂变化

.content-lr-7025 .main{float:left;width:70%;}.content-lr-7025 .sidebar{float:right;width:25%;}.content-rl-7025 .main{float:right;width:70%;}.content-rl-7025 .sidebar{float:left;width:25%;}

登录后复制

z-index相关问题以及Flash和IE6下的select元素

z轴在设置position:relative或absolute后被激活，z-index值越大越靠上。

z-index设置为负数可能会遇到些麻烦，例如当位于body之下时，可能事件会被透明的body挡住。

负边距引起的相邻元素位置重叠，取决于HTML标签出现的先后顺序，后出现的标签浮于先出现的标签之上。

Flash嵌入网页时有个wmode属性，可以设置为opaque和transparent来防止Flash始终浮于最上方。

select表单元素在IE6下会浮于绝对定位的元素之上，可以使用一个和绝对定位元素同样大小的firame元素，通过z-index放置在绝对定位元素之下，select元素之上来定位。

PNG图片的IE6透明问题

参考P130页。

通过滤镜progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png_file',sizingMethod='crop')实现。

提高 JavaScript质量

匿名函数控制作用域。

定义命名空间。

统一入口。

JavaScript分层。

封装浏览器差异。

弹性编程，可扩展：组件通过class来标识，并通过实现getElementsByClassName来获取一组功能相近的标签。

可复用：组件指定根节点，保持每个组件之间的独立性。

通过传参实现定制。

this的指向

<a href="#" onclick="alert(this.tagName)">test1</a><a href="#" onclick="javascript:alert(this.tagName)">test2</a>

登录后复制

如上的test1显示的是A，但test2显示的是undefined。

同样的setTimeout和setInterval也会改变this指向，传递的相当于函数指针，this就变成window作用域了：

var test="hello";var o={    test:'o',    go:function(){        alert(this.test);    }};o.go(); // osetTimeout(o.go,1000);  // hellosetInterval(o.go,2000);  // hello

登录后复制

可以通过匿名函数来调整this指向，另外还可以通过call和apply来调整this指向。