css常见面试题

01.视频音频的使用

<video src=""></video>

<audio>
	<source src="" type="">
</audio>

src   width height autopaly  controls loop

02.清除浮动的方式

产生的原因是子元素浮动, 且父元素没有设置高度, 父元素高度塌陷
01.给父元素单独定义高度 
02.父元素overflow: hidden 浏览器会自动检查浮动区域的高度 开启bfc-
03.添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
04.父元素添加伪元素 clear:both;content:"";visibility:hidden

03.定位

static 默认 正常流
relative 相对定位 相对于自身 不脱离文档流
absolute 绝对定位 脱离文档流 相对于父类非static
fixed 固定定位 脱离文档流 相对于浏览器窗口
sticky：粘性定位，特性近似于relative和fixed的合体，其在实际应⽤中的近似效果就是IOS通讯录滚动的时候的 『顶屁股』。

04.如何chrame浏览器小于12px

html,body{ -webkit-text-size-adjust:none; }新版本无效
-webkit-transform:scale(0.833);

05.大量图片慢怎么优化

01.图片懒加载 判断滚动条距离底部距离加载
02.图片预加载, 优先当前图片的前一张后一张
03.精灵图,svgsprite

06.怎么实现标签禁用

添加disabled 属性

07.flex布局原理

通过给父盒子添加flex属性,来控制盒子的位置和排列方式

08.px rem em的区别

绝对长度单位
相对单位

09.简述媒体查询

媒体查询扩展了media属性, 就是根据不同的媒体类型设置不同的css样式,达到自适应的目的
rem缺点,屏幕越小移动设备文字太小费眼

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> 
<!-- 样式表中的CSS媒体查询 --> 
<style> 
@media (max-width: 600px) { 
  .facet_sidebar { display: none; } 
}
</style>

10.常见的兼容性

​

11.三栏布局两边固定中间自适应

1.flex
2.绝对定位法 左右绝对定位,中间margin值撑开
3.margin负值 左右均左浮动, 左右负的margin值,中间被宽度1000%的浮动元素包起来
4.自身浮动法 左右浮动, 中间栏放最后
5.网格布局
6.table布局

12.html drag api

13.css动画如何实现

14.如何实现元素垂直居中

01.父元素display:flex, align-items:center
02.元素绝对定位 top:50%, margin-top(高度/2)
03.高度不确定 transform: translateY(-50%)
04.父元素table布局, 子元素设置vertival-algin:center

15.哪些不能继承

所有可继承: visibility cursor
块元素可继承: text-indent和 text-align
列表元素可继承:list-style list-style-type ....
内联元素继承: font, font-family,font-size, font-family,
line-height 文字和字体

可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height

16.双边距重叠问题

17.css3动画和js动画的差异性

18.画一条0.5的线

采用border-image的方式
采用transform:scale()

19.web性能优化

(1).降低请求量
	01.合并资源,
	02.减少http请求
	03.gzip压缩
	04.webp
	05.lazylaod
(2).加快请求速度
	01.预解析dns
	02.减少域名数
	03.并行加载
	04.cdn分发
(3).缓存
	01.http协议缓存请求
	02.离线缓存 manifest
	03.localstorage
(4).渲染
  01.js/css优化
  02.优化dom结构\减少dom数量,加载顺序
  03.服务端渲染
  04.pipeline
  

20. CSS优化、提高性能的方法有哪些？

    避免过度约束
    避免后代选择符
    避免链式选择符
    使用紧凑的语法
    避免不必要的命名空间
    避免不必要的重复
    最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
    避免！important，可以选择其他选择器
    尽可能的精简规则，你可以合并不同类里的重复规则
    

21. 大量图片优化

    大量图片优化
    懒加载
    预加载
    精灵图 
    svg
    

22. link和@import的区别？

    link属于XHTML标签，⽽@import是CSS提供的。
    
    ⻚⾯被加载时，link会同时被加载，⽽@import引⽤的CSS会等到⻚⾯被加载完再加载。 
    
    import只在IE 5以上才能识别，⽽link是XHTML标签，⽆兼容问题。
    link⽅式的样式权重⾼于@import的权重。 
    
    使⽤dom控制样式时的差别。当使⽤javascript控制dom去改变样式的时候，只能使⽤link标签，因为@import不是 dom可以控制的。
    

23. 哪些操作可以隐藏页面元素

    opacity:0 ：本质上是将元素的透明度将为0，就看起来隐藏了，但是依然占据空间且可以交互 
    
    visibility:hidden : 与上⼀个⽅法类似的效果，占据空间，但是不可以交互了 
    
    overflow:hidden : 这个只隐藏元素溢出的部分，但是占据空间且不可交互 
    
    display:none : 这个是彻底隐藏了元素，元素从⽂档流中消失，既不占据空间也不交互，也不影响布局 
    
    z-index:-9999 : 原理是将层级放到底部，这样就被覆盖了，看起来隐藏了 
    
    transform: scale(0,0) : 平⾯变换，将元素缩放为0，但是依然占据空间，但不可交互
    

24. 水平垂直居中

    margin:0 auto ⽅法 
    .center{ 
      height: 200px; width:200px;
      margin:0 auto;
      border:1px solid red; 
    }
    <div class="center">⽔平居中</div>
    
    flex布局，⽬前主流⽅法
    
    .center{ 
      display:flex;
      justify-content:center;
    }
    <div class="center"> 
      <div class="flex-div">1</div>
      <div class="flex-div">2</div> 
    </div>
    
    table⽅法
    .center{ 
      display:table;
      margin:0 auto; 
      border:1px solid red;
    }<div class="center">⽔平居中</div>
    

25. 雪碧图

    是⼀CSS图像合成技术，开发⼈员往往将⼩图标合并在⼀起之后的图⽚称作雪碧图。
    
    如何操作:
    		使⽤⼯具（PS之类的）将多张图⽚打包成⼀张雪碧图，并为其⽣成合适的 CSS。 每张图⽚都有相应的 CSS 类，该类 定义了background-image、background-position和background-size属性。 使⽤图⽚时，将相应的类添加到你的元素 中。
    		
    好处：
    减少加载多张图⽚的 HTTP 请求数（⼀张雪碧图只需要⼀个请求）
    提前加载资源
    
    不⾜：
    CSS Sprite维护成本较⾼，如果⻚⾯背景有少许改动，⼀般就要改这张合并的图⽚ 
    加载速度优势在http2开启后荡然⽆存，HTTP2多路复⽤，多张图⽚也可以重复利⽤⼀个连接通道搞定
    

26、你对盒模型的理解

当对⼀个⽂档进⾏布局（lay out）的时候，浏览器的渲染引擎会根据标准之⼀的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为⼀个个矩形的盒⼦（box）。CSS 决定这些盒⼦的⼤⼩、位置以及属性（例如颜⾊、背 景、边框尺⼨…）。

盒模型由content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。

27、BFC

https://juejin.cn/post/6844903544726749198#heading-5
BFC规定了内部的Block Box如何布局。
定位方案：
Formatting context：块级上下⽂格式化，它是⻚⾯中的⼀块渲染区域，并且有⼀套渲染规则，它决定了其⼦元素 将如何定位，以及和其他元素的关系和相互作⽤ 

简⽽⾔之，它是⼀块独⽴的区域，让处于BFC内部的元素与外部的元素互相隔离

内部的Box会在垂直方向上一个接一个放置。
Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
01.每个元素的margin box 的左边，与包含块border box的左边相接触。
02.BFC的区域不会与float box重叠。
03.BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
04.计算BFC的高度时，浮动元素也会参与计算。
满足下列条件之一就可触发BFC

根元素，即html
float的值不为none（默认）
overflow的值不为visible（默认）
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed

作⽤是什么？
01.防⽌margin发⽣重叠
02.两栏布局，防⽌⽂字环绕等
03.防⽌元素塌陷

28、为什么有时候⼈们⽤translate来改变位置⽽不是定位？

translate()是transform的⼀个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会 触发复合（compositions）。⽽改变绝对定位会触发重新布局，进⽽触发重绘和复合。transform使浏览器为元素创建⼀ 个 GPU 图层，但改变绝对定位会使⽤到 CPU。 
因此translate()更⾼效，可以缩短平滑动画的绘制时间。 ⽽translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发⽣这种情况。


transform是独立的合成层 / left - top 导致重绘

transfrom的原理： 创建一个渲染合成层，拥有独立的绘图层（GrapgicsLayers）。每一个GrapgicsLayers 都有一个 Graphics Context中， 其对应的GrapgicsLayers 会 paint 进Graphics Context中。合成层（Compositor） 最终会负责将由Graphics Context输出的位图合并成最终屏幕展示的图案。

29、伪类和伪元素的区别是什么？

伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进 ⾏对元素的改变。

30、京城 响应式布局用到的技术

媒体查询
百分比布局
rem布局
视口单位
vm和rem
图片自适应

响应式布局要点：
设置viewport 、 媒体查询、 字体适配（字体单位）、百分比布局、图片自适应、flex、grid、san 删格系统 
bootstrop
成熟的ui框架

31.实现动画的方式

css3 之前： hover 和 js改变css属性实现

css3 新增 
transition   - transition:width 2s;
  transition-property	规定设置过渡效果的 CSS 属性的名称。
  transition-duration	规定完成过渡效果需要多少秒或毫秒。
  transition-timing-function	规定速度效果的速度曲线。
  transition-delay	定义过渡效果何时开始。
  
animation

animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

animation:mymove 5s infinite;
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}


animation与transition不同的是：keyframes提供更多的控制，尤其是时间轴


animation 动画：用与设置动画属性 6 个属性

transtion 过渡 用于设置样式过渡，与animation有类似效果但是细节有很大的不同

transform 变形： 用于元素的旋转、缩放、移动或倾斜

translate 移动 ： transform的一个属性

32、布局的方式

静态布局
弹性布局
网格布局
自适应布局
响应式布局 （媒体查询，rem，em）
浮动布局
定位布局

33、你nth-child 和 nth-type-of 有什么区别？

34、简述 Grid 布局 flex布局

35、实现三角形

.box {
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 40px solid #ff0000;
}

36、说下css 预处理器， less带来的好处

css 重复选择器
没有变量和样式复用机制

增加css的编程特性的扩展语言，经过编译产出标准的css样式
css代码更加整洁，更易维护，代码量更少
修改更快,基础颜色使用变量,一处动处处动.
常用代码使用代码块,节省大量代码
css嵌套减少了大量的重复选择器，避免一些低级错误
变量、混入大大提升了样式的复用性
额外的工具类似颜色函数(lighten, darken, transparentize等等)，mixins，loops，这些方法使css更像一个真正的编程语言，让开发者能够有能力生成更加复杂的css样式。

37、重排、重绘

https://juejin.cn/post/6844903569087266823#heading-0

当我们改变了一个元素的尺寸位置属性时，会重新进行样式计算（computed style）布局(layout)绘制（paint）以及后面的所有流程，这种行为成为重排。

当改变了某个元素的颜色属性时不会重新触发布局，但还是会触发样式计算和绘制这就是重绘。

我们可以发现重排和重绘都会占用主线程，还有js也会运行在主线程，所以就会出现抢占执行时间的问题，如果你写了一个不断导致重排重绘的动画，浏览器则需要在每一帧都运行样式计算布局和绘制的操作。

触发的一些因素
1. 页面首次进入的渲染。
2. 浏览器 resize
3.元素位置和尺寸发生改变的时候 
4. 可见元素的增删 
5. 内容发生改变  6. 字体的 font 的改变。 7. css 伪类激活。 8. ...

如何优化
我们知道当前页面以每秒60帧的刷新率时才不会让用户感觉到页面卡顿，如果在运行动画是还有大量的js任务需要执行，因为布局、绘制和js执行都是在主线程运行的，当在一帧的时间内布局和绘制结束后，还有剩余时间js就会拿到主线程的使用权，如果js执行时间过长，就会导致在下一帧开始时js没有及时归还主线程，导致下一帧动画没有按时渲染，就会出现页面的卡顿。

第一种优化方式：

requestAnimationFrame，它会在每一帧被调用，通过回调api的回调，可以把js运行任务分成一些更小的任务块，在每一帧事件用完前暂停js执行归还主线程，这样的话在下一帧开始时，主线程就可以按时执行布局和绘制。

第二种优化方式：

栅格化的整个流程不占用主线程，只在合成器线程和栅格线程中运行，这就意味着它无需和js抢占主线程。如果反复进行重绘和重排可能会导致掉帧，这是因为有可能js执行阻塞了主线程，而css中有个动画属性transform通过该属性实现的动画不会经过布局和绘制，而是直接运行在合成器线程和栅格线程，所以不会受到主线程中js执行的影响。更重要的是听过transform实现的动画由于不需要经过布局绘制样式计算等操作，所以节省了很多运算事件（方便实现负责的动画）

避免重绘重排具体方案
css
使用 transform 替代 top等位移；
使用 visibility 替换display：none
避免使用table布局
尽可能在DOM树的最末端改变class
避免设置多层内联样式，尽量层级扁平
将动画效果应用到position属性为absolute或fixed的元素上
避免使用css表达式
将频繁重绘或者回流的节点设置为图层，比如video，iframe
CSS 硬件加速（GPU加速），可以是transform、opacity、filters 提前告诉浏览器元素会发生什么变化；

JS
避免频繁操作样式，合并操作
避免频繁操作dom, 合并操作；
防抖节流控制频率；
避免频繁读取会引发回流/重绘的属性，比如上面的c、o、s属性
对具有复杂动画的元素使用绝对定位

38、css超出省略

39、命名空间、命名方式

40.伪类和伪元素的区别

41.移动端1px解决方案

42.css 动画

43.link和@import的区别？