（4k字）css布局篇——双栏布局与三栏布局

时间  2020-02-11
标签 4k css 布局 栏目 CSS 繁體版
原文   原文链接

近些年，随着前端技术的不断发展，前端所扮演的角色愈来愈重要，职责也愈来愈大。前端早已不只仅作简单的内容展现页面，也不只仅负责简单的表单交互了。日益繁杂的前端技术下，JavaScript在咱们心中占据着日益重要的地位，而相应的，不少人开始忽略了html和css。css

JavaScript当然重要，可是回过头来想，做为一名前端工做者，难道咱们能够避免和页面打交道吗？答案是，否！html

那么，假设给你一个设计稿，咱们又该如何去着手呢？前端

本篇章主讲双栏布局和三栏布局的一些较为古老及实用的原理及实现。说它古老主要也是由于咱们不会涉及flex这一类魔法通常的布局方式，虽然我也知道用flex就能轻松实现不少布局。浏览器

作这个文章，一方面也是本身作个学习记录，当作温习一番。另外一方面，也但愿可以帮助看到这篇文章的新手一些启发，开启更加深刻的探索之路。架构

双栏布局

双栏布局很是常见，每每是以一个定宽栏和一个自适应的栏并排展现存在。好比：布局

双栏布局

实现双栏布局也很简单，接下来介绍简单的 float + margin 实现方法。学习

假设左边栏固定，右边栏自适应。flex

思路

  • 使用float 左浮左边栏
  • 右边模块使用margin-left 撑出内容块作内容展现

实现

html内容结构spa

<body>
    <div class="box">
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
    内容内容内容
</body>
复制代码

css规则设计

.left {
    float: left;
    width: 200px;
    background-color: gray;
    height: 400px;
}
.right {
    margin-left: 210px;
    background-color: lightgray;
    height: 200px;
}
复制代码

效果

双栏布局

Emmm...双栏实现了，可是下面的其余内容怎么跑上去了？答案是咱们使用了浮动。

浮动

浮动会致使元素脱离原来普通的文档流。元素能够向左或者向右浮动，直到接触到包含框或者其余框为止。在原来文档流中，体现的就是好像在原来位置被删除了似的。

所以，以上浮动致使了父元素高度塌陷，其余内容块会自动排版上去。解决的办法有：

  1. 增长清除浮动元素或者伪元素清除浮动，相关元素添加清除样式：

    clear:both;
复制代码

  2. BFC（Block Formatting Context），块级格式化上下文。BFC规定了内部的块级元素的布局方式。使用BFC能够用来包含浮动元素。常见的作法是为父元素添加:

    overflow:hidden;
复制代码

建立一个BFC

消除浮动的其中一个方式就是建立BFC。然而，建立BFC不只仅只有**“overflow:hidden;”**一种方式，事实上，咱们能够经过这几种方法显示触发BFC：

  • float的值不为none。
  • overflow的值不为visible。
  • position的值不为relative和static。
  • display的值为table-cell, table-caption, inline-block中的任何一个。

回归正题，咱们的双栏布局（事实上其余涉及浮动的布局也同样）父元素高度塌陷的问题的得以解决，好比，咱们只须要为 .box 元素添加样式：

overflow: hidden;
复制代码

建立BFC后的双栏效果

消除了浮动的双栏布局

三栏布局

三栏布局也是咱们经常会使用到的布局之一。它的特色主要是：两边定宽，中间自适应。

经过position + margin实现三栏布局

思路

  1. 父元素相对定位，经过绝对定位将左右两栏固定
  2. 经过margin设置左右边距，留出内容块

实现

html内容结构

<div class="box">
    <div class="left">左边</div>
    <div class="middle">中间</div>
    <div class="right">右边</div>
</div>
复制代码

设置css规则

.box {
    position: relative;
}
.left {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: gray;
}
.right {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background-color: gray;
}
.middle {
    margin-left: 210px;
    margin-right: 210px;
    background-color: lightgray;
    height: 200px;
}
复制代码

效果

position+margin实现三栏布局

经过浮动实现三栏布局

思路

  1. 左右两栏使用float浮动到相应位置
  2. 中间栏经过margin属性进行撑开

实现

html内容结构

<div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>
    <div class="middle">中间</div>
</div>
复制代码

设置css规则

.box {
    overflow: hidden;
}
.left {
    float: left;
    background-color: gray;
    width: 200px;
    height: 200px;
}
.right {
    float: right;
    background-color: gray;
    width: 200px;
    height: 200px;
}
.middle {
    height: 200px;
    background-color: lightgray;
    margin-left: 210px;
    margin-right: 210px;
}
复制代码

效果

经过浮动实现三栏架构

缺点

固然，经过浮动实现的三栏布局有一个很明显的缺点，就是咱们的代码层面上来说html内容结构不正确，咱们必须把.middle元素放在最下面而不是中间位置，这是float所产生的的布局影响所致使的。

圣杯布局和双飞翼布局

圣杯布局最先源于发表于2006年的In Search of the Holy Grail · An A List Apart Article，而双飞翼布局则是源自淘宝UED。

圣杯布局和双飞翼布局也是两边定宽，中间自适应的三栏布局。而且中间栏要放在父元素的第一儿子位置，以优先渲染。所以，有些人会说这带来了代码层面上html内容结构的不正确。然而，这么作的好处就是可让更为重要的中间部分优先渲染，从这个角度来说，这或许是更加好的结构。

圣杯布局和双飞翼布局二者既有类似的地方，也有不一样的地方，接下来来比较一下。

在此以前，先来看看可爱的负边距。

负边距

为何要讲到负边距呢？

一方面负边距是咱们经常忽略的很是好用的技巧，在咱们的布局方面具备很是重要的意义；另外一方面这玩意儿兼容性贼好，咱们也不用怕兼容性方面的问题。

提及负边距，咱们能够想到的就是margin在正边距时候的反方向。咱们能够来看看。

普通文档流的负边距

实现

html内容结构

<div class="box">
    <div class="content">
        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
        我是内容我是内容我是内容我是内容
        <span class="span red">哈哈哈哈哈</span>我是内容我是内容我是内容我是内容
        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
    </div>
    <div class="other-content">
        我是另外一块我是另外一块我是另外一块我是另外一块我是另外一块我是另外一块我是另外一块
        我是另外一块我是另外一块我是另外一块我是另外一块我是另外一块我是另外一块我是另外一块
        我是另外一块我是另外一块我是另外一块我是另外一块我是另外一块我是另外一块我是另外一块
    </div>
    哈哈哈哈哈哈
    </div>
复制代码

css规则

.box {
    margin: auto;
    width: 600px;
}
.content {
    margin: -20px;
    background-color: lightgray;
}
.span {
    margin: -10px;
}
.red {
    background-color: red;
}
复制代码

效果

负边距

总结

正如上面所示，咱们为.content和.span这两个分别表明块级元素和行辈元素的东西设置了margin为-20px和-10px。布局也相应产生了变化。

  • 灰色的框子，内容向左上角拉了过去。.content下方的.other-content文字也来到了它上面。
  • 红色行内元素，也向左边偏移，右边的元素被拉了过来。
  • 最后面没有任何设置的"哈哈哈哈哈哈"内容也依然紧跟着.other-content元素显示。

咱们不难看出，负值状况下

  • margin-top和margin-left会影响自身向指定方向偏移
  • margin-right和margin-bottom会影响相邻元素向指定方向偏移
  • 经过margin偏移后，原先空出来的位置也会由后面元素填不上。
  • 固然，块级元素和行内元素在表现上稍有不一样。

另外一种状况，负值margin也可以影响元素的宽度，前提是该元素width属性为auto的状况下。这里也给出详细例子，比方咱们给一个元素左右边距为-200px。

html内容结构

<div class="box">
    <div class="container"></div>
</div>
复制代码

css规则

.box {
    width: 200px;
    border: 1px solid black;
    margin: auto;
}
.container {
    margin: 0 -200px;
    background-color: lightgray;
    width: auto;
    height: 200px;
}
复制代码

效果

负边距

固然，目前为止咱们都是在普通文档流里面。

脱离文档流的负边距

绝对定位 + 负边距

假设咱们对一个元素进行绝对定位，而且给相应的负边距。

实现

html内容结构

<div class="box">
    <div class="pos">
        绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位
        绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位
    </div>
    <div class="pos2">
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    </div>
</div>
复制代码

css规则

.box {
    position: relative;
    height: 200px;
    margin: 200px;
    border: 1px solid black;
}
.pos {
    width: 200px;
    height: 200px;
    position: absolute;
    margin: -20px;
    border: 1px solid gray;
}
.pos2 {
    width: 200px;
    height: 200px;
    position: absolute;
    border: 1px solid red;
}
复制代码

效果图

负边距

总结

从效果上能够看出来，对于绝对定位而言，负边距在top和left位置上，会把元素往指定方向拉，而right和bottom方向则没什么影响，由于脱离了普通文档流，不会引发其余相邻元素变化。

tips: **“绝对定位+负边距”**咱们也经常用来实现居中布局。

浮动 + 负边距

思考如下三个场景：

  1. 三个左浮动的块，分别设置负边距，几个浮动块会是怎样？
  2. 两个左浮动的块，左边的块左边距设置为-100%,右边的块会左移吗？
  3. 两个左浮动的块，第一个width占满，第二个左边距设置负值为自身width大小，会如何？
实现

html内容结构

<!-- demo1 -->
<div class="box">
    <div class="float float1">1</div>
    <div class="float float2">2</div>
    <div class="float float3">3</div>
</div>
<!-- demo2 -->
<div class="box">
    <div class="float4">1</div>
    <div class="float5">2</div>
</div>
<!-- demo3 -->
<div>
    <div class="row">6</div>
    <div class="float6">2</div>
</div>
复制代码

css规则

.box {
    width: 800px;
    height: 210px;
    margin: 50px auto 10px auto;
    border: 1px solid black;
}
/* 第一个demo */
.float {
    float: left;
    margin: -50px;
    width: 200px;
    height: 200px;
}
.float1 {
    background-color: gray;
}
.float2 {
    background-color: yellow;
}
.float3 {
    background-color: red;
    margin: 0;
}

/* 第二格demo */
.float4 {
    background-color: gray;
    float: left;
    width: 200px;
    height: 200px;
    margin-left: -200px;
}
.float5 {
    background-color: lightgray;
    width: 200px;
    height: 200px;
    float: left;
}

/* 第三个demo */
.row {
    width: 100%;
    height: 200px;
    background-color: lightgray;
    float: left;
}
.float6 {
    background-color: gray;
    float: left;
    width: 200px;
    height: 200px;
    margin-left: -200px;
}
复制代码

效果

总结

能够看出：

  1. demo1中，1和2两个元素设置了全部边距为负值，都会往左上方偏移。同时，元素2会在水平方向占元素1一半。元素3则会被元素2拉向左边，占元素2的四分之一。
  2. demo2中，元素1左偏移了自身width的距离，原先位置空着，元素2紧接着补上。
  3. demo3中，两个元素都是左浮动，元素6的width为100%，当元素2左偏移自身width的距离之后，彻底到了上一行。

所以，咱们也能够看出，负边距对浮动的元素具备和普通文档流中一样相似的效果。而且，在后边的元素也能够经过负边距实现覆盖前边元素。

在布局中，咱们就经常使用到**“float + 负边距”**的魔力。

圣杯布局

思路

  1. 左中右三个元素分别左浮动。
  2. 中间元素占据第一位置优先渲染，设置该元素width为100%
  3. 左元素设置左边距为-100%以使得左元素上升一行而且处于最左位置，右元素设置左边距为自身宽度的负值使得右元素上升一行处于最右位置。
  4. 设置父元素的左右padding为左右两个元素留出空间，以展现中间元素内容。
  5. 设置左右元素为相对定位，左元素的left和右元素的right为内边距的宽度的负值。

实现

html内容结构

<div class="box">
    <div class="middle">中间</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>
复制代码

css规则

.box {
    overflow: hidden;
    padding: 0 210px;
}
.middle {
    float: left;
    width: 100%;
    height: 200px;
    background-color: lightgray;
}
.left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: gray;
    margin-left: -100%;
    position: relative;
    left: -210px;
}
.right {
    float: left;
    width: 200px;
    height: 200px;
    background-color: gray;
    margin-left: -200px;
    position: relative;
    right: -210px;
}
复制代码

效果

圣杯布局

双飞翼布局

思路

  1. 左中右三个元素分别左浮动。
  2. 中间元素占据第一位置优先渲染，设置该元素width为100%
  3. 左元素设置左边距为-100%以使得左元素上升一行而且处于最左位置，右元素设置左边距为自身宽度的负值使得右元素上升一行处于最右位置。
  4. 设置中间元素的子元素左右边距为左右元素留空位，以展现中间元素内容。

实现

html内容结构

<div class="box">
    <div class="middle">
        <div class="content">中间</div>
    </div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>
复制代码

css规则

.box {
    overflow: hidden;
}
.middle {
    float: left;
    width: 100%;
}
.middle .content {
    margin: 0 210px;
    height: 200px;
    background-color: lightgray;
}
.left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: gray;
    margin-left: -100%;
}
.right {
    float: left;
    width: 200px;
    height: 200px;
    background-color: gray;
    margin-left: -200px;
}
复制代码

效果

双飞翼布局

总结

圣杯布局跟双飞翼布局的实现上，在前部分是同样的。一样都是左右栏定宽，中间栏自适应。采用浮动和负边距使左右栏与中间栏并排。不一样之处大部分在于中间元素的的展现方式上。

圣杯布局采用父元素设置边距的方法，左右元素设置相对定位辅助。而双飞翼布局在中间采用嵌套子元素方法，经过设置子元素外边距来展现。

对比看来，双飞翼比圣杯多了一个嵌套元素，可是少了左右元素的定位。

flex布局

在flex以前，不管是咱们的单栏布局也好，双栏布局也罢，甚至更为复杂的三栏布局、垂直居中等等，咱们通常都会借助浮动 （float）、定位（position）、边距（margin）来实现咱们各类各样的布局样式，直到咱们遇到了flex。

flex（弹性布局）给了咱们在布局方面更多的可能性，它能够更加简便、响应的布局咱们的页面。咱们经常能够利用它魔法通常的属性来打造咱们想要的布局样式。而且，flex如今几乎获得了全部的浏览器的支持，兼容性方面已经愈来愈不须要太过担心了。

更多关于flex兼容性的问题能够查看can I use

然而，本篇章并不打算写flex，仅仅讲解以往实现双栏和三栏布局的一些方式。于我而言，我更愿意用单独一个篇章来写flex这个主题，而不是放在这个主题来说。而且以后我也会专门来写这个主题。

很少废话，这一次的分享就到这里，咱们下期再见！

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程