2020-12-05前端面经2

flex布局

flex布局详解

flex布局就是弹性布局，用来给盒装模型提供最大的灵活性，可以直接给容器设置display：flex，行内元素display：inline-flex

flex在容器上有五个属性

1.flex-direction决定主轴的方向，有四个api
row：默认值，水平方向从左到右
row-reverse：水平方向从右到左
column：垂直方向从上到下
column-reverse：垂直方向从下到上
.box{
flex-direction:row | roe-reverse | colume | column-reverse
}

2.flex-wrap
no-wrap：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方

3.justify-content决定了主轴的对齐方式
center：居中
flex-start：从左到右
flex-end：从右到左
space-between：两端对齐，中间的项目间隔相同
space-around：每个项目的间隔相同

4.align-items决定交叉轴的方式
center：居中
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
baseline：项目的第一行文字对齐
stretch：默认值，如果未设置高度或者设为auto，将撑满整个高度

5.align-content定义了多根轴线的对齐方式，如果只有一根轴线该属性不起作用
center：与交叉轴的中点对齐
flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔相同
space-around：两端与边框的距离是中间各个轴线之间的一半
stretch：默认值，轴线占满整个交叉轴

项目属性有6个：order，flex-grow，flex-shrink，flex-basis，flex，align-self
order：定义项目的排列顺序，数值越小，越靠前，默认为0
flex-grow：定义放大的比例，默认为0，如果是1，就等分
flex-shrink：定义缩小的比例，默认为1，即就是空间不足，缩小，负值无效
flex是flex-grow，flex-shrink，flex-basis的简写，默认为 0， 1， auto
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

隐藏元素的方式

display：none（不占空间）
visibility：hidden
opacity：0

重排reflow和重绘repaint

重排重绘详解

页面生成的过程

1.HTML 被 HTML 解析器解析成 DOM 树；
2.CSS 被 CSS 解析器解析成 CSSOM 树；
3.结合 DOM 树和 CSSOM 树，生成一棵渲染树(Render Tree)，这一过程称为 Attachment；
4.生成布局(flow)，浏览器在屏幕上“画”出渲染树中的所有节点；
5.将布局绘制(paint)在屏幕上，显示出整个页面。
第四步和第五步是最耗时的部分，这两步合起来，就是我们通常所说的渲染。

前端安全问题

安全问题详解