三栏布局只知道圣杯、双飞翼，最终评级是……F

KavenFan 发布于2019-08-29 15:39 / 3444人阅读

摘要：三栏布局，面试与工作中的常见布局。分左中右三部分，其中左右宽度已知，中间宽度自适应。根据不同的顺序与处理，这里写下了五类布局方式。用了它，内外部元素渲染互不影响，就不会蔓延到两侧了。网格布局网格布局好了，后续再来说一下各自的优缺点。

三栏布局，面试与工作中的常见布局。分左中右三部分，其中左右宽度已知，中间宽度自适应。
根据不同的DOM顺序与CSS处理，这里写下了五类布局方式。

一、浮动布局 1 圣杯布局

L：“我问你，你就是我的Master吗？”
……

2 双飞翼布局

3 浮动布局

这样会有个问题，就是center高度大于两侧的时候，会duang的蔓延到两侧，像这样：

相应的，为了让页面成为我们需要的样子，引入了两个解决方案。

BFC修正

L：“我问你，你这里是不是有什么问题？(指着脑袋)”
……
BFC(Block Fromatting Context),直译就是块级格式化上下文。
先知其然吧，概念差不多又需要整理一篇文章。用了它，内外部元素渲染互不影响，center就不会蔓延到两侧了。
具体代码：

.center{
  overflow:hidden;
  background-color: gray;
}

Margin修正

.center{
  margin: 0 200px;
  background-color: gray;
}

二、Flex布局

三、绝对定位布局

四、Table布局

现在很少人用的table标签



  
    
    Table布局
    
  
  
    
      
        
        Table布局

display:table-cell与上面一个意思



  
    
    table-cell
    
  
  
    
      
      
        table-cell

五、网格布局

如果说flex用于一维，grid就是用于二维的。

好了，后续再来说一下各自的优缺点。

你一赞，我一赞，开开心心去吃饭~

云服务器 GPU云服务器圣杯布局三栏布局双飞翼布局 html5 三栏布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113463.html

三栏布局只知道圣杯、双飞翼，最终评级是……F

摘要：三栏布局，面试与工作中的常见布局。分左中右三部分，其中左右宽度已知，中间宽度自适应。根据不同的顺序与处理，这里写下了五类布局方式。用了它，内外部元素渲染互不影响，就不会蔓延到两侧了。网格布局网格布局好了，后续再来说一下各自的优缺点。三栏布局，面试与工作中的常见布局。分左中右三部分，其中左右宽度已知，中间宽度自适应。根据不同的DOM顺序与CSS处理，这里写下了五类布局方式。一、浮动布...

BothEyes1993 2019-08-02 10:38 评论0 收藏0
CSS三栏布局的四种方法

摘要：浮动代码如下注意元素次序代码如下左栏左浮动中间自适应右栏右浮动这种方式代码足够简洁与高效，也容易理解后记四种方法其实只有圣杯布局和双飞翼布局较难理解，但实际上理解了圣杯布局，双飞翼布局自然就理解了。前言总括：不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的，也许你不知道什么事三栏布局什么是两栏布局但实际已经在用，或许你知道三栏布局的一种或两种方法，但实际操作中也只会依赖那...

RobinQu 2019-08-30 13:14 评论0 收藏0
CSS三栏布局的经典实现方法

摘要：经典方法三栏布局的方法有很多种，其中最经典的方法莫过于圣杯布局和双飞翼布局。而双飞翼布局方法无需相对位置属性，而是采用为中栏内容创建的方式，通过来实现布局。文章第二部分阐述了流行的圣杯布局方法和双飞翼布局方法的细节和异同。三栏是CSS布局中常见的一种布局模式，顾名思义，就是将网页内容以三列的形式呈现。通常，三栏布局中的左栏和右栏是固定宽度的，中栏随着窗口宽度的变化而变化。本文探讨栏三...

neuSnail 2019-08-30 15:56 评论0 收藏0
CSS三栏布局的经典实现方法

摘要：经典方法三栏布局的方法有很多种，其中最经典的方法莫过于圣杯布局和双飞翼布局。而双飞翼布局方法无需相对位置属性，而是采用为中栏内容创建的方式，通过来实现布局。文章第二部分阐述了流行的圣杯布局方法和双飞翼布局方法的细节和异同。三栏是CSS布局中常见的一种布局模式，顾名思义，就是将网页内容以三列的形式呈现。通常，三栏布局中的左栏和右栏是固定宽度的，中栏随着窗口宽度的变化而变化。本文探讨栏三...

Forelax 2019-08-02 14:31 评论0 收藏0
CSS 圣杯布局 / 双飞翼布局的实现

摘要：先让它们浮动，并给和一个固定宽度，宽度，清除浮动流，结果变成上面这样。工作的越久，有些基础知识我们可能就逐渐淡忘了，今天我们来回顾一下css的圣杯布局和双飞翼布局，这两个名词你可能不熟，那三栏布局你肯定就非常熟悉了，就是两边定宽，中间自适应的布局 1 ，圣杯布局 !--三栏布局-- header 三栏布局 /header div div cent...

LuDongWei 2019-04-22 16:34 评论0 收藏0