最近，有个朋友向我诉苦说，面试的时候突然被问到了如何实现布局和原理，有点懵。之前JavaScript的部分回答得挺好的，偏偏在这里翻船了，完全没有思路，后面的面试状态一落千丈。结局也如他所料，没有被录取。 我给这个朋友做了解答之后，回家整理出此文。希望其他小伙伴面试中，再被问及…

简单来说就是页面分为左中右3个部分，其中左右两侧固定宽度，而中间部分自适应。 假设每列的高度为150px，左列宽度为200px，右列宽度为150px，中间部分自适应。 设置margin-right:-150px;right上移到center一行，完成圣杯布局。此时改变窗口大小，…

BFC(块格式化上下文): 是Web页面可视化渲染CSS的一部分, 是布局过程中生成块级盒子的区域。也是浮动元素与其他元素的交互限定区域。 简单理解就是具备BFC特性的元素, 就像被一个容器所包裹, 容器内的元素在布局上不会影响外面的元素。 可见两个块元素外边距为20px。 我…

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting con…

对于BFC的概念以及应用场景一直都不是很明白，今天着重去了解了一下，做了以下总结。 在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素…

React是一个构建用户界面的js库,从UI=render()这个等式中就很好的映射了这一点,UI的显示取决于等式右边的render函数的返回值. 因为在render方法中声明样式化组件，每次都会动态渲染创建一个新的组件。这意味着React必须在每个后续渲染中丢弃并重新计算DO…

样式与状态相关的情况越来越多，需要动态、能直接访问组件state的css。 css不是组件化。一切样式都是全局，类的命名重复，但当你使用三方插件时却无法避免命名冲突。 Vue可以通过计算属性计算出一个样式对象，解决了样式与状态相关的情况。切换class也可以做到 最普通常见的方…