介绍 #

• 简单来说就是 HTML 页面的整体结构或骨架，类似于传统的报纸或杂志中的排版；
• 布局不是某个技术内容，而是一种设计思想；
• CSS 知识体系的重中之重
• 早期以 table 为主（简单）
• 后来以技巧性布局为主（难）
• 现在有 flexbox/grid（偏简单）
• 响应式布局是必备知识

主要布局分类 #

• table 布局
• Float 布局
• inline-block 布局
• 盒布局
• Flex 布局
• Grid 布局
• Columns 布局
• Shapes 布局

经典面试题 #

• 已知宽高实现盒子水平垂直居中
• 宽高不定实现盒子水平垂直居中
• 实现两栏（三栏）布局的方法
• 两列布局 & 三列布局？
• 块元素 (div) 水平垂直居中，文字内容在 div 中始终水平垂直居中？
• 让元素垂直左右居中的方法，越多越好（最好包含 flex 的方法）
• 实现页面的三栏布局，左右均为定宽，高度可以自适应；
• 经典布局方案：圣杯、双飞翼 布局等；