Document

## 1、相关知识 ### 1、普通流（常规流）文档流（流式布局）分为普通流、定位流、浮动流，不同流内的块级元素和行内元素的布局方式不同，布局方式用 FC（格式化上下文，含有块级格式化上下文、内联格式化上下文、层叠格式化上下文、灵活格式化上下文等）来命名；普通流中的布局规则默认为块级盒子从上到下，垂直排列；内联盒子从左到右，水平排列等；（书写模式（writing-mode）会对流布局产生影响； ### 2、position 属性有： - static：默认值，元素依然按照普通流的定位规则定位； - relative - absolute - sticky - fixed 使用 position 会脱离常规流，成为定位流，并有其自己的定位规则； ### 3、float 属性有： - left - right - none - inherit 使用 float 会脱离常规流，成为浮动流，并有其自己的定位规则； ### 4、table 使用 HTML 标签来布局； ```

``` ### 5、flex 2009 年 W3C 提供的方案，注意只有 IE 10+ 支持 flex；重要的概念：flex 容器，flex 项目，主轴，交叉轴；设置某个元素的属性 `display: flex;`，此元素就成了 flex 容器，flex 容器内的元素是 flex 项目； 1. flex 容器的属性： - flex-direction - flex-wrap - flex-flow - justify-content - align-items - align-content 0. flex 项目的属性 - flex （flex-grow、flex-shrink、flex-basis） - order - align-self ### 6、grid 二维布局方式，相对于使用 HTML 结构实现的 table 布局，grid 布局都是在 CSS 中完成的；重要的概念：grid 容器、grid 项目、行、列、单元格、网格线；设置某个元素的属性 `display: grid;` ，此元素就成了 grid 容器，grid 容器的直接子元素就是 grid 项目； 1. grid 容器的属性 - grid-template-columns - grid-template-rows - gap（column-gap、row-gap） - palce-items（justify-items、align-items） - place-content（justify-content、align-content） - grid-template-areas - grid-auto-flow - grid-auto-columns、grid-auto-rows 0. grid 项目的属性 - grid-column-start、grid-column-end grid-row-start、grid-row-end grid-column grid-row - grid-area - justify-self、align-self place-self
## 2、常见布局效果 ### 1、水平居中 1. 对于子元素为**行内元素**，直接在父元素上加上 `text-align:center;` 0. 对于子元素为**块级元素**或**行内块级元素**，直接在子元素上加上 `margin:0 auto;` 当子元素设置了绝对定位时 `position:absolute;` , 需要在左右加上相等的定位距离 `left:0;right:0;` 才能使用 `margin:0 auto;` 为什么 `margin: 0 auto;` 会居中，见： 0. 使用定位 `position:absolute;` + 父元素宽度的 50% 的偏移 `left:50%;` + 回退子元素宽度的 50% `transform:translateX(50%);` 0. 使用定位 `position:absolute;` + 父元素宽度的 50% 的偏移 `left:50%;` + 回退子元素宽度的 50% `margin-left:-子元素宽度的一半;` 水平居中时采用 `margin-left:-子元素宽度的一半;`和 `transform: translateX(-50%);` 两个方案的底层原理有什么不同：margin 会占据空间，transform 是移动，并不会占据原来的空间；补充一个知识点 `margin: 50%;` 是相对于父元素的百分比， `transform: translate(50%, 50%);` 是相对于元素本身的百分比； 0. 使用 flex 布局或 grid 布局； ### 2、垂直居中 1. 对于单行文本，可以设置 `line-height:父元素高度;` 来达到垂直居中的目的； 0. 对于行内块级元素，可以通过增加高度为 100% 的伪元素，并增加 `vertical-align:middle;` 属性来改变父元素基线的位置；然后子元素通过 `vertical-align:middle;` 达到垂直居中的目的； ```html Document

ss1

``` child 元素不加 `vertical-align:middle;` : ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c83b43f18e5e4f2292747d12b1a2e967~tplv-k3u1fbpfcp-watermark.image?) child 元素加 `vertical-align:middle;` : ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dcd8c3ca7c8b418a9cbfe6c526c41766~tplv-k3u1fbpfcp-watermark.image?) 0. 通过设置父元素为 `display:table;` ,子元素为 `display:table-cell;` ，并通过 `vertical-align:middle;` 来将子元素垂直居中； 4. 使用 flex 布局或 grid 布局； ### 2、两列布局左边定宽，右边自适应利用 `float: left;` 和 `overflow: hidden;` 实现； ``` .wrapper { width: 50vw; height: 100vh; background-color: grey; } .left { width: 100px; background-color: red; float: left; } .right { background-color: green; overflow: hidden; zoom: 1; /*兼容 ie 浏览器*/ } ``` 利用 flex 布局实现： ``` .wrapper { width: 50vw; height: 100vh; display: flex; } .left { width: 100px; } .right { flex: 1; } ``` 利用 grid 布局实现： ``` .wrapper { width: 50vw; height: 100vh; display: grid; grid-template-columns: 100px auto; /*或者：grid-template-columns: 100px 1fr*/ } ``` #### 3、三列布局左右列固定，中间列自适应，要求中间的 HTML 结构先解析；注意 HTML 结构，这样使得 center 会优先加载： ```

content

left

right

``` #### 1)、flex 布局实现 ``` .wrapper { display: flex; } .center { flex: 1; background-color: yellow; order: 1; } .left { width: 100px; /* flex: 1; */ background-color: red; } .right { width: 100px; background-color: green; order: 2; } ``` #### 2)、grid 布局实现 ``` .wrapper { display: grid; grid-template-columns: 100px 1fr 100px; grid-auto-flow: row dense; } .center { grid-column-start: 2; background-color: yellow; } .left { background-color: red; } .right { background-color: green; } ``` #### 3)、圣杯布局利用 float 将三列排到同一行，再利用负的 margin 将 left 和 right 移动到 center 的两边；最后增加 wrapper 的 padding，并用相对定位将 left 和 right 定位到 center 的两边； ``` .wrapper { padding: 0 100px; } .center { width: 100%; float: left; background-color: yellow; } .left { width: 100px; float: left; margin-left: -100%; position: relative; left: -100px; background-color: red; } .right { width: 100px; float: left; margin-left: -100px; position: relative; left: 100px; background-color: green; } ``` #### 4)、双飞翼布局利用 float 将三列排到同一行，再利用负的 margin 将 left 和 right 移动到 center 的两边；再在 center 中新增一个 div ，并设置其 `margin: 0 100px;` 给 left 和 right 留下宽度； ``` .wrapper { min-width: 400px; /*需要有一个最小宽度*/ } .center { width: 100%; float: left; background-color: yellow; } .center > div { margin: 0 100px; /*在 center 中增加了一个 div，并设置左右 margin 为 left 和 right 的宽度*/ } .left { width: 100px; float: left; margin-left: -100%; background-color: red; } .right { width: 100px; float: left; margin-left: -100px; background-color: green; } ```

参考资料： 1. [块格式化上下文](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context) 0. [CSS 常见布局方式](https://juejin.cn/post/6844903491891118087) 0. [阮一峰 grid 布局](https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html) 0. [我对CSS vertical-align的一些理解与认识 -- 张鑫旭](https://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/)