css难点合集

一.font字体

1.字体不被选中，不可复制

.noSelect {

-webkit-user-select:none;

   -moz-user-select:none;

   -ms-user-select:none;

   user-select:none;

}

2.字间距

letter-spacing: ;

二.鼠标相关

1.鼠标放上去显示小手

.logo:hover {

     cursor:pointer

  }

三，布局相关

1.同一行多个div，输入内容后发生错位

原因：同一行的行内元素对齐方式默认是底部对齐，即vertical-align：baseline，对于内容为空的inline-block元素而言，该元素的基线就是它的margin底边缘，否则就是元素的内部最后一行内联元素的基线

解决：1.更换布局方法，采用float布局，考虑脱离流后后面元素不易控制，故不首选​​​​​​​

           2.改变vertical-align属性为vertical-align:top，把元素的顶端与行中最高元素的顶端对齐

2.宽高由内容撑起，但需要全屏背景图，例如登录页面