CSS笔记总结

时间:2022-01-10 05:21:19

1.让页面里的字体变清晰和变细

-webkit-font-smoothing: antialiased;

2.让Chrome支持小于12px 的文字

-webkit-text-size-adjust:none

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

变成display:block;

4.css多列等高如何实现

利用padding-bottom|margin-bottom正负值相抵;
设置父容器设置超出隐藏(overflow:hidden),这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度,
当它里面的任 一列高度增加了,则父容器的高度被撑到里面最高那列的高度,
其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。

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

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(, , ); /* #FAFFBD; */
background-image: none;
color: rgb(, , );
}

6.::before 和 :after中双冒号和单冒号

单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。(伪元素由双冒号和伪元素名称组成)
双冒号是在当前规范中引入的,用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法,
比如:first-line、:first-letter、:before、:after等,
而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。 想让插入的内容出现在其它内容前,使用::before,否者,使用::after;
在代码顺序上,::after生成的内容也比::before生成的内容靠后。
如果按堆栈视角,::after生成的内容会在::before生成的内容之上

7.手动写动画最小时间间隔

多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/*1000ms = .7ms

8.display:inline-block 去除间隙?

移除空格、使用margin负值、使用font-size:、letter-spacing、word-spacing
例如:下边两个li之间会产生莫名的间隙。
<ul>
  <li></li>
  <li></li>
</ul>
<style>
  ul{
    width:100%;
  }
  li {
    width:100%;
    display:inline-block;
  }
</style>
解决办法 设置ul font-size:0或line-height:0既可以

来源:https://github.com/markyun/My-blog/blob/master/Front-end-Developer-Questions/Questions-and-Answers/README.md