三栏布局zblog模板（css三栏布局）

本篇文章给大家谈谈三栏布局zblog模板，以及css三栏布局对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、实现三栏布局的六种方式
• 2、三栏布局 两栏布局
• 3、三栏布局

实现三栏布局的六种方式

六种布局方式总结：圣杯布局、双飞翼布局、Flex布局、绝对定位布局、表格布局、网格布局。

圣杯布局是指布局从上到下分为header、container、footer，然后container部分定为三栏布局。

基础HTML：

基础CSS：

对于container，给它设置一个 overflow: hidden 使其成为一个 BFC ，使三栏浮动，并相对定位，给左右两个容器设置 200px 的宽度中间的容器设置 100% 的宽度。

此时 left 和 right 被相对于父元素 container 宽度的 100% 的 center 挤到下面。

BFC 的作用：

步骤：

这时，圣杯布局就完成了，但是在拖到很小的时候，布局会乱，以下是最终样式。

这种布局方式同样分为header、container、footer。圣杯布局的缺陷在于 center 是在 container 的 padding 中的，因此宽度小的时候会出现混乱。

双飞翼布局给 center 部分包裹了一个 main 通过设置 margin 主动地把页面撑开。

基础HTML：

步骤 1 和 2 同圣杯布局

区别：

第三步：

给 main 设置 margin: 0 200px ，同时设置 overflow: hidden 使其成为一个 BFC

这时窗口宽度过小时就不会出现混乱的情况了，关键点在于内容部分是包裹在 main 中。

以下是最终样式：

Flex布局是由CSS3提供的一种方便的布局方式。

基础HTML：

步骤：

flex-shrink :

定义项目的缩小比例，默认为1，如果空间不足则项目缩小，如果有一项为0，其他为1，当空间不足时，前者不缩小。

可以看到，flex 布局是一种极其灵活的布局方式。

以下是最终样式：

基础HTML：

步骤：

这种方式的缺点是依赖于left 和 right 的高度，如果两边栏的高度不够，中间的内容区域的高度也会被压缩。

表格布局的好处是能使三栏的高度统一。

基础HTML：

步骤：

这种布局方式能使得三栏的高度是统一的，但不能使center放在最前面得到最先渲染。

网格布局可能是最强大的布局方式了，使用起来极其方便，但目前而言，兼容性并不好。网格布局，可以将页面分割成多个区域，或者用来定义内部元素的大小，位置，图层关系。

基础HTML：

步骤：

仅仅四条样式命令就能完成三栏布局，可见网格布局之强大

三栏布局 两栏布局

实现三栏等高布局，且两边的侧栏宽度固定，中间一栏占用剩余的空间。

1.flex：

container{display:flex;}

.left，.right{width:200px;}

.main{flex-grow:1;}

两列布局

1.flex

.container{

    display: flex;

    height: 100px;

  }

  .container.left{

    width: 100px;

    height: 100%;

    background-color: red;

  }

  .container.right{

    flex:1;

    height: 100%;

    background-color: green;

  }

2、浮动

.container.left {

    float: left;

    width: 100px;

    height: 100px;

    background-color: red;

  }

  .container.right {

    margin-left: 100px;

    height: 100px;

    background-color: green;

  }

3、定位

.container{

    position: relative;

    width: 100%;

    height: 100px;

  }

  .container.left{

    position: absolute;

    width: 100px;

    height: 100%;

    background-color: red;

  }

  .container.right{

    margin-left: 100px;

    width: 100%;

    height: 100%;

    background-color: green;

  }

如何实现左边两栏一定比例，左栏高度随右栏高度自适应？

三栏布局

三栏布局，左右两栏宽度固定，中间栏宽度自适应。

假设我们有以下 HTML 结构：

基本样式如下：

本文将介绍几种实现三栏布局的方式。

这里会有一点不一样，我们需要调整一下类为 .right 标签的位置。

三栏布局zblog模板的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css三栏布局、三栏布局zblog模板的信息别忘了在本站进行查找喔。