布局技巧

Thu, 10 Oct 2024 00:00:00 +0800

文档流（流式布局）分为普通流、定位流、浮动流，不同流内的块级元素和行内元素的布局方式不同，布局方式用 FC（格式化上下文，含有块级格式化上下文、内联格式化上下文、层叠格式化上下文、灵活格式化上下文等）来命名；

普通流中的布局规则默认为块级盒子从上到下，垂直排列；内联盒子从左到右，水平排列等；（书写模式（writing-mode）会对流布局产生影响；

属性有：

使用 position 会脱离常规流，成为定位流，并有其自己的定位规则；

属性有：

使用 float 会脱离常规流，成为浮动流，并有其自己的定位规则；

使用 HTML 标签来布局；

<table>
    <tr>
   <th></th>
   <th></th>
    </tr>
    <tr>
   <td></td>
        <td></td>
    </tr>
</table>

2009 年 W3C 提供的方案，注意只有 IE 10+ 支持 flex；

重要的概念：flex 容器，flex 项目，主轴，交叉轴；

设置某个元素的属性 display: flex;，此元素就成了 flex 容器，flex 容器内的元素是 flex 项目；

二维布局方式，相对于使用 HTML 结构实现的 table 布局，grid 布局都是在 CSS 中完成的；

布局技巧 on Last Stand