用户界面开发书写规范
北京神州数码思特奇信息技术股份有限公司
2011年4月
一、书写规范概述：
1、头部需文档类型声明，使页面进入正常渲染的标准。
2、meta中charset编码问题。
使页面与外部文件（js css）具有统一的charset编码。
3、页面元素前后闭包完整，并全部使用小写。
4、样式用class定义、不用id定义，能用padding，不用margin。不使用position:fixed。
5、没用的样式删除掉。
6、不到万不得已，不用私有hack定义css，如_width,*width,*+width等。
7、页面中文注释会导致ie下文字溢出，js、css中文注释在charset编码不一致的情况下导致出错或失效。解决办法是删除注释、或程序做完删除注释。
8、div+css定义时采用合理缩进。
9、文件路径、图片路径等保持一致。（查看路径地址有效性）
10、优先级顺序：
important > 元素内部style > 包含选择定义 > 直接css属性定义
以及同等情况下，后定义的比先定义的优先级高。
11、默认定义：*{margin:0;padding:0;}将所有元素的默认内外边距清零。
Li{list-style:none}
12、使用dd或dt必须有外层的dl出现、使用li必须有外层ul或ol。
可直接只使用div定义若用其他标签，标签的层级最好采用其规定层级顺序。父到子顺序为： div、dl、dt/dd、ul/ol、li。
13、一般情况下，文字字体用宋体或微软雅黑，字号不小于12px。其他用图片。
14、圆角、阴影等情况直接用图片或图片拼接。
15、除和之外的标签默认都是display:block 的块状结构。
16、简洁的达意的复合英文class定义css
17、元素尽可能少、class尽可能少。
18、css也可以采取与div对应位置和对应缩进的方式。
19、选择性采用“包含选择式”css定义方法，主要能使样式唯一性，并且顺带还能提高样式优先级。
20、css的class进行规划，包括采用的命名规范（统一为第一条准则）
二、具体样式定义：
1、table样式定义
；若要边框时，边框合并可用border-collapse:collapse定义
2、IE6的某些body、iframe等元素需定义 _width<100%才可以使页面正常，例如不继承父级width，滚动轴出现等。
3、优先级顺序：
极端定义演示：
优先级顺序依次是90px 80px 70px 60px 50px 40px 30px 20px。
4、元素叠压问题，iframe、select、div叠压问题。默认iframe在select之上，select在div之上。特殊情况可用js控制显示某区域时让层叠的元素消失。其他元素可采用z-index方法。
z-index有父级继承的特性。父级在下，自己元素z-index再高也无济于事。或采用元素单独脱离放在最外侧。
同级z-index，定义了position:absolute或relative
5、元素移进变手型用cursor:pointer；
6、特殊的占有高度的边框要写outline：none；
7、letter-spacing：数量px为文字横向间距；
8、border的样式只用实线solid，和虚线dashed；其他效果用图片平铺。
9、空格、回车符等空串导致的问题。
例1：定义了或继承定义了div的font-size:12px;则默认有些浏览器div占12px高度，有些无高度，此时为了定义空的div无高度，或里面填充了图片
不多出来高度，需定义此div font-size:0;
若要让元素站高度，需给它一个 或指定其高度height:某值。
例2：
还有些特殊情况，需删掉多余的空格、回车符等空串。如下：
时期中间无空隙，或采用float:left;display:block的方式。（尽量不采用display:inline-block）
10、定高不拉伸：height:400px;overflow:hidden;
11、有最小高度但随内容增加而拉伸：
height:auto!important;height:400px;min-height:400px;
12、float浮动(float:left或float:right)为了在IE6下兼容无BUG，搭配display:inline一起使用。
13、强制文字不换行：white-space:nowrap；
强制文字换行：word-wrap:break-word;word-break:break-all;
其中文字的截取和控制，可用css控制：
{
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
-o-text-overflow:ellipsis;
}
14、特殊定义时可使用 margin:负值
或定义了position:absolute/relative后，定义left top bottom right负值，向其反方向伸展。例如团购等唯独它自己伸出来的样式。其中得保证父级的overflow：visible；否则会被砍掉。
15、圆角、阴影等情况直接用图片或图片拼接。可用png插入img或作为背景图，但尽量避免。
png做背景图实现措施
Width:100px; height:120px; filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="some.png"
但png内的链接区域失效。需绝对定位。
16、兼容背景透明定义方式filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;
也可采用上述方法。用png背景图实现。
17、居中定义方式：width:1000px; margin:0 auto;(可搭配
position:relative)建议此种；
居中定义第二种方式：position:relative; left:50%; margin-left:-500px; 倘若子元素有依据父级元素进行position:absolute;那么父级元素需定义position:relative
18、text-indent:24px;可定义文字缩进。 text-align:center只应用于文字居中。
19、可设置*{border:1px solid #000;}设置所有标签边框都为1像素实黑边。查看所有嵌套元素的层叠、位置、宽高的属性。易于纠错。
20、未知元素高度的垂直居中解决方案。一般还是采用table的
vertical-align:center居中。因为其他方案较为复杂。
已知元素高度的垂直居中方案：
line-height方法
padding-top方法
position:relative;top;50%; margin-top:负子元素的高度的一半。
21、子元素撑父元素高度的方法：
第一种方法：最常用的最好的方法就是定义一个.clear{clear:both}
在浮动完毕后，需要换行，并让父级元素占高度时在结尾处写一个class="clear">
第二种方法：父级定义overflow;auto;zoom:1;分别的意思是溢出自适应。即让其内部浮动元素撑起父级高度。Zoom:1是兼容ie6的属性定义，为了使此元素按照100%显示。定义Zoom:0.5则此元素为原始的50%；zoom:2则此元素为原始的2倍。
22、细微差别时 ie6对奇数像素宽高的控制不得当。因此嵌套多层复杂定义标签时尽可能采用偶数像素的宽高。
23、padding-top或margin-top等导致子标签位置错误，其中有继承父级padding的BUG或子标签定义了position:absolute;top:0;left:0样式不一致。解决办法是外侧多套一层div。
24、页面整体排版方式和其中某模块的排版方式，需分析后进行选型再进行排版。一般采用的方案有：
方案一：float和 margin padding的排版方式。
方案二：position:relative和position:absolute的排版方式
方案三：混合式排版。
