今天完成了什么：

完成任务12第一个页面；

今天遇到了什么问题：

类名命名规范；

优化代码；

1.遇到下图图片背景无法全部显示，后面换成插入图片，没用雪碧图解决了。有时间再看下图片缩放比例的文章深入了解下；

2.今天任务太慢了，写了一天才写完任务5一个页面，速度得加快点；

收获了什么：

给盒子添加固定定位后，盒子脱离了文档流；原本设置了弹性盒子会导致其功能失效，应该给与盒子100%的宽度才能显示；

CSS内部的分类及其顺序

1. 重置（reset）和默认（base）（tags）：消除默认样式和浏览器差异，并设置部分标签的初始样式，以减少后面的重复劳动！你可以根据你的网站需求设置！
2. 统一处理：建议在这个位置统一调用背景图（这里指多个布局或模块或元件共用的图）和清除浮动（这里指通用性较高的布局、模块、元件内的清除）等统一设置处理的样式！
3. 布局（grid）（.g-）：将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等！
4. 模块（module）（.m-）：通常是一个语义化的可以重复使用的较大的整体！比如导航、登录、注册、各种列表、评论、搜索等！
5. 元件（unit）（.u-）：通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中！比如按钮、输入框、loading、图标等！
6. 功能（function）（.f-）：为方便一些常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具有固定样式表现，比如清除浮动等！不可滥用！
7. 皮肤（skin）（.s-）：如果你需要把皮肤型的样式抽离出来，通常为文字色、背景色（图）、边框色等，非换肤型网站通常只提取文字色！非换肤型网站不可滥用此类！
8. 状态（.z-）：为状态类样式加入前缀，统一标识，方便识别，她只能组合使用或作为后代出现（.u-ipt.z-dis{}，.m-list li.z-sel{}），具体详见命名规则的扩展相关项。

功能类和皮肤类样式为表现化的样式，请不要滥用！以上顺序可以按需求适当调整。

以上分类的命名方法详见命名规则

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

/* 重置 */ div,p,ul,ol,li{margin:0;padding:0;} /* 默认 */ strong,em{font-style:normal;font-weight:bold;} /* 统一调用背景图 */ .m-logo a,.m-nav a,.m-nav em{background:url(images/sprite.png) no-repeat 9999px 9999px;} /* 统一清除浮动 */ .g-bdc:after,.m-dimg ul:after,.u-tab:after{display:block;visibility:hidden;clear:both;height:0;overflow:hidden;content:'.';} .g-bdc,.m-dimg ul,.u-tab{zoom:1;} /* 布局 */ .g-sd{float:left;width:300px;} /* 模块 */ .m-logo{width:200px;height:50px;} /* 元件 */ .u-btn{height:20px;border:1px solid #333;} /* 功能 */ .f-tac{text-align:center;} /* 皮肤 */ .s-fc,a.s-fc:hover{color:#fff;}

注：在你样式中的选择器总是要以上面前五类开头，然后在里面使用后代选择器。

　　如果这五类不能满足你的需求，你可以另外定义一个或多个大类，但必须符合单个字母+"-"为前缀的命名规则，即 .x- 的格式。

　　特殊：.j-将被专用于JS获取节点，请勿使用.j-定义样式。

选择器、属和值都使用小写

在xhtml标准中规定了所有标签、属性和值都小写，CSS也是如此。

单行写完一个选择器定义

便于选择器的寻找和阅读，也便于插入新选择器和编辑，便于模块等的识别。去除多余空格，使代码紧凑减少换行。

如果有嵌套定义，可以采取内部单行的形式。

1 2 3 4 5 6 7 8 9 10 11

/* 单行定义一个选择器 */ .m-list li,.m-list h3{width:100px;padding:10px;border:1px solid #ddd;} /* 这是一个有嵌套定义的选择器 */ @media all and (max-width:600px){     .m-class1 .itm{height:17px;line-height:17px;font-size:12px;}     .m-class2 .itm{width:100px;overflow:hidden;} } @-webkit-keyframes showitm{     0%{height:0;opacity:0;}     100%{height:100px;opacity:1;} }

最后一个值也以分号结尾

通常在大括号结束前的值可以省略分号，但是这样做会对修改、添加和维护工作带来不必要的失误和麻烦。

省略值为0时的单位

为节省不必要的字节同时也使阅读方便，我们将0px、0em、0%等值缩写为0。

1	.m-box{margin:0 10px;background-position:50% 0;}

使用单引号

省略url引用中的引号，其他需要引号的地方使用单引号。

1 2	.m-box{background:url(bg.png);} .m-box:after{content:'.';}

使用16进制表示颜色值

除非你需要透明度而使用rgba，否则都使用#f0f0f0这样的表示方法，并尽量缩写。

1	.m-box{color:#f00;background:rgba(0,0,0,0.5);}

根据属性的重要性按顺序书写

只遵循横向顺序即可，先显示定位布局类属性，后盒模型等自身属性，最后是文本类及修饰类属性。

→	显示属性	自身属性	文本属性和其他修饰
	display	width	font
	visibility	height	text-align
	position	margin	text-decoration
	float	padding	vertical-align
	clear	border	white-space
	list-style	overflow	color
	top	min-width	background

1	.m-box{position:relative;width:600px;margin:0 auto 10px;text-align:center;color:#000;}

如果属性间存在关联性，则不要隔开写。

1 2	/* 这里的height和line-height有关联性 */ .m-box{position:relative;height:20px;line-height:20px;padding:5px;color:#000;}

私有在前，标准在后

先写带有浏览器私有标志的，后写W3C标准的。

1	.m-box{-webkit-box-shadow:0 0 0 #000;-moz-box-shadow:0 0 0 #000;box-shadow:0 0 0 #000;}

注释格式：/* 注释文字 */

对选择器的注释统一写在被注释对象的上一行，对属性及值的注释写于分号后。

注释内容两端需空格，已确保即使在编码错误的情况下也可以正确解析样式。

在必要的情况下，可以使用块状注释，块状注释保持统一的缩进对齐。

原则上每个系列的样式都需要有一个注释，言简意赅的表明名称、用途、注意事项等。

1 2 3 4 5 6 7 8 9

/* 块状注释文字  * 块状注释文字  * 块状注释文字  */ .m-list{width:500px;} .m-list li{height:20px;line-height:20px;/* 这里是对line-height的一个注释 */overflow:hidden;} .m-list li a{color:#333;} /* 单行注释文字 */ .m-list li em{color:#666;}

原则上不允许使用Hack

很多不兼容问题可以通过改变方法和思路来解决，并非一定需要Hack，根据经验你完全可以绕过某些兼容问题。

一种合理的结构和合理的样式，是极少会碰到兼容问题的。

由于浏览器自身缺陷，我们无法避开的时候，可以允许使用适当的Hack。

统一Hack方法

统一使用“*”和“_”分别对IE7和6进行Hack。如下代码所示：

1 2	/* IE7会显示灰色#888，IE6会显示白色#fff，其他浏览器显示黑色#000 */ .m-list{color:#000;*color:#888;_color:#fff;}

建议并适当缩写值

“建议并适当”是因为缩写总是会包含一系列的值，而有时候我们并不希望设置某一值，反而造成了麻烦，那么这时候你可以不缩写，而是分开写。

当然，在一切可以缩写的情况下，请务必缩写，它最大的好处就是节省了字节，便于维护，并使阅读更加一目了然。

缩写方法请查阅css手册。

选择器顺序

请综合考虑以下顺序依据：

• 从大到小（以选择器的范围为准）
• 从低到高（以等级上的高低为准）
• 从先到后（以结构上的先后为准）
• 从父到子（以结构上的嵌套为准）

以下仅为简单示范：

1 2 3 4 5 6 7 8 9 10 11 12 13

/* 从大到小 */ .m-list p{margin:0;padding:0;} .m-list p.part{margin:1px;padding:1px;} /* 从低到高 */ .m-logo a{color:#f00;} .m-logo a:hover{color:#fff;} /* 从先到后 */ .g-hd{height:60px;} .g-bd{height:60px;} .g-ft{height:60px;} /* 从父到子 */ .m-list{width:300px;} .m-list .itm{float:left;}

选择器等级

a = 行内样式style。

b = ID选择器的数量。

c = 类、伪类和属性选择器的数量。

d = 类型选择器和伪元素选择器的数量。

选择器	等级(a,b,c,d)
style=””	1,0,0,0
#wrapper #content {}	0,2,0,0
#content .dateposted {}	0,1,1,0
div#content {}	0,1,0,1
#content p {}	0,1,0,1
#content {}	0,1,0,0
p.comment .dateposted {}	0,0,2,1
div.comment p {}	0,0,1,2
.comment p {}	0,0,1,1
p.comment {}	0,0,1,1
.comment {}	0,0,1,0
div p {}	0,0,0,2
p {}	0,0,0,1

明天计划：

完成任务12