移动端的小TIPS

1.overflow巧妙运用

无圆角显示：

圆角是给父盒子添加的，但由于图片的大小超过父盒子的宽度，所有图片溢出

 添加后，有圆角显示

2.CSS：垂直对齐vertical-align，且能去除图片底侧空白缝隙

vertical-align只针对于行内元素或行内块元素，对于块级元素中的垂直对齐是不管用的。
尤其是行内块元素，通常会用来控制图片/表单和文字的对齐。
vertical-align：baseline：基线对齐（）默认的就是文字和图片基线对齐）。
vertical-align：middle：垂直居中。
vertical-align：top：顶部对齐。
vertical-align：bottom：底部对齐。

vertical-align除了可以让行内元素和行内块元素垂直对齐外，还可以去除图片底侧空白缝隙，如果父盒子里面包含了一个图片，在图片的下面会多出几像素的缝隙。
这是因为图片和表单属于行内块元素，底线会和父盒子的基线对齐，底部就会出现几像素的缝隙。
解决办法：
第一种：给vertical-align：middle/top/bottom，就是不要给baseline基线对齐。

/*这三种都可以解决缝隙问题*/
vertical-align:middle;
vertical-align:top:
vertical-align:bottom;

第二种：将图片转换为块级元素，因为vertical-align对块级是不起作用的，这样也不会存在几像素的问题了。

 3.float

行内元素添加float之后，可以直接设置宽高，不用转化为块

4.CSS为何清除浮动以及清除浮动方法总结

http://t.csdn.cn/QqhSl

5.CSS中-webkit-user-select:none的用途

http://t.csdn.cn/4uNyf

6.盒子转化为box-sizing: border-box时文字居中需注意

 盒子转化为box-sizing:border-box,其含义是盒子的大小包括margin和padding

其儿子  height: 26px;    border: 1px solid #ccc;

要使文字居中，要设置  line-height: 24px;

7.box-shadow

http://t.csdn.cn/5wmsf

4.巧用属性选择器更换背景图

 

 http://t.csdn.cn/H3C6J

5.巧用backgreound使图片在盒子内居中对齐

6.搜索引擎优化

 原本的热门活动是以图片的形式存放的，但这里增加搜索引擎优化，后期在css中直接隐藏该样式即可

隐藏的方法

 补充：1、定义：

text-indent 属性规定文本块中首行文本的缩进。

2、使用：

将段落的第一行缩进2em：

div{text-indent:2em;}

注意: 1em等于一个汉字的大小

3、注意事项：

3-1、允许使用负值。如果使用负值，那么首行会被缩进到左边。

3-2text-indent无法作用于行内元素

7.小三角的做法

8.固定定位跟父级没有关系，它以屏幕为准

9.h4 自带margin值，

10.width:100%，在做动画时，画面会有种渐变的效果

具体参考jquery手风琴案例第67行