## 序言 ​ 这半个月一直在专注于 Figma-to-Code 的相关工作，也在不断思考和调研已有的 D2C（Design to Code）方案。 ​ 目前市面上主流的实现方式，大多是基于 **

如果一个团队计划开发一个面向 B 端的管理后台系统，既希望具备高效开发能力，又想要拥有好看的 UI，避免千篇一律的“土味”风格，而你作为前端主程参与开发，会怎么做?

作为一名前端开发者，我们一定都遇到过这样的需求：实现一个占满整个屏幕的欢迎页、弹窗蒙层或者一个 fixed 定位的底部菜单。 直觉告诉我们，这很简单，给它一个 `height: 100vh` 就行了

BFC到底是什么东西BFC，怎样触发BFC，BFC的规则，BFC解决了什么问题，一文搞懂，进来瞅瞅吧

浏览器使用流式布局模型 (Flow Based Layout)。 浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。 有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点…

何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。 每写好一篇文章，都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景…

在移动端开发中，并不是所有的浏览器，webview，微信等各种版本都支持标准的 flex， 但是基本上都会支持 - webkit-box，所以 flex.css 的主要作用是保证每一个属性都能支持标准 flex 或旧版本的 - webkit-box。 由于 flex.css 采用了 autoprefixer 编译，所以能够保证在浏览器不支持标准 flex 布局的情况下， 回滚到旧版本的 - webkit-box，保证移动设备中能呈现出一样的布局效果。 于是，一款移动端快速布局的神器诞生了...

本文讲了什么是BFC，BFC的概念是什么；咋样才能生成新的BFC; BFC的约束规则；BFC在布局中的应用：防止margin重叠； 清除内部浮动；自适应两（多）栏布局的