今天在写css代码的时候,忽然发现很多看起来挺简单的,但是却忽略了它们的小知识点,小细节,所以就准备把自己遇到的易忘和易忽略的css知识点整理到一起,方便自己以后查阅,也希望同时能够帮助到您(主要是针对我个人,有的可能重要,但我自己掌握的比较好,可能不会写在上面哦)
本博会持续更新,不会特意整理,遇到了就会往这里面加,就当是记笔记了
2018/6/11:遇到的css易错知识点整理
1、选择器优先级:
单个选择器的优先级:标签选择器<类选择器
复合选择器优先级:写得越精确,优先级越高(css中层级很重要,写层级关系的要比不写层级的优先级高)
2、想要通过设置margin:0 auto;的方法让元素在水平方向居中,该元素必须要设置宽度
3、浮动的div在遇到margin-bottom值时会失效,解决办法:
在包裹层(父级)用padding-bottom代替在自身上使用:margin-bottom
4、为元素设置float(值为none除外),意味着该元素变为块级元素,可以参考:float
5、子元素设置float(值为none除外)时,如果父元素自身没有设置高度,会出现高度塌陷的问题,解决办法:
1、在父元素上清除浮动(可参考清除浮动)2、为父元素设置高度(min-height/max-height/height)
ok,今天就先整理这些了,以后会不断的更新的
更新于2018/6/13
1、如果我们在样式表中对某个样式进行了设置,然后在自定义动画的动画帧中又对改样式做了不同的设置,那么我们想要保持动画帧中的设置,就要再添加一个类将样式表中的那个样式覆盖,不然动画执行完之后样式表中的样式会覆盖掉动画帧中的样式。(好绕啊,直接看例子吧)
案例1
在这个案例中我们在在动画帧中设置了transform属性值,在100%的时候,transform:rotateX(0deg),但是.item中也设置了transform:rotateX(180deg),如果我们没有在.show中添加一条transform样式,那么这个动画执行100%的时候在0deg,然后就会旋转到180deg,而我们想要的结果是执行完这条动画,让其停留在0deg,所以就要在.show重新添加transform:rotateX(0deg)去覆盖上面的.item中的值。
2、Webkit 实现了名为-webkit-font-smoothing的属性。这个属性仅在 Mac OS X/macOS 下生效。
3、看到了淘宝首页的css重置中有的两条样式,之前没怎么用过,记下来
sup {
vertical-align: text-top
}
sub {
vertical-align: text-bottom
}
更新于2018/6/17:
1、padding区会显示背景图片
2、vertical-align的默认对齐方式是和文字基线对齐,所以如果我们在HTML中添加图片的时候要注意到,如果我们不设置图片的vertical-align属性值的话,它的底部是默认有几个像素大小的,解决办法:vertical-align:top/bottom/middle,设置这三个属性值中的任何一个都是可以的,还有别的方法,请参考大神张鑫旭的博客:vertical-align
3、display:inline-block;inline-block;在横向布局中使用的时候,会有一个小问题:代码换行会解析为空格
4、设置元素为绝对定位时,会提升元素的层级
5、清浮动:清除浮动造成的影响(父级高度塌陷)
1,给浮动元素的父级加高度
拓展性不好
在不能确定父级高度的情况下不能使用
2,clear:both(用得最多的方法)
zoom:1 用来触发 haslayout(IE浏览器的BFC)
.clear{
*zoom: 1;/*兼容IE6,7*/
}
.clear:after{
content: '';
display: block;
clear: both;
}
3,BFC (是一套渲染机制)
围墙里面的内容和围墙外面的内容不会产生干扰
6、触发BFC的条件:
7、vw/vh
1vw相当于屏幕宽度的百分之一
1vh相当于屏幕高度的百分之一
8、先看段代码:
注意:当我们在用到引号中嵌套引号的时候,要注意如果外面使用的是双引号,里面就要使用单引号,同理如果外面使用的是单引号,里面就要用双引号,今天就范了一个错误,style样式中我两个引号用的都是双引号,结果图片一直出不来,最后才发现是引号的问题。
9、setInterval, setTimeout
FireFox/Chrome浏览器对setInterval, setTimeout做了优化,页面处于闲置状态的时候,如果定时间隔小于1秒钟(1000ms),则停止了定时器。但如果时间间隔大于或等于1000ms,定时器依然执行,即使页面最小化或非激活状态。
注意:因为是笔记的形式,很多都没有写的那么的详细,如果您有哪些地方是不太懂的,欢迎留言提问哦,一篇写太长看下去比较疲劳,所以一定这一篇就到此结束,之后还会在另一篇博客中持续更新哦