android 三栏布局,css常见布局方式

CSS常见布局方式

以下总结一下CSS中常见的布局方式。本人才疏学浅，如有错误，请留言指出。

如需转载，请注明出处：CSS常见布局方式

目录：

使用BFC隐藏属性

float + margin

absolute + margin

圣杯布局

双飞翼布局

flex布局

以上5种方式都可以实现两栏或三栏布局

如果对BFC(块级格式化上下文)概念不熟悉的朋友，可以先看看这篇文章。BFC深入理解

使用BFC隐藏属性

在对需要自适应的元素BFC化，可以实现两栏或三栏布局

两栏布局

// 左边固定宽度，右边自适应

.aside1 {

float: left;

margin-right: 10px;

width: 100px;

height: 100vh;

background-color: lightsalmon;

}

.main {

overflow: hidden;

height: 100vh;

background-color: lightpink;

}

如果要让两栏之间有空隙，可以给浮动元素设置margin-right值，也可以给自适应的主内容设置margin-left值。但设置margin-left时，需要考虑到aside的宽度。实现三栏布局也是如此，给浮动元素设置margin值会方便一些。

三栏布局

// 这里要注意DOM的书写顺序问题。

// 固定宽度

.aside1 {

float: left;

margin-right: 10px;

width: 100px;

height: 100vh;

background-color: lightsalmon;

}

// 固定宽度

.aside2 {

float: right;

margin-left: 10px;

width: 100px;

height: 100vh;

background-color: lightsalmon;

}

// BFC化自适应宽度

.main {

overflow: hidden;

height: 100vh;

background-color: lightpink;

}

使用BFC实现三栏布局时需要注意的是DOM的书写顺序问题。如果将aside2与article交换位置，那么aside2元素会被挤到article元素之下，无法实现三栏自适应布局。缺点：宽度小于aside宽度时，由于宽度不足的原因，三栏布局时会使元素出现掉下去的现象。

float + margin

在自适应宽度的元素上设置margin值，margin的值大于或等于固定宽度的值即可。实现思路与使用BFC隐藏属性差不多。缺点：宽度小于aside宽度时，由于宽度不足的原因，三栏布局时会使元素出现掉下去的现象。

两栏布局

.aside1 {

float: left;

width: 100px;

height: 100vh;

background-color: lightsalmon;

}

.main {

margin-left: 110px;

height: 100vh;

background-color: lightpink;

}

三栏布局

// 注意，DOM顺序不可改变

.aside1 {

float: left;

width: 100px;

height: 100vh;

background-color: lightsalmon;

}

.main {

margin-left: 110px;

margin-right: 110px;

height: 100vh;

background-color: lightpink;

}

.aside2 {

float: right;

width: 100px;

height: 100vh;

background-color: lightsalmon;

}

absolute + margin

// 使用position: absolute时，DOM元素顺序并不重要。给左右两栏定宽，主内容自适应宽度。缺点：侧边栏元素脱离文档流。优点：article元素可先加载。

.aside1 {

position: absolute;

left: 0;

top: 0;

width: 100px;

height: 100vh;

background-color: lightsalmon;

}

.aside2 {

position: absolute;

right: 0;

top: 0;

width: 100px;

height: 100vh;

background-color: lightsalmon;

}

.main {

margin: 0 110px;

height: 100vh;

background-color: lightpink;

}

使用absolute + margin实现两栏布局时，只需要删除对应的栏目即可。

圣杯布局

圣杯布局，为什么叫圣杯布局...其实我觉得很奇怪，倒不如叫float + 负margin + relative更贴切一下。实现思路如下

两栏和自适应元素都设置同一方向的浮动(如float: left)

父元素设置左右padding为左右边栏的宽度。

自适应元素设置宽度为100%

左边栏margin-left为负100%，再设置relative，最后通过left属性偏移负的自身宽度。

右边栏margin-left为负自身宽度，再设置relative，最后通过right属性偏移负的自身宽度。// 与其他布局不同，此布局需要父元素

.parent {

padding: 0 100px;

// 左右边栏的宽度，可适当缩小以增加每栏之间的距离

}

.main {

float: left;

width: 100%;

height: 100vh;

background-color: lightpink;

}

.aside1 {

float: left;

position: relative;

left: -100px;

margin-left: -100%;

width: 100px;

height: 100vh;

background-color: lightseagreen;

}

.aside2 {

float: left;

margin-left: -100px;

position: relative;

right: -100px;

width: 100px;

height: 100vh;

background-color: lightsalmon;

}

当然了，缺点也是有的。就是在宽度小于两栏宽度时，元素会因为宽度不足而掉下去。

双飞翼布局

双飞翼布局与圣杯布局相似。只不过少了relative与left, right的步骤和共同父元素，主内容元素多了层父元素。实现思路如下：

两栏和自适应元素都设置同一方向的浮动(如float: left)

main元素设置左右margin值，值为左右两栏的宽度。main父元素设置宽度为100%

左边栏margin-left为负100%

右边栏margin-left为负自身宽度

// 以下包含部分sass语法

.main {

margin: 0 100px;

height: 100vh;

background-color: lightpink;

&-wrap {

float: left;

width: 100%;

}

}

.aside1 {

float: left;

width: 100px;

margin-left: -100%;

height: 100vh;

background-color: lightseagreen;

}

.aside2 {

float: left;

width: 100px;

margin-left: -100px;

height: 100vh;

background-color: lightsalmon;

}

flex布局

flex布局新出现的概念较多，有兴趣的朋友可以到以下博客看更为详细的教程。使用flex来实现布局，我个人认为是最简单的方式。在移动端上，Android 4.4+以上、IOS 7.0+以上都支持flex布局。而在PC端上，使用flex布局时还是需要考虑一下的，因为到目前为止，IE11仍然只有部分属性支持。

内容来源于网络如有侵权请私信删除