一、CSS Reset
浏览器对标签有默认设置，这种设置是全局性的；不同浏览器设置的样式可能不同。浏览器的默认设置在很多情况下不需要，覆盖原来的设置增加额外的工作量。
CSS Reset清除默认样式，全局样式定义。
在项目初期把CSS Reset定好，引入时一定要在link第一位或其它CSS样式之前。
CSS Reset文件，根据项目需求调整。
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:normal;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,simsun;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}
二、布局解决方案
1、居中布局
父元素和子元素的大小不确定。
<div class="parent">
<div class="child">DEMO</div>
</div>body{font:30px/2 'microsoft yahei';}
.parent{background:#ddd;height:200px;width:300px;}
.child{background:#666;color:#fff;}（1）水平居中
inline-block+text-align。兼容IE6,7需要通过display:inline; zoom:1;模拟inline-block。
.parent{text-align:center;}
.child{
display:inline-block;
text-align:left;/*需要额外代码修复center造成的问题*/
}
table+margin。兼容IE6,7需要把结构换为<table>。
.child{
display:table;/*像block，但宽度随内容变化*/
margin:0 auto;
}
absolute+transform。绝对定位脱离文档流，不会对其它元素产生影响。transform是CSS3新增内容，对IE6,7,8可能没法兼容，在高版本浏览器需要加前缀。
.parent{position:relative;}
.child{position:absolute;left:50%;transform:translateX(-50%);}
flex+justify-content。IE6,7,8可能没法兼容flex。
.parent{
display:flex;
justify-content:center; /*也可以在.child{margin:0 auto;}代替justify-content*/
}
（2）垂直居中
table-cell+vertical-align。兼容IE6,7需要把结构换为<table>。
.parent{
display:table-cell;/*单元格*/
vertical-align:middle;
}
absolute+transform。
.parent{position:relative;}
.child{position:absolute;top:50%;transform:translateY(-50%);}
flex+align-items。
.parent{display:flex;align-items:center;}（3）居中
/*方案1：兼容性好*/
.parent{
text-align:center;
display:table-cell;
vertical-align:middle;
}
.child{
display:inline-block;
}
/*方案2*/
.parent{
position:relative;
}
.child{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
/*方案3*/
.parent{
display:flex;
justify-content:center;
align-items:center;
}
2、多列布局
（1）定宽与自适应
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
body{font:30px/1.5 'microsoft yahei';}
p{margin:0;padding:0;}
.parent{background:#ddd;color:#fff;}
.left p{background:#333;}
.right p{background:#999;}
.clearfix:after{content:'';clear:both;display:block;height:0;visibility:hidden;}
float+margin。
.left{float:left;width:100px;}
.right{margin-left:120px;}
float+margin+(fix)。
.left{float:left;width:100px;position:relative;}
.right-fix{float:right;width:100%;margin-left:-100px;}/*该div类包裹right*/
.right{margin-left:120px;}
float+overflow。
.left{float:left;width:100px;margin-right:20px;}
.right{overflow:hidden;}
table。
.parent{display:table;width:100%;table-layout:fixed;}
.left,.right{display:table-cell;}
.left{width:100px;padding-right:20px;}
flex。
.parent{display:flex;}
.left{width:100px;margin-right:20px;}
.right{flex:1;}
（2）不定宽与自适应
第一列可以是任意宽度，或由内容决定。第二列自适应。
float+overflow。IE6,7不支持。
.left{float:left;margin-right:20px;}
.right{overflow:hidden;}
.left p{width:200px;}/*left宽度由其内容决定*/
table。IE6,7不支持。
.parent{display:table;width:100%;}
.left,.right{display:table-cell;}
.left{width:0.1%;padding-right:20px;}/*设置1pxIE8有问题*/
.left p{width:200px;}/*根据内容设置宽度*/
flex。兼容性问题。
（3）等分
<div class="parent">
<div class="column"><p>1</p></div>
<div class="column"><p>2</p></div>
<div class="column"><p>3</p></div>
<div class="column"><p>4</p></div>
</div>
body{font:30px/1.5 'microsoft yahei';}
p{margin:0;padding:0;}
.parent{background:#ddd;color:#fff;}
.column p{background:#333;}
.clearfix:after{content:'';clear:both;display:block;height:0;visibility:hidden;}
float。IE6,7对float、百分比兼容性不好。百分比设置随列数需要变化。
.parent{margin-left:-20px;}
.column{float:left;width:25%;padding-left:20px;box-sizing:border-box;}
table。单元格不能设置maigin，可以设置padding。table默认总宽度随内容变化，需要设置width:100%;，因此在父元素外面再包裹一个parent-fix。table-layout:fixed;布局优先，如果单元格未设置宽度，则宽度平分。
.parent-fix{margin-left:-20px;}
.parent{display:table;width:100%;table-layout:fixed;}
.column{display:table-cell;padding-left:20px;}
flex。
.parent{display:flex;}
.column{flex:1;}
.column+.column{margin-left:20px;}
（4）等高
对于自适应布局，每一列要等高。
table每一行单元格等高，因此已经实现每一列等高。
flex中align-items对齐方式默认stretch，因此已经实现每一列等高。
float。兼容性好，但是是伪等高。
p{background:none!important;}
.left,.right{background:#444;}
.parent{overflow:hidden;}
.left,.right{padding-bottom:9999px;margin-bottom:-9999px;}
.left{float:left;width:100px;margin-right:20px;}
.right{overflow:hidden;}
3、全屏布局
布局充满整个浏览器窗口，滚动条只出现在主内容区域。
（1）position
overflow:hidden;禁止滚动条。均相对于body定位，未设置relative。
position IE6不支持，Hack方案：http://nec.netease.com/library/141027。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>全屏布局-position</title>
<style>
html,body,.parent{height:100%;overflow:hidden;}
body{color:white;}
.top{
position:absolute;top:0;left:0;right:0;height:100px;
background:blue;
}
.left{
position:absolute;top:100px;bottom:50px;left:0;width:200px;
background:red;
}
.right{
position:absolute;overflow:auto;
top:100px;bottom:50px;left:200px;right:0;
background:pink;
}
.bottom{
position:absolute;bottom:0;left:0;right:0;height:50px;
background:black;
}
.right .inner{min-height:1000px;}
</style>
</head>
<body>
<div class="parent">
<div class="top">top</div>
<div class="left">left</div>
<div class="right"><div class="inner">right</div></div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
（2）flex
IE9及以下不支持。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>全屏布局-flex</title>
<style>
html,body,.parent{height:100%;overflow:hidden;}
body{color:white;}
.parent{display:flex;flex-direction:column;}
.top{height:100px;background:blue;}
.bottom{height:50px;background:black;}
.middle{flex:1;display:flex;}
.left{width:200px;background:red;}
.right{flex:1;background:pink;overflow:auto;}
.right .inner{min-height:1000px;}
</style>
</head>
<body>
<div class="parent">
<div class="top">top</div>
<div class="middle">
<div class="left">left</div>
<div class="right"><div class="inner">right</div></div>
</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
可以将position、flex的定宽定高设置为百分比，随浏览器大小的变化而变化。
如果需要定宽定高变为随内容变化，position不能实现，flex、grid可以实现。
| 方案 | 兼容性 | 性能 | 自适应 |
| position | 好 | 好 | 部分自适应 |
| flex | 较差 | 差 | 可自适应 |
| grid | 差 | 较好 | 可自适应 |
三、响应式
为了大小不同的设备都能正常访问网页，需要做一些变化，使内容能适应不同大小。响应式即一个网站能适应不同的设备，不需要定制不同的网站（www.163.com、wap.163.com），开发成本降低，但对于小屏幕有些内容不显示但仍加载，有资源上的冗余。
viewport：移动设备有一个虚拟的视窗（如宽度980px）显示网页，通过一定的比例等比缩小至屏幕宽度（如320px），使文字、图片等被缩小。需要设置viewport为设备宽度，初始缩放为1.0，防止用户手动缩放。
<meta name="viewport" content="
width=device-width
,initial-scale=1.0
,user-scalable=no
">
采用自适应布局。
媒体查询：宽度较小时，采用布局不同，或显示隐藏一部分。
@media screen and (max-width:320px){
/*视窗宽度<=320px*/
}
@media screen and (min-width:769px) and (max-width:1000px){
/*769px<=视窗宽度<=1000px*/
}
如2.2的定宽与自适应。
.left{float:left;width:100px;margin-right:20px;}
.right{overflow:hidden;}
@media screen and (max-width:320px){
.left{float:none;width:auto;margin-right:0;margin-bottom:20px;}
}
四、页面优化
页面优化是为了提高页面响应速度，对搜索引擎、屏幕阅读器友好，提高可读性和可维护性。
| 优化方法 | 备注 | |
| 减少请求 | 图片合并 |
|
| CSS文件合并 |
| |
| 少量CSS样式内联 |
| |
| 避免用@import引入CSS文件 | 多个@import请求是同步的 | |
| 减少文件大小 | 选择合适的图片格式PNG、JPG | 页面上有62%的内容来自图片 |
| 压缩图片 | ImageOptim、ImageAlpha、JPEGmini等 | |
| CSS值缩写 | 值缩写会设置每个值，不一定要值缩写 | |
| 省略值为0的单位 | 用0代替0px、0%，用.5代替0.5 | |
| 颜色值最短表示 | rgb->十六进制->三位十六进制 | |
| CSS选择器合并 | 合并属性相同的选择器 | |
| 文件压缩去掉空格等 | YUI Compressor、cssmin等 | |
| 提升页面性能 | 加载顺序，CSS在<head>中， js在<body>底部， | 边解析html边渲染， js等到页面加载完才处理 |
| 减少不必要标签数量 |
| |
| 选择器长度 | 只要能选择到就不需要嵌套 | |
| 避免使用耗性能属性 | expression、filter、border-radius、 box-shadow、gradients | |
| <img>设置宽高且不要缩放 | 方便浏览器对页面布局进行定位 | |
| 所有表现用CSS实现 | 通过更换类名等，用js需要多次渲染 | |
| 可读性和可维护性 | 规范 | 页面开发前制定，如缩进空格数、 变量名、文件名统一 |
| 语义化 | 标签、类名等 | |
| 尽量避免Hack |
| |
| 模块化 | 复用性强且减少文件大小 | |
| 注释 |
| |
五、规范与模块化
1、规范
团队规范使团队成员间的代码交流更容易，方便开发和维护。
前四种规范与CSS相关，其它规范与html和图片相关。
| 文件规范 | 文件分类 | 通用类base,lib,ui,… 业务类album,artist,… |
| 文件引入 | 行内样式，不推荐 外联引入 内联引入 | |
| 文件本身 | 文件名，如由小写字母、数字、-组成 编码，UTF-8 | |
| 注释规范 | 块状注释 | 统一缩进，在被注释对象之上，注释内容 |
| 单行注释 | 文字两端需空格（中文乱码），在被注释对象之上 | |
| 行内注释 | 文字两端需空格，在分号之后 | |
| 命名规范 | 分类命名 | 重名可能会导致样式污染 |
| 命名格式 | 建议小写，权衡长度和可读性 | |
| 语义化命名 | 以内容语义命名，如导航nav而不是命名为top | |
| 书写规范 | 单行与多行 | 二选一，遵守之 |
| 空格与分号 | 缩进、规则内空格，保留最后一个属性值的分号 | |
| 属性顺序 | 依据属性的重要性按顺序书写。 | |
| Hack方式 | 不滥用Hack，统一各浏览器的Hack方式 IE6 _property:value IE6,7 *property:value | |
| 值格式 | 统一属性值，color,url()（无/单/双引号） | |
| html规范 | 文档声明 | 如<!DOCTYPE html>，且首行顶格开始 |
| 闭合 | 闭合标签<div></div> 自闭合标签<input> or <input/> | |
| 属性 | class=”logo” or class=’logo’ <input readonly> or <input readonly=”readonly”> | |
| 层级 | 用缩进（二/四个空格）体现层级，提高可读性 标签正确嵌套，但不宜太深 | |
| 注释 | <!-- LOGO -->注释开头<!-- /LOGO -->注释结尾 | |
| 大小写 | 标签和属性均小写，除了DOCTYPE | |
| 图片规范 | 文件名称 | 语义、长度 |
| 保留源文件 |
| |
| 图片合并 | 尽可能使用sprite技术，可按模块、业务、页面划分 |
分类命名。
属性重要性。
Hack方式。
/* IE7显示#888，IE6显示#fff，其它浏览器显示#000 */
.m-list{color:#000;*color:#888;_color:#fff;}/*设置顺序不能变*/
2、模块化
模块指一系列相关联的结构组成的整体，带有一定语义，而非表现。如分页器、图片轮播。模块化利于多人协同开发，避免样式污染问题；便于扩展和重用；可读性、可维护性好。
以模块分类命名（如m-, md-）；以一个主选择器开头（唯一模块根节点）；使用以主选择器开头的后代选择器（模块子节点）。模块可扩展，增加一个模块名，原有样式仍有效。
<!-- NAV MODULE -->
<div class="m-nav">
<ul>
<li class="z-crt"><a href="#">index</a></li>
<li><a href="#">link1</a></li>
</ul>
</div>
<!-- /NAV MODULE -->
/* 导航模块 */
.m-nav{}/* 模块容器 */
.m-nav li,.nav a{}
.m-nav li{}
.m-nav a{}
.m-nav .z-crt a{}/* 交互状态变化 */
<!-- NAV-1 MODULE -->
<div class="m-nav m-nav-1">
<ul>
<li class="z-crt"><a href="#">index</a></li>
<li><a href="#">link1</a></li>
</ul>
<a class="btn">Login</a>
</div>
<!-- /NAV-1 MODULE -->
/* 导航模块扩展 */
.m-nav-1{}
.m-nav-1 a{border-radius:5px;}
.m-nav-1 .btn{}
扫一扫
1019
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
