前端学习记录12-CSS-(垂直对齐，去除图片底侧缝隙，溢出文字处理，外边距为负，制作三角形，精灵技术)

垂直对齐

有宽度的块级元素
使用 margin:0 auto; 可让元素水平居中对齐
文字水平居中 使用 text-align:center;
垂直居中对齐 使用 vertical-align:center;

vertical-align(检索对象垂直对齐方式)

主要针对文字、图片、表单使用
针对行内元素和行内块元素

属性值	说明
baseline	把当前盒的基线与父级盒的基线对齐。如果该盒没有基线，就将底部外边距的边界和父级的基线对齐
sub	把当前盒的基线降低到合适的位置作为父级盒的下标（该值不影响该元素文本的字体大小）
super	把当前盒的基线提升到合适的位置作为父级盒的上标（该值不影响该元素文本的字体大小）
text-top	把当前盒的top和父级的内容区的top对齐
text-bottom	把当前盒的bottom和父级的内容区的bottom对齐
middle	把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐
top	把当前盒的top与行盒的top对齐
bottom	把当前盒的bottom与行盒的bottom对齐

微调方式

<percentage>;
把当前盒提升（正值）或者降低（负值）这个距离，百分比相对line-height计算。当值为0%时等同于baseline。

<length>;
把当前盒提升（正值）或者降低（负值）这个距离。当值为0时等同于baseline。（CSS2）

去除图片底侧空白缝隙

不给宽度和高度时，在盒子中的图片撑开盒子时 会出现一个空白缝隙
其原因是因为图片会和文字的基线对齐 所以会默认预留一定空间

vertical-align

百度和网易 都会写一句 vertical-align:top 来控制