css技巧

1.实现position为fixed与absolute值时居中定位:

给需要定位的元素块外加一层div盒子，外层div盒子存在于文档流中，让外层div盒子居中定位并设置position属性为relative，内部内容据此再定位。

2.保持图片宽高比例不变形失真：

• img标签设置宽度百分比，基数为外层框宽度，高度会自动保持比例显示；
• background-size: 100% auto;
• background背景属性设置：(css3)

background-size:contain;         /*保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域*/

3.盒子内文字内容突出时，省略号代之:

overflow:hidden;text-overflow:ellipsis;

4.div块垂直居中:

在此之前，你需要知道css提供了vertical-align:middle属性实现盒子垂直居中，但遗憾的是这个属性只对html的一些控件如“图片，单选，复选”等等有效果，这里，我们可以这样模拟实现，即利用父元素块的display:table属性值模拟table效果，子div块的display:table-cell模拟td效果，子块加上vertical-align:middle,这时子块里的内容起到居中效果，如果子块不设置高度和宽度，默认为与父块等同。