这是我参与更文挑战的第5天，活动详情查看： [更文挑战](https://juejin.cn/post/6967194882926444557) ### 前述今天看到一个css题目，说**你能用几种方式来实现css左右定宽，中间自适应布局**？恰好好久没写布局了，今天通过几种布局方式巩固一下，加深印象。我下面分别使用**圣杯布局**、**双飞翼布局**、**Flex布局**和**绝对定位布局**实现 ### 圣杯布局圣杯布局是一种**三列**，**左右栏固定**，**中间栏边框自适应**的网页布局特点：采用float浮动三列布局，中间宽度自适应，两边定宽；中间元素要在html结构中处于开头； html代码如下: ```html

main

left

right

``` 效果如下： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/73db0144f16748f088d4def302d4d0b1~tplv-k3u1fbpfcp-watermark.image) 解析： - 这里的`.main`使用了`width:100%`，会导致`.left`和`.right`会换行，所以`.left`的`margin-left:100%`（**margin-left百分比相对的是父元素**），`.right`的`margin-left: -200px`（**200px刚好是自身的宽度**）实现在同一行 - `.container`的`padding`刚好与`.left`和`.right`的长度一样，方便`.left`向左方向，`.right`向右方向，相对定位移动自身宽度的长度,避免遮挡到`.main` - 然后`.container`需要设置`min-width`，因为`.left`的`margin-left`是`100%`，相对的是**父元素**，如果`.container`宽度变小，则`.main`宽度也会变小，如果小于`.left`的宽度，则不足以和`.main`在一行，`.left`则会换行 > 这里是讲自己的理解，话糙了一点，如果看不懂，自己可以复制代码，自己去看看，会了解的更深。 ### 双飞翼布局双飞翼布局也是一种**三列**，**左右栏固定**，**中间栏边框自适应**的网页布局解决问题也和圣杯布局类似，也是采用**三栏全部float浮动**，**左右两栏加上负margin**，**跟中间栏div并排**，形成三栏布局。**主要不同是在解决 “中间栏div内容不被遮挡”方式不一样**。 html代码如下（注意⚠：HTML结构发生改变, 多了**div.content**） ```html

main

left

right

``` 和圣杯布局主要区别： - `.main`内部多了子元素`div.content` - 子元素`div.content`里用`margin-left`和`margin-right`，去保证不被`.left`和`.right`遮挡 - `.left`,`.right`不需要使用定位去避免遮挡`.main` ### Flex布局 ```html

left

main

right

``` 解析： - **flex布局**，弹性布局，可以简便、完整、响应式地实现各种页面布局，未来的布局的首选方案（当然如果你要考虑ie,另说） - `.main`使用`flex`属性，`.left` 和`.right`使用`flex-basis` 属性 - `flex`属性是`flex-grow`（如果有剩余空间，是否扩大）, `flex-shrink`（如果空间不够，是否压缩）和 `flex-basis`（本身的空间大小）的简写，默认值为`0 1 auto`。后两个属性可选 - `flex属性`有两个快捷值：`auto (1 1 auto)` 和 `none (0 0 auto)`,这里使用的是`auto`，如果有剩余空间，则扩大，如果空间不够,则压缩 ### absolute 布局 `absolute`绝对定位的元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分。 ```html

left

main

right

``` 解析： - `.main`使用`margin`避免被`.left`和`.right`遮挡 - `.left`和`.right`使用`absolute`定位，不占据文档流 ### 总结：推荐使用：**flex布局 > absolute布局 = 双飞翼布局 > 圣杯布局** 首选flex布局，因为这是未来的布局方式的首选方案，属性方便设置，实用，好理解； absolute布局和双飞翼布局适中，圣杯布局不好理解（对我来说）；大家都可以了解下，正所谓技多不压身嘛。