搞定css三栏布局（六种方法）

evin2016 发布于2019-08-30 13:59 / 1381人阅读

摘要：块级元素生成一个矩形框，作为文档流的一部分行内元素则会创建一个或多个行框，置于父级元素中。元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。元素框不再占有文档流位置，并且相对于视窗进行定位。

谈到布局，首先就要想到定位，当别人问我，css的position定位有哪些取值，分别表示什么意思？呃.....抓头.gif，是时候回归本质，看定义了。

1. 定位 1.1 position

position有六个属性值：static、relative、absolute、fixed、sticky和inherit。

static（默认）：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分；行内元素则会创建一个或多个行框，置于父级元素中。

relative：元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。发生偏移的时候，可能会覆盖其他元素。

absolute：元素框不再占有文档位置，并且相对于包含块进行偏移（所谓包含块就是最近一级外层元素position不为static的元素）。

fixed：元素框不再占有文档流位置，并且相对于视窗进行定位。

sticky：css3新增属性值，粘性定位，相当于relative和fixed的混合。最初会被当作是relative，相对原来位置进行偏移；一旦超过一定的阈值，会被当成fixed定位，相对于视口定位。

2. 三列布局

三列布局，其中一列宽度自适应，在PC端最常用之一，搞定了三列布局，其他一样的套路。

2.1 方式一：浮动布局

缺点：html结构不正确,当包含区域宽度小于左右框之和，右边框会被挤下来



    
        我是浮动布局左框
    
    
        我是浮动布局右框            
    
    
        我是浮动布局中间框

2.2 方式二：定位布局

缺点：要求父级要有非static定位，如果没有，左右框容易偏移出去



    
        我是浮动定位左框
    
    
        我是浮动定位中间框
    
    
        我是浮动定位右框

2.3 方式三：表格布局

缺点：没什么缺点，恐惧table



    
        我是表格布局左框
    
    
        我是表格布局中间框
    
    
        我是表格布局右框

2.4 方式四：flex弹性布局

缺点：兼容性



    
        我是flex弹性布局左框
    
    
        我是flex弹性布局中间框
    
    
        我是flex弹性布局右框

2.5 方式五：grid栅格布局

缺点：兼容性 Firefox 52, Safari 10.1, Chrome 57, Opera 44



    
        我是grid栅格布局左框
    
    
        我是grid栅格布局中间框
    
    
        我是grid栅格布局右框

2.6 方式六：圣杯布局

缺点：需要多加一层标签，html顺序不对，占用了布局框的margin属性



    
        
            我是圣杯布局中间框
        
    
    
        我是圣杯布局左框
            
    
        我是圣杯布局右框

3. 实现效果：

云服务器 idc机房托管三栏布局 html5 三栏布局 ps去除水印的六种方法 css布局

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

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

实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

golden_hamster 2019-08-02 11:55 评论0 收藏0
实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

IamDLY 2019-08-29 17:12 评论0 收藏0
实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

Hegel_Gu 2019-08-23 12:52 评论0 收藏0
实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

fai1017 2019-08-05 15:23 评论0 收藏0
两招搞定三栏布局——圣杯布局、双飞翼布局

摘要：如何实现如下的这种中间自适应宽度，左右两栏固定宽度布局这是一道经典的面试题，常用的方法是圣杯布局双飞翼布局。相信看完这篇文章，你就能很清楚的知道什么是圣杯和双飞翼了。在双飞翼中避免左右盒子被覆盖，是通过设置的左右来实现的。如何实现如下的这种中间自适应宽度，左右两栏固定宽度布局？ showImg(https://segmentfault.com/img/bVbe5Dq?w=1215&h...

Kaede 2019-08-29 16:19 评论0 收藏0