2021-02-26 b站面试题

几道前端经典面试题

technic: 这种需求在我之前的项目当中非常常见，刚开始我只用了xxx，后来平时看掘金，看了博客后又发现有其他方式也可以实现，就记下来了，

1.盒子水平居中的五大方案

html body 元素默认宽高是 0

1 定位：父级absolute 子级relative 三种

• margin-left margin-top 需要有宽高
• transfrom：translate 不需要有宽高（兼容性不好）
• margin:auto 不需要考虑宽高 有宽高
• 

2 flex布局 主轴 侧轴 水平垂直居中 justify-content align-items

3 js的方式

2. 标准盒子模型

发现后者更好修改,(帮我解决什么问题)
box-sizing：content-box height width 指的是内容
box-sizing: border-box height width 指的是 内容加padding border（写样式方便）
flex盒模型
多列布局（基本不用）

3. 移动端响应式布局三大方案

• media 一套 (媒体查询)
• rem 两套
• vh/vw
• …

课后作业

1. 让div消失在视野中方法
1.position:absolute/relative/fixed + 方位 top/bottom/left/right: -9999px
2.display:none
3.visibility:hidden
4.width:0 + overflow:hidden
height:0 + overflow:hidden
5.margin-top/bottom/left/right:-9999px;
6.background-color:transparent
7.opacity:0
8.transform: translateX(-9999px)/translateY(-9999px)/translate(-9999px,-9999px)
9.transform: scale(0)

扩展延申

1. dispaly:none 和visibiliy:hidden 区别 ?（转载大佬的博客）
2. 回流和重绘是什么?转载大佬的博客

2.请水平z-index的工作原理，适用范围？
3.对html5的理解？
4.如何使div文字垂直居中，且文字大小根据屏幕自适应？
5.css的渲染机制？
选择器从右向左查询