面试之CSS篇

1：两栏布局---左边固定宽度，右边撑满所有

使用flex弹性布局 left给定宽度，右边flex:1

2：三栏布局

两边绝对定位 中间使用margin或者padding 记住子绝父相

3：元素水平居中的方法

定位+margin:auto

定位+margin-left/top:-高宽的50%===定位+transform：translate

flex弹性布局 flex justify-contect align-items

4:浅谈flex弹性布局

简单来说flex布局里面的容器 有主轴和交叉轴

felx的一些属性

justify-content align-items flex flex-direction flex-wrap是否换行 等等

应用场景：实现元素垂直水平居中，实现两栏布局三栏布局等等

4：哪些方式可以隐藏页面元素，它们之间的区别

01 display：hidden 元素直接消失 会直接重排并且重汇

02 visibility:hidden 隐藏元素 不会引起重排但会重汇

03:opacity:0 透明 引起重汇

04:设置 高宽度为0

05:定位 利用margin移除改元素

上面方法中只有 opacity会响应点击事件，只有visibility和opacity会占据页面空间

5：选择器权重比价

！import >style(行内样式)>id>class=属性

6：CSS画三角形

高宽设置为0，然后设置边框，根据想要的三角形反向 给盒子相对于的两个反向设置边框颜色为transparent

7：对盒模型的理解

都由 content padding border margin组成

标准盒模型 盒子内容高宽 是content

ie盒模型 盒子内容高宽 是content+padding+border

8:对重排和重绘的理解

当我们对 DOM 的修改引发了 DOM几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性，然后再将计算的结果绘制出来

当我们对 DOM的修改导致了样式的变化（color或background-color），却并未影响其几何属性时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了回流