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类名。

	.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画一个三角形

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如何居中

.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如何居中

.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：该属性设置背景图像是随页面其余部分滚动还是固定滚动。

.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