关于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是缩放比例

猜你喜欢

转载自blog.csdn.net/qq_36048820/article/details/80462698