澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

CSS杰出布局整理,css常见布局总计

CSS 布局经典问题初步整理

2017/05/27 · CSS · 1 评论 · 布局

原文出处: brianway   

本文主要对 CSS 布局中常见的经典问题进行简单说明,并提供相关解决方案的参考链接,涉及到三栏式布局,负 margin,清除浮动,居中布局,响应式设计,Flexbox 布局,等等。

三栏式布局

涉及浮动和清除浮动,主要讲解“圣杯”和“双飞翼”两种解决方法。这两种方法实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,它们实现的效果是一样的,差别在于其实现的思想。

CSS 布局十八般武艺都在这里了

2017/03/25 · CSS杰出布局整理,css常见布局总计。CSS · 布局

原文出处: 码蜂社   

CSS常见布局笔记

标签(空格分隔): css

CSS 基础知识

下面几个入门教程不错:

  • 幕课网 – HTML CSS基础课程:偏基础,可以在线练习和预览
  • MDN – CSS入门教程: MDN 的官方文档
  • 学习 CSS 布局:排版和配色特别舒服,简短但不深入,适合概览入门
圣杯布局

圣杯:父盒子包含三个子盒子(左,中,右)

  • 中间盒子的宽度设置为 width: 100%; 独占一行;
  • 使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行;

<p>.left {margin-left:-100%;} 把左边的盒子拉上去</p>
<p>.right {margin-left:-右边盒子宽度px;} 把右边的盒子拉上去</p>

  • 父盒子设置左右的 padding 来为左右盒子留位置;
  • 对左右盒子使用相对布局来占据 padding 的空白,避免中间盒子的内容被左右盒子覆盖;
    <pre><code></code>

    <div class="container">
    <div class="middle">中间弹性区</div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
    </div>
    </code></pre>

CSS布局

布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中、垂直居中方法,以及单列布局、多列布局的多种实现方式(包括传统的盒模型布局和比较新的flex布局实现),希望能给需要的小伙伴带来一些帮助。

写在前面

最近总结了一下css布局方面的知识,也做了相应的练习,查了些资料,当然也可能有很多地方没有考虑到,想的是在学习过程中不断更新这篇博文,博文在写的过程中也掺杂了一点自己的理解,若有错误或者不恰当的地方,烦请指教。


CSS 定位问题

主要就是经典的绝对定位,相对定位问题。

  • 10个文档学布局:通过十个例子讲解布局,主要涉及相对布局,绝对布局,浮动。
  • 百度前端学院笔记 – 理解绝对定位:文章本身一般,几篇参考文献比较详细
  • HTML和CSS高级指南之二——定位详解(译文):介绍浮动的使用,详细介绍定位的技巧,包括如何准确的给元素在 X 轴、Y 轴和 Z 轴定位
双飞翼布局

双飞翼:父盒子包含三个子盒子(左,中,右),中间的子盒子里再加一个子盒子。

  • 中间盒子的宽度设置为 width: 100%; 独占一行;
  • 使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行;
  • 在中间盒子里面再添加一个 div,然后对这个 div 设置 margin-left 和 margin-right来为左右盒子留位置;
    <pre><code></code>

    <div class="container">

    <div class="middle">
    <div class="middle-inner">中间弹性区</div>
    </div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
    </div>
    </code></pre>

目录

  1. 常用居中方法
    • 水平居中
    • 垂直居中
  2. 单列布局
  3. 二列&三列布局
    • float margin
    • position margin
    • 圣杯布局(float 负margin)
    • 双飞翼布局(float 负margin)
    • flex布局
  4. 总结

绝对定位与浮动

三栏式布局

涉及浮动和清除浮动,主要讲解“圣杯”和“双飞翼”两种解决方法。这两种方法实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,它们实现的效果是一样的,差别在于其实现的思想。

圣杯和双飞翼异同

圣杯布局和双飞翼布局解决的问题是一样的,都是两边定宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。

  • 两种方法基本思路都相同:首先让中间盒子 100% 宽度占满同一高度的空间,在左右两个盒子被挤出中间盒子所在区域时,使用 margin-left 的负值将左右两个盒子拉回与中间盒子同一高度的空间。接下来进行一些调整避免中间盒子的内容被左右盒子遮挡。
  • 主要区别在于 如何使中间盒子的内容不被左右盒子遮挡:

<p>1. 圣杯布局的方法:设置父盒子的 padding 值为左右盒子留出空位,再利用相对布局对左右盒子调整位置占据 padding 出来的空位;</p>
<p>2. 双飞翼布局的方法:在中间盒子里再增加一个子盒子,直接设置这个子盒子的 margin 值来让出空位,而不用再调整左右盒子。</p>
简单说起来就是双飞翼布局比圣杯布局多创建了一个 div,但不用相对布局了,少设置几个属性。

1.常用居中方法

居中在布局中很常见,我们假设DOM文档结构如下,子元素要在父元素中居中:

XHTML

<div class="parent"> <div class="child"></div> </div>

1
2
3
<div class="parent">
    <div class="child"></div>
</div>

绝对定位与浮动都会“block”化元素

  • 绝对定位:绝对定位后的元素生成一个块级框,而不论原来它在正常流中生成何种类型的框。
  • 浮动:“block”化元素是指:行内元素在设置浮动后,会拥有块级元素的部分特性,可以设置高宽等,其实质上还是行内元素。

圣杯布局

圣杯:父盒子包含三个子盒子(左,中,右)

  • 中间盒子的宽度设置为 width: 100%; 独占一行;
  • 使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行;
    • .left {margin-left:-100%;} 把左边的盒子拉上去
    • .right {margin-left:-右边盒子宽度px;} 把右边的盒子拉上去
  • 父盒子设置左右的 padding 来为左右盒子留位置;
  • 对左右盒子使用相对布局来占据 padding 的空白,避免中间盒子的内容被左右盒子覆盖;

XHTML

<!-- 圣杯的 HTML 结构 --> <div class="container"> <!-- 中间的 div 必须写在最前面 --> <div class="middle">中间弹性区</div> <div class="left">左边栏</div> <div class="right">右边栏</div> </div>

1
2
3
4
5
6
7
<!-- 圣杯的 HTML 结构 -->
<div class="container">
    <!-- 中间的 div 必须写在最前面 -->
    <div class="middle">中间弹性区</div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
</div>
利用浮动实现

我自己使用浮动也实现了三栏式布局:左边盒子左浮动,右边盒子右浮动,中间盒子利用 margin-left 和 margin-right 来为左右盒子留位置,同时父盒子设置 overflow: auto; 来避免子盒子溢出。
<pre><code></code>

<div class="container">
<div class="left">左边栏</div>
<div class="right">右边栏</div>

<div class="middle">中间弹性区</div>
</div>
</code></pre>
三栏式布局参考下面几个链接:

  • <p> CSS三栏布局——中间固定两边自适应宽度: w3cplus 的文章,使用了双飞翼和浮动实现两侧定宽、中间自适应,也实现了两侧自适应、中间定宽</p>
  • <p> 简书 - 圣杯布局和双飞翼布局(前端面试必看):只讲了圣杯,不过特别详细</p>
  • <p> In Search of the Holy Grail:圣杯布局的来源
    [百度前端学院笔记 - 三栏式布局之双飞翼与圣杯]</p>
  • <p> (http://ife.baidu.com/note/detail/id/1025):百度前端学院学员的前端学习笔记</p>

三栏式布局涉及到负 magin 和 清除浮动的问题。

水平居中

子元素为行内元素还是块状元素,宽度一定还是宽度未定,采取的布局方案不同。下面进行分析:

行内元素:对父元素设置text-align:center;
定宽块状元素: 设置左右margin值为auto;
不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;
通用方案: flex布局,对父元素设置display:flex;justify-content:center;

脱离文档流

  • 使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围,可实现文字环绕图片的效果。
  • 使用position:absolute;脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。

双飞翼布局

CSS杰出布局整理,css常见布局总计。双飞翼:父盒子包含三个子盒子(左,中,右),中间的子盒子里再加一个子盒子。

  • 中间盒子的宽度设置为 width: 100%; 独占一行;
  • 使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行;
  • 在中间盒子里面再添加一个 div,然后对这个 div 设置 margin-leftmargin-right来为左右盒子留位置;

XHTML

<!-- 双飞翼的 HTML 结构 --> <div class="container"> <!-- 中间的 div 必须写在最前面 --> <div class="middle"> <div class="middle-inner">中间弹性区</div> </div> <div class="left">左边栏</div> <div class="right">右边栏</div> </div>

1
2
3
4
5
6
7
8
9
<!-- 双飞翼的 HTML 结构 -->
<div class="container">
    <!-- 中间的 div 必须写在最前面 -->
    <div class="middle">
         <div class="middle-inner">中间弹性区</div>
    </div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
</div>
负 magin

这里引出了“负 margin”的问题:

  • 负margin用法权威指南:The Definitive Guide to Using Negative Margins 的译文,介绍了负 magin 的一些性质和很多实用技巧
  • 简书 - margin为负值产生的影响和常见布局应用:包括对自身的影响,对文档流的影响,以及一些在布局中的应用技巧(比如去除列表右边框,负边距 定位实现水平垂直居中,去除列表最后一个 li 元素的 border-bottom,多列等高)
  • 博客园 - CSS布局奇淫巧计之-强大的负边距:和上文内容差不多

简单总结几点:

  1. 不使用 float 的话,负 margin 元素是不会破坏页面的文档流。所以如果你使用负 margin 上移一个元素,所有跟随的元素都会被上移(而 relative 定位的元素则不同,会保留原位置,影响文档流)。
  2. 当 static 元素的 margin-top/margin-left 被赋予负值时,元素将被拉进指定的方向。
  3. 如果你设置 margin-bottom/right 为负数,元素并不会如你所想的那样向下/右移动,而是将后续的元素拖拉进来,覆盖本来的元素。
  4. 当元素不存在 width 属性或者 width: auto
    的时候,负 margin 会增加元素的宽度.
  5. margin-top 为负值不会增加高度,只会产生向上位移;margin-bottom 为负值不会产生位移,会减少自身的供 CSS 读取的高度,影响下方的元素位置;上下相邻的元素两者均为负时,效果不叠加,取负值更多的那个效果。

垂直居中

垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。

父元素一定,子元素为单行内联文本:设置父元素的height等于行高line-height
父元素一定,子元素为多行内联文本:设置父元素的display:table-cellinline-block,再设置vertical-align:middle;
块状元素:设置子元素position:fixed(absolute),然后设置margin:auto;
通用方案: flex布局,给父元素设置{display:flex; align-items:center;}

清除浮动

元素脱离文档流后可能导致父容器塌陷,这个时候需要清除浮动避免塌陷。

  • clearfix清除浮动
  • overflow:hidden清除浮动(父容器溢出隐藏)

圣杯和双飞翼异同

圣杯布局和双飞翼布局解决的问题是一样的,都是两边定宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。

  • 两种方法基本思路都相同:首先让中间盒子 100% 宽度占满同一高度的空间,在左右两个盒子被挤出中间盒子所在区域时,使用 margin-left 的负值将左右两个盒子拉回与中间盒子同一高度的空间。接下来进行一些调整避免中间盒子的内容被左右盒子遮挡。
  • 主要区别在于 如何使中间盒子的内容不被左右盒子遮挡
    • 圣杯布局的方法:设置父盒子的 padding 值为左右盒子留出空位,再利用相对布局对左右盒子调整位置占据 padding 出来的空位;
    • 双飞翼布局的方法:在中间盒子里再增加一个子盒子,直接设置这个子盒子的 margin 值来让出空位,而不用再调整左右盒子。

简单说起来就是双飞翼布局比圣杯布局多创建了一个 div,但不用相对布局了,少设置几个属性。

清除浮动

清除浮动主要是为了解决高度塌陷问题。而简单的 clear: both
并不能解决这个问题,所以引出了许多解决方案。
StackOverflow - What methods of ‘clearfix’ can I use?:清除浮动黑科技完整解读
那些年我们一起清除过的浮动:神文,把“清除浮动”定义为“闭合浮动”,把问题由来和解决方案都讲清楚了,并且分析了各种解决方案的优劣。

各种解决方案在上面的链接里有很详细的说明了,这里就不赘述了。大体分为两类:

  1. 其一,通过在浮动元素的末尾添加一个空元素,设置 clear: both
    属性,after 伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素;
  2. 其二,通过设置父元素 overflow
    或者 display: table
    属性来闭合浮动

顺便补充一句,clear float(例如 clear: left) 是对某个元素设置,以避免其某一边有浮动元素,即对当前元素产生约束,约束的边界为其他的浮动元素。对于已经浮动的元素,设置 clear float 是无效的。

2.单列布局

澳门新浦京娱乐场网站 1特征:定宽、水平居中

常见的单列布局有两种:

  • 一种是headercontentfooter宽度都相同,其一般不会占满浏览器的最宽宽度,但当浏览器宽度缩小低于其最大宽度时,宽度会自适应。
  • 一种是headerfooter宽度为浏览器宽度,但content以及headerfooter里的内容却不会占满浏览器宽度。

对于第一种,对headercontentfooter统一设置widthmax-width,并通过margin:auto实现居中。

DOM文档:

XHTML

<div class="layout"> <div id="header">头部</div> <div id="content">内容</div> <div id="footer">尾部</div> </div>

1
2
3
4
5
<div class="layout">
  <div id="header">头部</div>
  <div id="content">内容</div>
  <div id="footer">尾部</div>
</div>

CSS清单:

CSS

.layout{ /* width: 960px; *//*设置width当浏览器窗口宽度小于960px时,单列布局不会自适应。*/ max-width: 960px; margin: 0 auto; }

1
2
3
4
5
  .layout{
  /*   width: 960px; *//*设置width当浏览器窗口宽度小于960px时,单列布局不会自适应。*/
    max-width: 960px;
    margin: 0 auto;
  }

对于第二种,headerfooter的内容宽度为100%,但headerfooter的内容区以及content统一设置max-width,并通过margin:auto实现居中。

DOM文档:

XHTML

<div id="header"> <div class="layout">头部</div> </div> <div id="content" class="layout">内容</div> <div id="footer"> <div class="layout">尾部</div> </div>

1
2
3
4
5
6
7
<div id="header">
  <div class="layout">头部</div>
</div>
<div id="content" class="layout">内容</div>
<div id="footer">
  <div class="layout">尾部</div>
</div>

CSS清单:

CSS

.layout{ /* width: 960px; *//*设置width当浏览器窗口宽度小于960px时,单列布局不会自适应。*/ max-width: 960px; margin: 0 auto; }

1
2
3
4
5
  .layout{
  /*   width: 960px; *//*设置width当浏览器窗口宽度小于960px时,单列布局不会自适应。*/
    max-width: 960px;
    margin: 0 auto;
  }

圣杯与双飞翼(三栏式布局)

利用浮动实现

我自己使用浮动也实现了三栏式布局:左边盒子左浮动,右边盒子右浮动,中间盒子利用 margin-leftmargin-right 来为左右盒子留位置,同时父盒子设置 overflow: auto; 来避免子盒子溢出。``

XHTML

<!-- 浮动实现的 HTML 结构 --> <div class="container"> <div class="left">左边栏</div> <div class="right">右边栏</div> <!-- 中间的 div 必须写在最后面 --> <div class="middle">中间弹性区</div> </div>

1
2
3
4
5
6
7
<!-- 浮动实现的 HTML 结构 -->
<div class="container">
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
    <!-- 中间的 div 必须写在最后面 -->
    <div class="middle">中间弹性区</div>
</div>

三栏式布局参考下面几个链接:

  • CSS三栏布局——中间固定两边自适应宽度: w3cplus 的文章,使用了双飞翼和浮动实现两侧定宽、中间自适应,也实现了两侧自适应、中间定宽
  • 简书 – 圣杯布局和双飞翼布局(前端面试必看):只讲了圣杯,不过特别详细
  • In Search of the Holy Grail:圣杯布局的来源
  • 百度前端学院笔记 – 三栏式布局之双飞翼与圣杯:百度前端学院学员的前端学习笔记

三栏式布局涉及到负 magin 和 清除浮动的问题。

居中布局
  • Centering in CSS: A Complete Guide:非常全面的居中定位博客,包括各种情况下的水平居中,垂直居中和水平垂直居中方案。有展示示例及相应的 HTML 和 CSS 代码
    文章大致结构:
  • 水平居中对于行内元素(inline):text-align: center;
  • 对于块级元素(block):设置宽度且 marigin-left
    和 margin-right
    是设成 auto
  • 对于多个块级元素:对父元素设置 text-align: center;
    ,对子元素设置 display: inline-block;
    ;或者使用 flex 布局
  • 垂直居中
  • 对于行内元素(inline)
    • 单行:设置上下 pandding 相等;或者设置 line-height
      和 height
      相等
    • 多行:设置上下 pandding 相等;或者设置 display: table-cell;
      和 vertical-align: middle;
      ;或者使用 flex 布局;或者使用伪元素
  • 对于块级元素(block):下面前两种方案,父元素需使用相对布局
    • 已知高度:子元素使用绝对布局 top: 50%;
      ,再用负的 margin-top
      把子元素往上拉一半的高度
    • 未知高度:子元素使用绝对布局 position: absolute; top: 50%; transform: translateY(-50%);
    • 使用 Flexbox:选择方向,justify-content: center;
  • 水平垂直居中
    • 定高定宽:先用绝对布局 top: 50%; left: 50%;
      ,再用和宽高的一半相等的负 margin 把子元素回拉
    • 高度和宽度未知:先用绝对布局 top: 50%; left: 50%;
      ,再设置 transform: translate(-50%, -50%);
    • 使用 Flexbox:justify-content: center; align-items: center;

3. 二列&三列布局

澳门新浦京娱乐场网站 2

二列布局的特征是侧栏固定宽度,主栏自适应宽度。三列布局的特征是两侧两列固定宽度,中间列自适应宽度。

之所以将二列布局和三列布局写在一起,是因为二列布局可以看做去掉一个侧栏的三列布局,其布局的思想有异曲同工之妙。对于传统的实现方法,主要讨论上图中前三种布局,经典的带有侧栏的二栏布局以及带有左右侧栏的三栏布局,对于flex布局,实现了上图的五种布局。

圣杯与双飞翼是在做IFE百度前端小薇学院的三栏式布局的时候了解到的,通过尝试不同种布局,查阅了一些资料后,发现这个题比较好的解决方法就是圣杯布局。
  • 目的:两边定宽中间自适应
  • 中心思想:
    • 中间栏宽度设为100%独占一行
    • 为左右栏的“拉升”腾出空间(实现圣杯与双飞翼的不同之处)
    • 用margin-left负值将左右栏分别拉升回与中间栏同一高度的左右两边
  • 需要注意的地方
    • 对中间栏进行优先渲染
    • 圣杯基本布局之后需要做一些适当的调整实现具体布局要求,比如相对定位左右栏的位置进行优化
    • 在使用布局的时候要考虑盒子的border属性,必要时用到box-sizing:border-box;

负 magin

这里引出了“负 margin”的问题:

  • 负margin用法权威指南:The Definitive Guide to Using Negative Margins 的译文,介绍了负 magin 的一些性质和很多实用技巧
  • 简书 – margin为负值产生的影响和常见布局应用:包括对自身的影响,对文档流的影响,以及一些在布局中的应用技巧(比如去除列表右边框,负边距 定位实现水平垂直居中,去除列表最后一个 li 元素的 border-bottom,多列等高)
  • 博客园 – CSS布局奇淫巧计之-强大的负边距:和上文内容差不多

简单总结几点:

  • 不使用 float 的话,负 margin 元素是不会破坏页面的文档流。所以如果你使用负 margin 上移一个元素,所有跟随的元素都会被上移(而 relative 定位的元素则不同,会保留原位置,影响文档流)。
  • 当 static 元素的 margin-top/margin-left 被赋予负值时,元素将被拉进指定的方向。
  • 如果你设置 margin-bottom/right 为负数,元素并不会如你所想的那样向下/右移动,而是将后续的元素拖拉进来,覆盖本来的元素。
  • 当元素不存在 width 属性或者 width: auto 的时候,负 margin 会增加元素的宽度.
  • margin-top 为负值不会增加高度,只会产生向上位移;margin-bottom 为负值不会产生位移,会减少自身的供 CSS 读取的高度,影响下方的元素位置;上下相邻的元素两者均为负时,效果不叠加,取负值更多的那个效果。
响应式设计

“响应式设计(Responsive Design)” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略。
媒体查询(Media Queries)是做此事所需的最强大的工具。
注: Responsive Web Design = RWD,Adaptive Web Design = AWD
RWD:

  • 采用 CSS 的 media query 技术
  • 流体布局(fluid grids)
  • 自适应的图片/视频等资源素材
    (为小、中、大屏幕做一些优化,目的是让任何尺寸的屏幕空间都能得到充分利用)

AWD:

  • CSS media query 技术(仅针对有限几种预设的屏幕尺寸设计)
  • 用 JavaScript 来操作 HTML 内容
  • 在服务器端操作 HTML 内容(比如为移动端减少内容,为桌面端提供更多内容)

a. float margin

原理说明:设置两个侧栏分别向左向右浮动,中间列通过外边距给两个侧栏腾出空间,中间列的宽度根据浏览器窗口自适应。

DOM文档:

XHTML

<div id="content"> <div class="sub">sub</div> <div class="extra">extra</div> <div class="main">main</div> </div>

1
2
3
4
5
<div id="content">
    <div class="sub">sub</div>
    <div class="extra">extra</div>
    <div class="main">main</div>
</div>

布局步骤:

  1. 对两边侧栏分别设置宽度,并对左侧栏添加左浮动,对右侧栏添加有浮动。
  2. 对主面板设置左右外边距,margin-left的值为左侧栏的宽度,margin-right的值为右侧栏的宽度。

CSS清单:

CSS

.sub{ width: 100px; float: left; } .extra{ width: 200px; float: right; } .main{ margin-left: 100px; margin-right: 200px; }

1
2
3
4
5
6
7
8
9
10
11
12
.sub{
    width: 100px;
    float: left;
}
.extra{
    width: 200px;
    float: right;
}
.main{
    margin-left: 100px;
    margin-right: 200px;
}

一些说明:

* 注意DOM文档的书写顺序,先写两侧栏,再写主面板,更换后则侧栏会被挤到下一列(圣杯布局和双飞翼布局都会用到)。* 这种布局方式比较简单明了,但缺点是渲染时先渲染了侧边栏,而不是比较重要的主面板。

二列的实现方法

如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置主面板的margin-right值,其他操作相同。反之亦然。

任务描述

注:图片来自IFE百度前端小薇学院三栏式布局

澳门新浦京娱乐场网站 3

此处输入图片的描述

清除浮动

清除浮动主要是为了解决高度塌陷问题。而简单的 clear: both 并不能解决这个问题,所以引出了许多解决方案。

  • StackOverflow – What methods of ‘clearfix’ can I use?:清除浮动黑科技完整解读
  • 那些年我们一起清除过的浮动:神文,把“清除浮动”定义为“闭合浮动”,把问题由来和解决方案都讲清楚了,并且分析了各种解决方案的优劣。

各种解决方案在上面的链接里有很详细的说明了,这里就不赘述了。大体分为两类:

  • 其一,通过在浮动元素的末尾添加一个空元素,设置 clear: both 属性,after 伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素;
  • 其二,通过设置父元素 overflow 或者 display: table 属性来闭合浮动

顺便补充一句,clear float(例如 clear: left) 是对某个元素设置,以避免其某一边有浮动元素,即对当前元素产生约束,约束的边界为其他的浮动元素。对于已经浮动的元素,设置 clear float 是无效的。

Flexbox 布局

Flexbox 布局参考下面几篇文章就可以了,几篇文章大同小异,看一两篇就知道大概了,讲的挺详细的,在此不赘述

  • w3cplus - 一个完整的Flexbox指南澳门新浦京娱乐场网站,:A Complete Guide to Flexbox 的译文
  • SegmentFault - Flexbox详解
  • w3cplus - 图解CSS3 Flexbox属性
  • w3cplus - Flexbox——快速布局神器

b. position margin

原理说明:通过绝对定位将两个侧栏固定,同样通过外边距给两个侧栏腾出空间,中间列自适应。

DOM文档:

XHTML

<div class="sub">left</div> <div class="main">main</div> <div class="extra">right</div>

1
2
3
<div class="sub">left</div>
<div class="main">main</div>
<div class="extra">right</div>

布局步骤:

  1. 对两边侧栏分别设置宽度,设置定位方式为绝对定位。
  2. 设置两侧栏的top值都为0,设置左侧栏的left值为0, 右侧栏的right值为0。
  3. 对主面板设置左右外边距,margin-left的值为左侧栏的宽度,margin-right的值为右侧栏的宽度。

CSS清单:

CSS

.sub, .extra { position: absolute; top: 0; width: 200px; } .sub { left: 0; } .extra { right: 0; } .main { margin: 0 200px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.sub, .extra {
    position: absolute;
    top: 0;
    width: 200px;
}
.sub {
    left: 0;
}
.extra {
    right: 0;
}
.main {
    margin: 0 200px;
}

一些说明:

  • 与上一种方法相比,本种方法是通过定位来实现侧栏的位置固定。
  • 如果中间栏含有最小宽度限制,或是含有宽度的内部元素,则浏览器窗口小到一定程度,主面板与侧栏会发生重叠。

二列的实现方法

如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置主面板的margin-right值,其他操作相同。反之亦然。

圣杯布局的具体实现:

  • 中间栏宽度设为100%独占一行
  • 设置父容器的左右padding值为左右栏的“拉升”腾出空间
  • 用margin-left负值将左右栏分别拉升回与中间栏同一水平高度的左右两边
  • 使用相对定位设置左右栏的位置

注:代码只截取了重要部分

/*这是html代码*/
<div id="header"></div>
<div id="container">
   <div id="center" class="column"></div>
   <div id="left" class="column"></div>
   <div id="right" class="column"></div>
</div>
<div class="footer"></div>

第一步:给中间栏设置宽度为100%,并设置父容器的左右padding值。给三栏加上浮动,并清除浮动使得父容器高度不塌陷

/*这是最初的css样式(截取了关键部分)*/

#container {
    padding-left: 240px;        /* 左栏宽度 两倍padding值 */
    padding-right: 160px;       /* 右栏宽度 两倍padding值 */
    background: #eee;
}
#container .column{
    float:left;
}
#container::after{      /* 防止父容器高度塌陷 */
    content: '';
    display: block;
    clear: both;
}
#center {
    width: 100%;        /* 中间栏宽度设为100% */
}
#left {
    width: 200px;       /* 左栏宽度固定 */  
}
#right {
    width: 120px;       /* 右栏宽度固定 */
}

效果如下:

澳门新浦京娱乐场网站 4

float padding

第二步:将左右栏分别拉升到与中间栏同一水平高度

    #left{
        margin-left: -100%;         /* 负的100% */
    }
    #right{
        margin-right: -120px;       /* 负的右栏宽 */
    }

效果如下:

澳门新浦京娱乐场网站 5

拉升左右栏

第三步:使用相对定位设置左右栏的位置

    #container .column{
        position: relative;
    }
    #left{
        right:220px;    /* 左栏向左平移到适当位置 */
    }
    #right{
        left:20px;      /* 右栏向右平移到适当位置 */
    }

效果如下:

澳门新浦京娱乐场网站 6

圣杯

基本上三栏式布局就完成啦~ 再设置一些内外边距值就可以达到效果Demo

居中布局

  • Centering in CSS: A Complete Guide:非常全面的居中定位博客,包括各种情况下的水平居中,垂直居中和水平垂直居中方案。有展示示例及相应的 HTML 和 CSS 代码

文章大致结构:

  • 水平居中
    • 对于行内元素(inline):text-align: center;
    • 对于块级元素(block):设置宽度且 marigin-leftmargin-right 是设成 auto
    • 对于多个块级元素:对父元素设置 text-align: center;,对子元素设置 display: inline-block;;或者使用 flex 布局
  • 垂直居中
    • 对于行内元素(inline)
      • 单行:设置上下 pandding 相等;或者设置 line-heightheight 相等
      • 多行:设置上下 pandding 相等;或者设置 display: table-cell;vertical-align: middle;;或者使用 flex 布局;或者使用伪元素
    • 对于块级元素(block):下面前两种方案,父元素需使用相对布局
      • 已知高度:子元素使用绝对布局 top: 50%;,再用负的 margin-top 把子元素往上拉一半的高度
      • 未知高度:子元素使用绝对布局 position: absolute; top: 50%; transform: translateY(-50%);
      • 使用 Flexbox:选择方向,justify-content: center;
  • 水平垂直居中
    • 定高定宽:先用绝对布局 top: 50%; left: 50%;,再用和宽高的一半相等的负 margin 把子元素回拉
    • 高度和宽度未知:先用绝对布局 top: 50%; left: 50%;,再设置 transform: translate(-50%, -50%);
    • 使用 Flexbox:justify-content: center; align-items: center;

c. 圣杯布局(float 负margin padding position)

原理说明

主面板设置宽度为100%,主面板与两个侧栏都设置浮动,常见为左浮动,这时两个侧栏会被主面板挤下去。通过负边距将浮动的侧栏拉上来,左侧栏的负边距为100%,刚好是窗口的宽度,因此会从主面板下面的左边跑到与主面板对齐的左边,右侧栏此时浮动在主面板下面的左边,设置负边距为负的自身宽度刚好浮动到主面板对齐的右边。为了避免侧栏遮挡主面板内容,在外层设置左右padding值为左右侧栏的宽度,给侧栏腾出空间,此时主面板的宽度减小。由于侧栏的负margin都是相对主面板的,两个侧栏并不会像我们理想中的停靠在左右两边,而是跟着缩小的主面板一起向中间靠拢。此时使用相对布局,调整两个侧栏到相应的位置。

DOM文档:

XHTML

<div id="bd"> <div class="main"></div> <div class="sub"></div> <div class="extra"></div> </div>

1
2
3
4
5
<div id="bd">        
    <div class="main"></div>        
    <div class="sub"></div>        
    <div class="extra"></div>  
</div>

布局步骤:

  1. 三者都设置向左浮动。
  2. 设置main宽度为100%,设置两侧栏的宽度。
  3. 设置 负边距,sub设置负左边距为100%,extra设置负左边距为负的自身宽度。
  4. 设置main的padding值给左右两个子面板留出空间。
  5. 设置两个子面板为相对定位,sub的left值为负的sub宽度,extra的right值为负的extra宽度。

CSS清单:

CSS

.main { float: left; width: 100%; } .sub { float: left; width: 190px; margin-left: -100%; position: relative; left: -190px; } .extra { float: left; width: 230px; margin-left: -230px; position: relative; right: -230px; } #bd { padding: 0 230px 0 190px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.main {        
    float: left;      
    width: 100%;  
}  
.sub {      
    float: left;        
    width: 190px;        
    margin-left: -100%;              
    position: relative;  
    left: -190px;  
}  
.extra {        
    float: left;        
    width: 230px;        
    margin-left: -230px;
    position: relative;
    right: -230px;  
}
#bd {        
    padding: 0 230px 0 190px;  
}

一些说明

  • DOM元素的书写顺序不得更改。
  • 当面板的main内容部分比两边的子面板宽度小的时候,布局就会乱掉。可以通过设置mainmin-width属性或使用双飞翼布局避免问题。

二列的实现方法

如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置主面板的padding-right值,其他操作相同。反之亦然。

双飞翼的具体实现:

与圣杯的相同之处不再赘述,不同点在于:

  • 给中间栏再设置一个div,给div设置左右margin值为左右栏的“拉升”腾出空间
/*这是html代码*/
<div id="header"></div>
<div id="container">
   <div id="center" class="column">
        <div id="wrap"></div>       /* 添加的div */
   </div>
   <div id="left" class="column"></div>
   <div id="right" class="column"></div>
</div>
<div class="footer"></div>

#wrap{
    margin-left: 220px;         /* 腾出左边部分 */
    margin-right: 140px;        /* 腾出右边部分 */
    padding: 20px;
}

实现效果:

澳门新浦京娱乐场网站 7

双飞翼

双飞翼的缺点在于中间栏的高度只适应新添加的div的高度,当左右栏高度超出中间的高度,就会有上图的情况出现,而圣杯布局可以适应三栏中任意最高的高度。

响应式设计

“响应式设计(Responsive Design)” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略。

媒体查询(Media Queries)是做此事所需的最强大的工具。

注: Responsive Web Design = RWD,Adaptive Web Design = AWD

RWD:

  • 采用 CSS 的 media query 技术
  • 流体布局(fluid grids)
  • 自适应的图片/视频等资源素材

(为小、中、大屏幕做一些优化,目的是让任何尺寸的屏幕空间都能得到充分利用)

AWD:

  • CSS media query 技术(仅针对有限几种预设的屏幕尺寸设计)
  • 用 JavaScript 来操作 HTML 内容
  • 在服务器端操作 HTML 内容(比如为移动端减少内容,为桌面端提供更多内容)

以上 RWD 和 AWD 解释引自 知乎 @屹峰

可以参考 Bootstrap 的网格系统:

The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops).

自己实现网格系统: Creating Your Own CSS Grid System

d. 双飞翼布局(float 负margin margin)

原理说明

双飞翼布局和圣杯布局的思想有些相似,都利用了浮动和负边距,但双飞翼布局在圣杯布局上做了改进,在main元素上加了一层div, 并设置margin,由于两侧栏的负边距都是相对于main-wrap而言,main的margin值变化便不会影响两个侧栏,因此省掉了对两侧栏设置相对布局的步骤。

DOM文档:

XHTML

<div id="main-wrap" class="column"> <div id="main">#main</div> </div> <div class="sub"></div> <div class="extra"></div>

1
2
3
4
5
<div id="main-wrap" class="column">
      <div id="main">#main</div>
</div>
<div class="sub"></div>        
<div class="extra"></div>

布局步骤:

  1. 三者都设置向左浮动。
  2. 设置main-wrap宽度为100%,设置两个侧栏的宽度。
  3. 设置 负边距,sub设置负左边距为100%,extra设置负左边距为负的自身宽度。
  4. 设置main的margin值给左右两个子面板留出空间。

CSS清单:

CSS

.main-wrap { float: left; width: 100%; } .sub { float: left; width: 190px; margin-left: -100%; } .extra { float: left; width: 230px; margin-left: -230px; } .main { margin: 0 230px 0 190px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.main-wrap {        
    float: left;      
    width: 100%;  
}  
.sub {      
    float: left;        
    width: 190px;        
    margin-left: -100%;  
}  
.extra {        
    float: left;        
    width: 230px;        
    margin-left: -230px;
}
.main {    
    margin: 0 230px 0 190px;
}

一些说明

  • 圣杯采用的是padding,而双飞翼采用的margin,解决了圣杯布局main的最小宽度不能小于左侧栏的缺点。
  • 双飞翼布局不用设置相对布局,以及对应的left和right值。
  • 通过引入相对布局,可以实现三栏布局的各种组合,例如对右侧栏设置position: relative; left: 190px;,可以实现sub extra main的布局。

二列的实现方法

如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置main-wrapmargin-right值,其他操作相同。反之亦然。

居中

Flexbox 布局

Flexbox 布局参考下面几篇文章就可以了,几篇文章大同小异,看一两篇就知道大概了,讲的挺详细的,在此不赘述

  • w3cplus – 一个完整的Flexbox指南:A Complete Guide to Flexbox 的译文
  • SegmentFault – Flexbox详解
  • w3cplus – 图解CSS3 Flexbox属性
  • w3cplus – Flexbox——快速布局神器

    2 赞 14 收藏 1 评论

澳门新浦京娱乐场网站 8

e. flex布局

如果你还没有学习flex布局,阮一峰老师的两篇博文将会很适合你。

阮一峰的博客——flex语法
阮一峰的博客——flex布局案例

以下是五种布局的flex布局代码:

DOM文档

XHTML

<div class="layout"> <aside class="layout__aside">侧边栏宽度固定</aside> <div class="layout__main">主内容栏宽度自适应</div> </div> <div class="layout"> <div class="layout__main">主内容栏宽度自适应</div> <aside class="layout__aside">侧边栏宽度固定</aside> </div> <div class="layout"> <aside class="layout__aside">左侧边栏宽度固定</aside> <div class="layout__main">主内容栏宽度自适应</div> <aside class="layout__aside">右侧边栏宽度固定</aside> </div> <div class="layout"> <aside class="layout__aside">第1个侧边栏宽度固定</aside> <aside class="layout__aside">第2个侧边栏宽度固定</aside> <div class="layout__main">主内容栏宽度自适应</div> </div> <div class="layout"> <div class="layout__main">主内容栏宽度自适应</div> <aside class="layout__aside">第1个侧边栏宽度固定</aside> <aside class="layout__aside">第2个侧边栏宽度固定</aside> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="layout">
    <aside class="layout__aside">侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
</div>
<div class="layout">
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside">侧边栏宽度固定</aside>
</div>
<div class="layout">
    <aside class="layout__aside">左侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside">右侧边栏宽度固定</aside>
</div>
<div class="layout">
    <aside class="layout__aside">第1个侧边栏宽度固定</aside>
    <aside class="layout__aside">第2个侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
</div>
<div class="layout">
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside">第1个侧边栏宽度固定</aside>
    <aside class="layout__aside">第2个侧边栏宽度固定</aside>
</div>

CSS清单

CSS

.layout { display: flex; } .layout__main { flex: 1; } .layout__aside { width: 200px; }

1
2
3
4
5
6
7
8
9
.layout {
    display: flex;
}
.layout__main {
    flex: 1;
}
.layout__aside {
    width: 200px;
}

与之前所讲的几种传统布局方案相比,flex布局的代码可谓异常简洁,而且非常通用,利用简单的三行CSS即实现了常见的五种布局。

水平居中

  • text-align:center;只能适用于行内元素,块状元素可以通过改变元素的display属性(display:inline-block或者display:inline)
  • 固定宽度的块状元素设置margin:0 auto;使其居中显示

总结

传统的布局方法基于盒状模型,依赖 display属性 position属性 float属性,逻辑相对复杂,对于实现一些特殊效果,例如垂直居中,尤其复杂繁琐。而flex布局中的flex容器可以根据实际可用空间动态调整子元素的宽高比和顺序,使元素能够尽可能地利用可用空间,同时也能通过缩小来避免超出。flex布局提供了一套简便、完整、响应式的布局方案。

flex布局将是CSS布局的趋势,还未正式成为标准的gird布局也异常吸睛,于是知乎上很多刚入门的小伙伴
有了疑惑 2017年,圣杯和双飞翼布局已经淘汰了,真的?,对于此我个人仍然坚持我的观点2017年,圣杯和双飞翼布局已经淘汰了,真的? – Shelley Lee 的回答 – 知乎,至少在目前过渡阶段,仍然坚持夯实基础,稳步向前。

本文完。

PS:以后会继续写Flex布局和Grid布局相关文章,欢迎持续关注,也欢迎大家对文章提出建议或意见。

参考链接
CSS垂直居中和水平居中
圣杯布局小结
双飞翼布局介绍-始于淘宝UED_慕课猿问
我熟知的三种三栏网页宽度自适应布局方法 ” 张鑫旭-鑫空间-鑫生活
常见的几种布局总结

1 赞 26 收藏 评论

澳门新浦京娱乐场网站 9

垂直居中

  • 单行行内元素,设置行高(line-height)与height一致
  • 多行行内元素或者文字与图片一行用vertical-align:center;
  • 块状元素,父元素相对布局,子元素绝对定位(top:50%),再设置偏移(margin-top:子元素高度的一半)
  • 若子元素高度未知,将margin改为transform:translateY(-50%);

水平垂直居中

  • 跟块状元素垂直居中的思路一样,父元素相对布局,子元素绝对定位(top:50%;left:50%;),再设置偏移量(margin-top:子元素高度的一半;margin-left:子元素宽度的一半)
  • 子元素高度未知,将两个margin改为transform:translate(-50%,-50%);

注意:transform是css3的内容,需要考虑兼容性

负margin

边学边总结。。

Flexbox布局

grid

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:CSS杰出布局整理,css常见布局总计