CSS 样式总结

1.text-align:

center/left/right       

      控制文本的水平对齐方式

     只要文本的上级元素中含有块级元素，并在该块级元素中放置text-align属性，就可以实现文字的对齐方式。

2.vertical-align                  

     设置元素的垂直对齐方式。 要将该属性定义在该行内 高度较高 的元素上。这样才能有效果

top:把元素的顶端与行中最高元素的顶端对齐。   

text-top:把元素的顶端与父元素字体的顶端对齐。

  middle:把此元素放置在父元素的中部。

bottom:把元素的顶端与行中最低的元素的顶端对齐。

  text-bottom:把元素的底端与父元素字体的低端对齐。

 vertical-align:20px：可以使用定长表示元素底部与父元素基线（baseline）的距离

图片的基线为：图片的底部。

文字的基线为：文字的底部。

英文的基线为：小写s的底部。

默认一行内以最高元素的底部作为正行的基线。亦或是父元素的基线。

3.table 

       table-layout:fixed          列宽度由表格的宽度和列宽度决定。不设置则按照列内的内容设定。该属性不受内容的限制，直接调整列宽度就可以设置列宽。

注意：该前提是整个表格的宽度没有超过父元素的宽度，如果超过了 ，单一调解一列的宽度会缩放其它单元格的宽度！！！

4.position:absolute;      一般父级元素相对定位，如果是弹出框 就无所谓，如果要让绝对定位的元素在父级元素里面定位，那就让父级元素相对定位。

绝对定位的元素一定要设置  top 或者left  不然定位会不起作用。

5.opacity:   透明度  0-1     改属性具有继承作用，父级元素应用该属性，所有的后代元素也都拥有该属性。

因此 我们可以英勇  rgba   的颜色方式来规避该问题，但是ie9以下都不支持。需要兼容解决

.rgba {
  background: rgb(0,0,0); /*The Fallback color,这里也可以使用一张图片来代替*/
  background: rgba(0, 0, 0,0.5);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)"; /*Filter for IE8 */    
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */
 }

这里需要注意的是startColorStr和endColorStr的值#80000000,其中前两位是十六进制的透明度80,也就是透明值为0.5而后面六位是十六进制的颜色#000000(black黑色)。

将10进制的0.5 转换为16进制   为   5*255/10     大约7F     80左右 

6.如何实现让两个元素一行显示，并且距离两端均相等

让两元素  一个左浮动，另一个右浮动，然后将他们放入一个行内块元素中，设置宽高！！

或者：让同行内的右侧元素右浮动，然后左侧行内元素  text-align:top; 这样他们两个元素就都位于行内的顶部了！！这样可以避免浮动之后元素脱离文档流后 父级元素塌陷，因为有左侧的未浮动元素撑着！！

7.设置图片头像的时候：

将img的height：100%；width：100%；

外部边框span{别忘了：display:inline-block; border-radius：50%；变为圆形 。overflow:hidden; 将边框变成覆盖！ }

8.如果input标签与后面的 a按钮不在同一行，可以利用vertical=一个具体的px来解决问题！！可以精确到0.5px

9.一行中左右两侧文字  左侧文字与右侧文字大小不一样 

解决：左侧小文字{float：left；padding-top:rem;}

右侧打蚊子{float:right;}

当然，两元素要在同一个父级元素里