布局技巧

1、普通流（常规流） 文档流（流式布局）分为 普通流、定位流、浮动流，不同流内的块级元素和行内元素的布局方式不同，布局方式用 FC（格式化上下文，含有 块级格式化上下文、内联格式化上下文、层叠格式化上下文、灵活格式化上下文等）来命名； 普通流中的布局规则默认为块级盒子从上到下，垂直排列；内联盒子从左到右，水平排列等；（书写模式（writing-mode）会对流布局产生影响； 2、position 属性有： static：默认值，元素依然按照 普通流 的定位规则定位； relative absolute sticky fixed 使用 position 会脱离常规流，成为定位流，并有其自己的定位规则； 3、float 属性有： left right none inherit 使用 float 会脱离常规流，成为浮动流，并有其自己的定位规则； 4、table 使用 HTML 标签来布局； <table> <tr> <th></th> <th></th> </tr> <tr> <td></td> <td></td> </tr> </table> 5、flex 2009 年 W3C 提供的方案，注意只有 IE 10+ 支持 flex； 重要的概念：flex 容器，flex 项目，主轴，交叉轴； 设置某个元素的属性 display: flex;，此元素就成了 flex 容器，flex 容器内的元素是 flex 项目； flex 容器的属性： flex-direction flex-wrap flex-flow justify-content align-items align-content flex 项目的属性 flex （flex-grow、flex-shrink、flex-basis） order align-self 6、grid 二维布局方式，相对于使用 HTML 结构实现的 table 布局，grid 布局都是在 CSS 中完成的； ...