css常见布局方式

CSS常见布局方式

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

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

目录:

  1. 使用BFC隐藏属性
  2. float + margin
  3. absolute + margin
  4. 圣杯布局
  5. 双飞翼布局
  6. flex布局

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

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

使用BFC隐藏属性

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

两栏布局
<aside class="aside1"></aside>
<article class="main"></article>

// 左边固定宽度,右边自适应
.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的书写顺序问题。
<aside class="aside1"></aside>
<aside class="aside2"></aside>
<article class="main"></article>

// 固定宽度
.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宽度时,由于宽度不足的原因,三栏布局时会使元素出现掉下去的现象。

两栏布局
<aside class="aside1"></aside>
<article class="main"></article>

.aside1 {
  float: left;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}
.main {
  margin-left: 110px;
  height: 100vh;
  background-color: lightpink;
}

三栏布局
// 注意,DOM顺序不可改变
<aside class="aside1"></aside>
<aside class="aside2"></aside>
<article class="main"></article>

.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元素可先加载。
<article class="main"></article>
<aside class="aside1"></aside>
<aside class="aside2"></aside>

.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更贴切一下。实现思路如下

  1. 两栏和自适应元素都设置同一方向的浮动(如float: left)
  2. 父元素设置左右padding为左右边栏的宽度。
  3. 自适应元素设置宽度为100%
  4. 左边栏margin-left为负100%,再设置relative,最后通过left属性偏移负的自身宽度。
  5. 右边栏margin-left为负自身宽度,再设置relative,最后通过right属性偏移负的自身宽度。
// 与其他布局不同,此布局需要父元素
<div class="parent">
  <article class="main"></article>
  <aside class="aside1"></aside>
  <aside class="aside2"></aside>
</div>

.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的步骤和共同父元素,主内容元素多了层父元素。实现思路如下:

  1. 两栏和自适应元素都设置同一方向的浮动(如float: left)
  2. main元素设置左右margin值,值为左右两栏的宽度。main父元素设置宽度为100%
  3. 左边栏margin-left为负100%
  4. 右边栏margin-left为负自身宽度
<div class="main-wrap">
  <article class="main"></article>
</div>
<aside class="aside1"></aside>
<aside class="aside2"></aside>

// 以下包含部分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仍然只有部分属性支持。

Flex 布局教程:语法篇

posted @ 2017-10-06 23:19 凯斯keith 阅读(...) 评论(...) 编辑 收藏