BFC

BFC块级格式化上下文Block Formatting Context，是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域，是用于布局块级盒子的一块渲染区域，并且与这个区域的外部毫无关系，是一个独立的区域，是一个环境。

触发BFC

1. 浮动float
2. 非静态定位position为absolute或fixed
3. display为inline-block、table-cell、table-caption、flow-root、flex 或 inline-flex 元素的直接子元素、grid 或 inline-grid 元素的直接子元素
4. overflow不为visible
5. contain 值为 layout、content 或 paint 的元素

画一条0.5px的线

参考

CSS布局

六种布局方式总结：

• 圣杯布局
• 双飞翼布局
• Flex 布局
• 绝对定位布局
• 表格布局
• 网格布局

圣杯布局

圣杯布局是指布局从上到下分为 header、container、footer，然后 container 部分定为三栏布局。这种布局方式同样分为header、container、footer。圣杯布局的缺陷在于 center 是在 container 的 padding 中的，因此宽度小的时候会出现混乱。

重绘和重排

重绘

DOM 的变化影响到了预算内宿的几何属性比如宽高，浏览器重新计算元素的几何属性， 其他元素的几何属性也会受到影响，浏览器需要重新构造渲染树，这个过程称之为重排，

重排

浏览器将受到影响的部分重新绘制在屏幕上 的过程称为重绘。

原因

引起重排重绘的原因有：

• 添加或者删除可见的 DOM 元素
• 元素尺寸位置的改变 浏览器页面初始化，
• 浏览器窗口大小发生改变，重排一定导致重绘，重绘不一定导致重排，

多行元素的文本省略号

display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;

CSS三种隐藏元素的区别

visibility:hidden;

visibility:hidden，该元素 隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件

opacity:0;

opacity:0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些 事件，如 click 事件，那么点击该区域，也能触发点击事件的

display:none;

关于 JS 动画和 css3 动画的差异性

渲染线程分为 main thread 和 compositor thread，如果 css 动画只改变 transform 和 opacity， 这时整个 CSS 动画得以在 compositor trhead 完成（而 JS 动画则会在 main thread 执行，然后出发 compositor thread 进行下一步操作），特别注意的是如果改变 transform 和 opacity 是不会 layout 或者 paint 的。

区别：

• 功能涵盖面，JS 比 CSS 大
• 实现/重构难度不一，CSS3 比 JS 更加简单，性能跳优方向固定
• 对帧速表现不好的低版本浏览器，css3 可以做到自然降级
• css 动画有天然事件支持 css3 有兼容性问题

说一下块元素和行内元素

块元素

独占一行，并且有自动填满父元素，可以设置 margin 和 pading 以及高度和宽 度

行内元素

不会独占一行，width 和 height 会失效，并且在垂直方向的 padding 和 margin 会失效

垂直居中的方法

【不定宽高】

不定宽高的方法基本都适用于定宽高的情况

1、flex

// 父元素设置
display: flex;
justify-content: center;
align-items: center;

Flex布局

Flex布局也称弹性布局，可以为盒状模型提供最大的灵活性，是布局的首选方案，现已得到所有现代浏览器的支持。

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

容器属性

flex-direction

flex-direction属性决定主轴的方向，取值为row | row-reverse | column | column-reverse。