一、文字设置简写：font:
注意点：1、size必须在family里前面，其他样式位置可以变换；2、size和family不能省略，而且两个属性必须在最后面。
二、文本：text
text-decoration:none，常 用于去年a标签的下划线
颜色转换，十六进制第一位*16+十六进制第2位=十进制，F=15，FF=15*16+15=240+15=255.
三、宽高问题
1、在标准模式下，由于没有设置html的高度，所以body的高度100%就没有参考高度，于是也就导致div的百分比高度无效，如果将css代码中的第一行设置为: body,html{height:100%}
2、div的100%是从其上一级div的宽高继承来的，有一点很关键，就是要设置div100%显示，必须设置其上一级div的宽度或高度，否则无效。
四、背景简写
background:背景颜色，图片，平铺方式，关联方式，定位方式。
任意属性都可以省略
五、精灵图
CSS精灵图需要配合背景图片和定位
六、居中
1、一行文字在盒子中居中，设置行高与盒子高度一致即可。
2、多行文字在盒子中居中，盒子高度减所有行高除以2，设置顶部和底部padding。
3、当图片宽度大于盒子宽度时，要使图片居中，可以设置margin:0px -100%;而且父元素必须设置text-align:center;
七、定位
1、绝对定位以body为参考点的时候，是以首屏的宽度和高度为参考点，而不是整个网页；一个绝对定位的元素会忽略祖先元素的padding;
八、页面布局
1、标准流（文档流/普通流）
2、浮动流没有居中对齐，没有center取值，不可以使用margin:0 auto;
浮动流中无论是块级元素还是行内元素，都可以设置宽高；
浮动流是一种半脱离标准流的排版方式，只有一种排版方式，就是水平排版；
字围效果常用于做图文混排；
用clear:both;清除浮动，margin无效
隔墙法清除浮动：外墙法，中间添加一个块级元素，并设置clear:both;内墙法，在所有子元素后添加一个块级元素并设置clear:both，内墙可以使第一个盒子使用margin-bottom,也可以撑起第一个盒子的高度;这两种方法企业中不常用，推荐使用CSS3的伪元素选择器，标签名称:before/after。
九、换行
1、word-wrap:break-word;
内容将在边界内换行，仅用于块对象，内联对象要用的话，必须要设定height、width或display:block或position:absolute。
word-break: break-all;/*让英文单词也自动换行*/ 即会拆分单词
letter-space：字母间距
word-spacing：单词间距
2、text-overflow:ellipsis;超出部分显示省略号。
注意：想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。
十、css样式：文字本身的大小不兼容解决
问题原因：同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的：IE下实际占高16px，下留白3px，ff 下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。
解决方案：给文字设定 line-height ，确保所有文字都有默认的 line-height 值，才能确保在不同浏览器下字体所占高度是一致的。这点很重要，在高度上我们不能容忍1px 的差异。