关于Web的学习（18.5.26）——css篇

1.如何修改chrome记住密码后自动填充表单的黄色背景 ？

input:-webkit-autofill{
    background-color: rgb(250, 255, 189); /* #FAFFBD; */
    background-image: none;
    color: rgb(0, 0, 0);
}

第一种情况：input文本框是纯色背景的

可以对input：-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景

input:-webkit-autofill{
    -webkit-box-shadow:0 0 0px 1000px white inset;
    border：1px solid #ccc ！important;
}

除了chrome默认定义的background-color，background-image，color不能用!important提升其优先级 

以外，其他的属性均可使用!important提升其优先级

第二种情况：input文本框使用背景图片

• 图片不复杂可以使用第一种情况解决，纯色内阴影覆盖
• 使用js实现;存在一个问题是使用js方法会导致提交表单的时候无法将value值传过去。
• 使用form标签上的关闭自动填充功能：autocomplete="off"

2.你对line-height是如何理解的？

行高是指一行文字的高度，具体说是两行文字间基线的距离。

css中起高度作用的因该是height和line-height，一个没有定义height属性，最终其表现作用一定是 

line-height。

单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实 

也可以把height删除。

多行文本垂直居中：需要设置display属性为inline-block。

3.设置元素浮动后，该元素的display值是多少？

自动变成display：block

IE出现双边框的原因：浮动元素的浮动方向与margin的方向一致会出现双边框。

解决bug：

• 给浮动元素添加一个display：inline
• 给IE6写一个hack，其值为正常值的一半。

4.怎么让Chrome支持小于12px 的文字？

• 用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。
• 使用12px及12px以上字体大小：为了兼容各大主流浏览器，建议设计美工图时候设置大于或等于12px的字体大小，如果是接单的这个时候就需要给客户讲解小于12px浏览器不兼容等事宜。
• 继续使用小于12px字体大小样式设置：如果不考虑chrome可以不用考虑兼容，同时在设置小于12px对象设置-webkit-text-size-adjust:none，做到最大兼容考虑。
• 可以使用css3里的一个属性：transform:scale()
  p{font-size:10px;-webkit-transform:scale(0.8);}//0.8是缩放比例