文章目录
-
- 1、清除浮动
- [2、opacity: 0、visibility: hidden、display: none 的区别](#2、opacity: 0、visibility: hidden、display: none 的区别)
- 3、css画一个三角形
- 4、常见的主流浏览器前缀
- 5、重绘与重排的区别?
- 6、如何优化图片
- [7、CSS3 中 transition 和 animation 的属性分别有哪些](#7、CSS3 中 transition 和 animation 的属性分别有哪些)
- [8、居中为什么要使用 transform(为什么不使用 marginLeft/Top)](#8、居中为什么要使用 transform(为什么不使用 marginLeft/Top))
- [9、 用于控制图像滚动的属性是什么?](#9、 用于控制图像滚动的属性是什么?)
- 10、伪类与伪元素
- 11、css样式权重(优先级)
1、清除浮动
先来回答一个问题,为什么会需要清除浮动?
如果一个dom内的所有子dom都是float:left 或者float:right,那么所有的子dom都处于另外一个层级,父dom所在的层级将为空,所以如果不规定父dom的高度,那父dom的高度就是0
1.清除浮动最简单的方式就是规定父dom的高度 height:xxxpx;
2.给父级dom添加overflow:hidden 清除浮动方法 当overflow 属性不为 visible时,会形成一个BFC的独立渲染区域,这个区域将会视float为同一个独立层级进行渲染,所以float dom的高度,就是整个BFC渲染区域的高度
3.万能清除法 ::after 伪元素清浮动(现在主流方法,推荐使用)给父dom加一个clear类名。
css
.clear::after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
2、opacity: 0、visibility: hidden、display: none 的区别
display: none (让dom彻底不排布也不渲染,自然是不占空间,也不能点击)
visibility: hidden(让dom只排布,不渲染,所以占据空间,但不能点击)
opacity: 0(让dom既排布,又渲染出来,只不过颜色是透明的,看不见,但不代表没渲染出来,它是存在的,占据空间,可以点击)
3、css画一个三角形
css
div{
width: 0;
height: 0;
border: 10px solid red;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}
4、常见的主流浏览器前缀
-moz-:firefox 火狐浏览器兼容性前缀
-o-:opera 浏览器兼容性前缀
-ms-:早期ie浏览器以及edge浏览器兼容性前缀
-webkit-:主流的google浏览器以及Safari,Opera的较新版本,几乎所有的iOS浏览器 的兼容性前缀
随着前端技术的发展,曾经的五大主流浏览器也会使用统一的内核,目前来看webkit最有希望。
5、重绘与重排的区别?
首先确立一点,渲染树是合成了html和css之后才渲染到页面上的,也就是说,至少会有一次排布和绘图的过程。css计算->排布->绘图,总是这样一个过程。
排布就是计算dom放置在页面的位置和大小,绘图就是将dom的每一个像素点展示出来。
1.如果用户的操作,或者前端程序的变化,导致页面发生了变化,就可能发生重绘和重排。
2.通俗意义上讲,如果一个dom的大小,位置发生变化,就会造成重排,如果一个dom只是颜色,背景发生变化,可能只会造成重绘。
3.重排必定会重绘,而重绘不一定会重排。
4.重绘与重排也是有范围的,页面的dom不总是处于同一层级,比如position:fixed/absolute,z-index,transform等动画,都会让部分dom在一个全新的层级中进行布局,层与层之间是相互独立的,层内的重绘与重排不会影响到层外,所以开发过程中,合理切割层级将会有效降低重绘与重排带来的性能消耗。
6、如何优化图片
css处理图片也有多种手段
1.将多个图标文件整合到一张图片中(雪碧图或者精灵图)在background中我们可以设置position的xy坐标,来展现不同的内容。
2.一般图片的size小于8k的情况下,直接转为base64使用。
3.对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量,缺点就是兼容性并不好
4.对于移动端来说,屏幕宽度就那么点,完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载,可以计算出适配屏幕的宽度,然后去请求相应裁剪好的图片。
5.一些简单的装饰图片,或者是简单的动图,尽量使用css动画效果或者css来实现。
7、CSS3 中 transition 和 animation 的属性分别有哪些
transition 过渡动画:
transition-property:指定过渡的 CSS 属性
transition-duration:指定过渡所需的完成时间
transition-timing-function:指定过渡函数
transition-delay:指定过渡的延迟时间
animation 关键帧动画:
animation-name:指定要绑定到选择器的关键帧的名称
animation-duration:动画指定需要多少秒或毫秒完成
animation-timing-function:设置动画将如何完成一个周期
animation-delay:设置动画在启动前的延迟间隔
animation-iteration-count:定义动画的播放次数
animation-direction:指定是否应该轮流反向播放动画
animation-fill-mode:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式
animation-play-state:指定动画是否正在运行或已暂停
8、居中为什么要使用 transform(为什么不使用 marginLeft/Top)
先说一下transform和marginleft/top是如何居中的
marginleft/top如何居中
html
.position-outter {
position: relative;
width: 300px;
height: 300px;
background-color: plum;
}
.position-center {
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
margin-left: -50px;
margin-top: -50px;
background-color: pink;
}
transform如何居中
css
.translate-position-outter {
position: relative;
width: 300px;
height: 300px;
background-color: plum;
}
.translate-position-center {
position: absolute;
left: 50%;
top: 50%;
background-color: pink;
transform: translate(-50%, -50%);
}
transform不会造成页面大面积的重绘与重排
transform 属于合成属性(composite property),对合成属性进行 transition/animation 动画将会创建一个合成层(composite layer),这使得被动画元素在一个独立的层中进行动画。只要该层的内容不发生改变,就没必要进行重绘(repaint),浏览器会通过重新复合(recomposite)来形成一个新的帧。
top/left属于布局属性,该属性的变化会导致重排(reflow/relayout),所谓重排即指对这些节点以及受这些节点影响的其它节点,进行CSS计算->重排->重绘过程,浏览器需要为整个层进行重绘造成了极大的性能开销。
9、 用于控制图像滚动的属性是什么?
background-attachment:该属性设置背景图像是随页面其余部分滚动还是固定滚动。
css
.box {
background-image: url("img.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
10、伪类与伪元素
伪元素:能够在视觉上呈现出来,但在又无法在dom中找到的元素,常见一些页面icon或者tooltip是通过伪元素实现的,伪元素常用的有,xxx::after,xxx::before,xxx::first-line,xxx::first-letter
伪类:将特殊的效果添加到特定选择器上。它是已有元素上添加类别的,不会产生新的元素,常见的包括,:hover,:nth-child(),:first-child,等
11、css样式权重(优先级)
!important > 内联样式 > id > class > tag