Fork me on GitHub

前端布局记录

1 布局前言

2 布局要点

  • CSS标准盒模型(或W3C盒模型)

    一个web页面是由众多html元素拼凑而成的,而每一个html元素,都被解析为一个矩形盒,而CSS盒模型就是这种矩形盒的解构模型。CSS盒模型,它由内到外、被四条边界Content edge、Padding edge、Border edge和Margin edge划分为四个区域:Content area、Padding area、Border area和Margin area,在形状上,Content area(又称content-box)是实心矩形,其余是空心环形(空心部分是Content area),如下图所示:

    image-20190321160927499

  • box-sizing(css3) 顾名思义,其作用与设置CSS box的尺寸大小有关,而CSS box又可细分为:

    • content-box(即content area)
    • padding-box(=content area + padding area)
    • border-box(=content area + padding area + border area)
    • margin-box(=content area + padding area + border area + margin area)
  • 元素的分类及其布局特性

    • 块级元素:display属性取block、table、flex、grid和list-item等值的独占一行显示的元素。
      1. 独占一行(width默认为100%,height为0);
      2. 可以设置任何尺寸相关的属性(width、padding、margin和border);
    • 行内元素:display属性取inline值的可在同一行内排列显示的元素。
      1. 在一行内可以与多个同类型的元素按从左到右的顺序排列;
      2. 不可置换行内元素不能设置width、height和垂直方向上的margin,而可置换行内元素则可以;
      3. 在水平和垂直方向上的对齐方式,行内级元素分别受父元素的text-align属性和自身vertical-align属性的控制(父元素是table-cell元素时,也受父元素的vertical-align属性控制),在水平方向上默认左对齐,在垂直方向上默认在行框的baseline基线上显示。
    • 行内块级元素:display属性取inline-block、inline-table、inline-flex和inline-grid等值的兼具块级元素和行内级元素布局特性的元素。
      1. 排列方式与行内级元素同,不独占一行,在一行内按从左到右的顺序排列;
      2. 水平和垂直方向上的对齐方式与行内级元素同;
      3. 和块级元素一样,可以设置任何尺寸属性(但width默认为0);
  • 模型结构

    line box的模型结构,top线、text-top线、middle线、baseline线、text-bottom线和bottom线

    640EF75F-60C7-45E3-BA4B-8FAEFE937F3D

3 布局分类

  • 传统布局方案(浮动、定位)

    浮动 (float) (left|right)

    浮动起始位置:浮动元素(包括左右)的浮动起始位置,为最后一行最左侧的空白位置,而不管空白位置是否能够容纳当前浮动元素;

    浮动结束位置

    ​ 左浮动元素遇到第一个左浮动元素或包含块的最左侧padding时,结束浮动;

    ​ 右浮动元素遇到第一个右浮动元素或包含块的最右侧padding时,结束浮动;

    清除浮动(clear)(left|right|both):其作用是改变“当前元素”与“前一个声明的浮动元素”之间的默认布局规则,这种改变主要体现为:让当前元素换行显示。这句话包含三个要素,分别为:

    • 使用者:当前元素(浮动元素或者非浮动元素的块级元素)
    • 作用对象(清除谁的浮动):前一个声明的浮动元素
    • 目的(作用):让当前元素换行显示

    注:当子元素进行浮动时候,会造成父元素高度塌陷,不能自动拉伸,引入clearfix

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    <!DOCTYPE html>
    <html lang="zh_CH">
    <head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    .parent {
    width: 100%;
    border: 1px solid #2f2f2f;
    }

    .child-fl {
    float: left;
    width: 30%;
    height: 100px;
    background-color: #63b5ee;
    }

    .child-fr {
    float: right;
    width: 30%;
    height: 100px;
    background-color: #eedb37;
    }

    .clearfix::after {
    display: block;
    content: "";
    clear: both;
    }

    </style>
    </head>
    <body>

    <div class="parent clearfix">
    <div class="child-fl">FL</div>
    <div class="child-fr">FR</div>
    </div>
    </body>
    </html>

    Position 属性 (static|relative|absolute|fixed)

  • flex布局方案

    flexbox 布局是一个完整的布局模块而不是一个单独的属性,因此它涉及很多东西,包括它的整个属性集。 其中有的属性是在容器(container,也可以叫做父元素,称为flex container)上设置的,有的则是在容器的子元素(item,也可以叫做子元素,称为flex items)设置。

    注:Flexbox布局最适合应用程序的组件和小规模布局,而 Gird 布局则适用于较大规模的布局。

    如果 “常规”布局基于 block(块) 和 inline(内联) 流动方向,flex 布局则是基于 “flex-flow(弹性流动)” 方向。请在规范中看一下这个图片,解释flex布局背后的主要思想。

    img

    在flex布局中,flex 项(就是子元素)要么按照 main axis(主轴)(从 main-startmain-end )排布,要么按照cross axis(交叉轴) (从 cross-startcross-end)排布。

    • main axis: flex 容器的主轴,flex 项沿着主轴排布,注意主轴不一定是水平的,主轴是水平还是垂直取决于 flex-direction 属性(见下文)。
    • main-start|main-end: 分别表示主轴的开始位置和结束位置,flex 项在容器中会从 main-start 到 main-end 排布。
    • main size: flex 项占据主轴的宽度或高度。flex 项的 main size 属性是要么是“宽度”,要么是“高度”,这取决于主轴方向。
    • cross axis: 垂直于主轴的轴线称为交叉轴,其方向取决于主轴方向。
    • cross-start|cross-end: 分别表示交叉轴的开始位置和结束位置。flex 项在交叉轴上的排布从 cross-start 开始位置到 cross-end 结束位置。
    • cross size: flex 项占据交叉轴的宽度或高度。flex 项的 cross size 属性是要么是“宽度”,要么是“高度”,这取决于交叉轴方向。

    父元素属性(flex container)

    display

    用来定义一个 flex 容器。如果设置为 flex 则容器呈现为块状元素,设置为inline-flex 则容器呈现为行内元素。它为所有直接子元素提供了 flex 上下文。

    1
    2
    3
    .container {
    display: flex; /* or inline-flex */
    }

    flex-direction

    flex-direction 属性确立了主轴,从而定义了 flex 项在 flex 容器中的排布方向。 Flexbox 是单向布局,有些时候我们也称作一维布局。 可以将 flex 项视为主要沿着水平行或垂直列排布。

    1
    2
    3
    .container {
    flex-direction: row | row-reverse | column | column-reverse;
    }
    • row (默认值) :行排布。在 ltr (left to right, 从左到右)排版方式下,flex 项从左到右排列,在 rtl(right to left, 从右到左)排版方式下,flex 项从右到左排列。
    • row-reverse: 反向行排布,即 row 的反方向,在 ltr 中从右向左,在 rtl 中从左到右。
    • column: 列排布,与 row 相似,但是 flex 项从上到下排布。
    • column-reverse: 反向列排布,即 column 反方向,与 row-reverse 相似,只是 flex 项从上到下排布。

    flex-wrap

    默认情况下,flex 项会尽可能地尝试排在同一行上(行或列),通过设置 flex-wrap 来决定 flex 项是否允需要换行。

    1
    2
    3
    .container{
    flex-wrap: nowrap | wrap | wrap-reverse;
    }
    • nowrap (默认值) : 所有的 flex 项都会在同一行上排布,也就是我们常说的单行,或不换行。
    • wrap: flex 项将从上到下根据实际情况排布再多行上,也就是我们常说的多行,或会换行。
    • wrap-reverse: flex 项将 从下到上 根据实际情况排布再多行上折行。

    flex-flow (适用于父级 flex 容器)

    这是 flex-directionflex-wrap 属性的缩写形式。同时定义 flex 容器的主轴和交叉轴。默认是 row nowrap

    1
    flex-flow: <‘flex-direction’> || <‘flex-wrap’>

    justify-content

    justify-content 属性定义了flex 项沿主轴方向的对齐方式。
    当一行中的所有 flex 项都是固定大小,或者是灵活大小但已经达到最大 main size 时,它可以帮助分配主轴上的剩余空间。当 flex 项溢出主轴的时候,它还可以用来控制flex 项的对齐方式。

    • flex-start (默认值) : flex 项从主轴的开始位置(main-start)开始排布。
    • flex-end : flex 项从主轴的结束位置(main-end)开始排布
    • center: flex 项沿主轴居中排布。
    • space-between: flex 项沿主轴均匀排布,即我们常说的沿主轴 两端对齐 ,第一个flex 项在主轴开始位置,最后一个flex 项在主轴结束位置。
    • space-around: flex 项沿主轴均匀排布。要注意的是 flex 项看起来间隙是不均匀的,因为所有 flex 项两边的空间是相等的。第一项在容器边缘有一个单位的空间,但是在两个 flex 项之间有两个单位的间隙,因为每个 flex 项的两侧都有一个单位的间隙。
    • space-evenly: 任何两个 flex 项之间的间距(以及到 flex 容器边缘的空间)相等。
    1
    2
    3
    .container {
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
    }

    align-items

    align-items 定义了 flex 项如何沿当前行在交叉轴上排布的默认行为。可以将其视为交叉轴(垂直于主轴)上的对齐方式。

    • flex-start: flex 项按照交叉轴的开始位置(cross-start)对齐。
    • flex-end: flex 项按照交叉轴的结束位置(cross-end)对齐。
    • center: flex 项以交叉轴为中心,居中对齐。
    • baseline: flex 项按照他们的文字基线对齐。
    • stretch (默认值) : 拉伸 flex 项以填充整个容器(这里特别要注意:如果 flex 项有尺寸属性(min-width / max-width / width / min-height / max-height / height),那么首先应用这些尺寸属性。
    1
    2
    3
    .container {
    align-items: flex-start | flex-end | center | baseline | stretch;
    }

    align-content

    当交叉轴上有剩余空间时,align-content 可以设置 flex 容器中的 在交叉轴上如何分配剩余空间,类似于 justify-content 在主轴上对齐单个 flex 项的方式。

    注意:当只有一行 flex 项时,此属性不起作用。

    • flex-start:多行在容器的开始位置排布
    • flex-end:多行在容器的结束位置排布
    • center:多行在容器的总结位置排布
    • space-between:多行均匀分布;第一行分布在容器的开始位置,最后一行分布在容器的结束位置
    • space-around: 多行均匀分布,并且每行的间距(包括离容器边缘的间距)相同;
    • strech (默认值):多行拉伸以填充满整个剩余空间
    1
    2
    3
    .container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }

    flex 项属性 (flex items)

    order

    默认情况下,flex 项按源(HTML结构)顺序排布。但是,order 属性可以控制它们在 flex 容器中的显示顺序。

    1
    2
    3
    .item {
    order: <integer>; /* 默认值是 0 */
    }

    flex-grow

    flex-grow 定义了 flex 项在有可用剩余空间时拉伸比例。它接受的值作为比例,无单位。它规定了 flex 项应该占 flex 容器中可用空间的比例。

    如果所有 flex 项的 flex-grow 都设置为 1 ,则父容器中的剩余空间将平均分配给所有子项。 如果其中一个子项的值为 2 ,则该子项占用的剩余空间是其他子项的两倍(或者至少会尽力获得)。

    1
    2
    3
    .item {
    flex-grow: <number>; /* default 0 */
    }

    ​ 比如我们得 flex 容器中有 6 个 flex 项,每个 flex 项的 flex-grow 初始值都是 1。如果我们将每个 flex 项的 flex-grow 相加起来,总和为 6。因此 flex 容器的总宽度被平均分成了 6 份。每个 flex 项增长到填充容器可用空间的1/6。

    当我们将第 3 个 flex 项的 flex-grow 设置为 2 时,flex 容器现在被分成了 7 等份,因为所有 flex-grow 属性是:1 + 1 + 2 + 1 + 1 + 1。第 3 个 flex 项占了整个容器空间的 2/7,其他的占了 1/7。

    flex-shrink

    flex-shrink 定义了 flex 项的收缩的能力。(注:与 flex-grow 拉伸正好相反,flex-shrink 决定 flex 项允许收缩多少比例。)

    1
    2
    3
    .item {
    flex-shrink: <number>; /* default 1 */
    }

    flex-basis

    flex-basis 定义了在分配剩余空间之前 flex 项默认的大小。可以设置为某个长度值(e.g. 20%, 5rem,等)或者关键字。关键字 auto 意味着 flex 项会按照其本来的大小显示(暂时由 main-size 关键字完成,直到弃用)。关键字 content 意味着根据内容来确定大小——这个关键字到目前没有被很好地支持,所以测试起来比较困难,与content的类似的关键字还有max-content, min-content, fit-content

    如果设置为 0 , 则 flex 项内容周围的空隙不会根据 flex-grow 按比例分配,如果设置为 auto,则 flex 项周围额外的空袭会根据 flex-grow 按照比例分配。

    1
    2
    3
    .item {
    flex-basis: <length> | auto; /* default auto */
    }

    flex

    flexflex-growflex-shrinkflex-basis 三个属性的缩写。其中第二个和第三个参数(flex-shrinkflex-basis)是可选的。默认值为0 1 auto

    1
    2
    3
    .item {
    flex: none | [ < 'flex-grow'> < 'flex-shrink'>? || < 'flex-basis'> ]
    }

    align-self

    align-self 属性允许某个单独的 flex 项覆盖默认的对齐方式(或由 align-items 指定的对齐方式)。

    具体的属性值得含义可以参考 align-items的解释。

    1
    2
    3
    .item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }

    注:float,clearvertical-align 对 flex 项没有任何作用。

  • grid布局方案

    Grid 兼容性 2017年3月左右,大部分浏览器都会开始默认支持Grid布局

    网格容器属性:

    display: grid | inline-grid | subgrid

    • grid:定义一个块级的网格容器
    • inline-grid:定义一个内联的网格容器
    • subgrid:定义一个继承其父级网格容器的行和列的大小的网格容器,它是其父级网格容器的一个子。

    grid-template-columns / grid-template-rows

    使用空格分隔的值列表,用来定义网格的列和行。这些值表示 网格轨道(Grid Track) 大小,它们之间的空格表示网格线。

    值:
    <track-size>: 可以是长度值,百分比,或者等份网格容器中可用空间(使用 fr 单位)
    <line-name>:你可以选择的任意名称

    1
    2
    3
    4
    .container {
    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows: 25% 100px auto;
    }

    grid-template-areas

    通过引用 grid-area 属性指定的 网格区域(Grid Area) 名称来定义网格模板。重复网格区域的名称导致内容跨越这些单元格。一个点号(.)代表一个空单元格。这个语法本身可视作网格的可视化结构。

    值:

    • <grid-area-name>:由网格项的 grid-area 指定的网格区域名称
    • .(点号) :代表一个空的网格单元
    • none:不定义网格区域
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    .item-a {
    grid-area: header;
    }
    .item-b {
    grid-area: main;
    }
    .item-c {
    grid-area: sidebar;
    }
    .item-d {
    grid-area: footer;
    }

    .container {
    grid-template-columns: 50px 50px 50px 50px;
    grid-template-rows: auto;
    grid-template-areas:
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
    }

    创建一个 4 列宽 3 行高的网格。整个顶行将由 header 区域组成。中间一排将由两个 main 区域,一个是空单元格,一个 sidebar 区域组成。最后一行全是 footer 区域组成。

    grid-template

    用于定义 grid-template-rowsgrid-template-columnsgrid-template-areas 简写属性。

    值:

    • none:将所有三个属性设置为其初始值
    • <grid-template-rows> / <grid-template-columns>:将 grid-template-columnsgrid-template-rows 设置为相应地特定的值,并且设置grid-template-areasnone
    1
    2
    3
    .container {
    grid-template: none | <grid-template-rows> / <grid-template-columns>;
    }

    grid-column-gap / grid-row-gap

    指定网格线(grid lines)的大小。你可以把它想象为设置列/行之间间距的宽度。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .container {
    grid-column-gap: <line-size>;
    grid-row-gap: <line-size>;
    }
    .container {
    grid-template-columns: 100px 50px 100px;
    grid-template-rows: 80px auto 80px;
    grid-column-gap: 10px;
    grid-row-gap: 15px;
    }

    justify-items

    沿着 inline(行)轴线对齐网格项(grid items)(相反的属性是 align-items 沿着 block(列)轴线对齐)。此值适用于容器内的所有网格项。

    值:

    • start:将网格项对齐到其单元格的左侧起始边缘(左侧对齐)
    • end:将网格项对齐到其单元格的右侧结束边缘(右侧对齐)
    • center:将网格项对齐到其单元格的水平中间位置(水平居中对齐)
    • stretch:填满单元格的宽度(默认值)
    1
    2
    3
    .container {
    justify-items: start | end | center | stretch;
    }

    align-items

    沿着 block(列)轴线对齐网格项(grid items)(相反的属性是 justify-items 沿着 inline(行)轴线对齐)。此值适用于容器内的所有网格项。

    值:

    • start:将网格项对齐到其单元格的顶部起始边缘(顶部对齐)
    • end:将网格项对齐到其单元格的底部结束边缘(底部对齐)
    • center:将网格项对齐到其单元格的垂直中间位置(垂直居中对齐)
    • stretch:填满单元格的高度(默认值)
    1
    2
    3
    .container {
    align-items: start | end | center | stretch;
    }

    justify-content

    有时,你的网格合计大小可能小于其 网格容器(grid container) 大小。 如果你的所有 网格项(grid items) 都使用像 px 这样的非灵活单位设置大小,就可能出现这种情况。在这种情况下,您可以设置网格容器内的网格的对齐方式。 此属性沿着 inline(行)轴线对齐网格(相反的属性是 align-content ,沿着 block(列)轴线对齐网格)。

    值:

    • start:将网格对齐到 网格容器(grid container) 的左侧起始边缘(左侧对齐)
    • end:将网格对齐到 网格容器 的右侧结束边缘(右侧对齐)
    • center:将网格对齐到 网格容器 的水平中间位置(水平居中对齐)
    • stretch:调整 网格项(grid items) 的宽度,允许该网格填充满整个 网格容器 的宽度
    • space-around:在每个网格项之间放置一个均匀的空间,左右两端放置一半的空间
    • space-between:在每个网格项之间放置一个均匀的空间,左右两端没有空间
    • space-evenly:在每个网格项目之间放置一个均匀的空间,左右两端放置一个均匀的空间
    1
    2
    3
    .container {
    justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
    }

    align-content

    有时,你的网格合计大小可能小于其 网格容器(grid container) 大小。 如果你的所有 网格项(grid items) 都使用像 px 这样的非灵活单位设置大小,就可能出现这种情况。在这种情况下,您可以设置网格容器内的网格的对齐方式。 此属性沿着 block(列)轴线对齐网格(相反的属性是 justify-content ,沿着 inline(行)轴线对齐网格)。

    值:

    • start:将网格对齐到 网格容器(grid container) 的顶部起始边缘(顶部对齐)
    • end:将网格对齐到 网格容器 的底部结束边缘(底部对齐)
    • center:将网格对齐到 网格容器 的垂直中间位置(垂直居中对齐)
    • stretch:调整 网格项(grid items) 的高度,允许该网格填充满整个 网格容器 的高度
    • space-around:在每个网格项之间放置一个均匀的空间,上下两端放置一半的空间
    • space-between:在每个网格项之间放置一个均匀的空间,上下两端没有空间
    • space-evenly:在每个网格项目之间放置一个均匀的空间,上下两端放置一个均匀的空间
    1
    2
    3
    .container {
    align-content: start | end | center | stretch | space-around | space-between | space-evenly;
    }

    grid-auto-columns / grid-auto-rows

    指定任何自动生成的网格轨道(grid tracks)(又名隐式网格轨道)的大小。当网格中的网格项多于单元格时,或者当网格项位于显式网格之外时,就会创建隐式轨道

    1
    2
    3
    4
    5
    6
    7
    8
    .container {
    grid-auto-columns: <track-size> ...;
    grid-auto-rows: <track-size> ...;
    }
    .container {
    grid-template-columns: 60px 60px;
    grid-template-rows: 90px 90px
    }

    grid-auto-flow

    如果你有一些没有明确放置在网格上的网格项(grid items),自动放置算法 会自动放置这些网格项。该属性控制自动布局算法如何工作。

    值:

    • row:告诉自动布局算法依次填充每行,根据需要添加新行 (默认)
    • column:告诉自动布局算法依次填入每列,根据需要添加新列
    • dense:告诉自动布局算法在稍后出现较小的网格项时,尝试填充网格中较早的空缺

    子元素 网格项(Grid Items) 属性

    grid-column-start / grid-column-end / grid-row-start / grid-row-end

    通过引用特定网格线(grid lines) 来确定 网格项(grid item) 在网格内的位置。 grid-column-start / grid-row-start 是网格项开始的网格线,grid-column-end / grid-row-end 是网格项结束的网格线。

    值:

    • <line> :可以是一个数字引用一个编号的网格线,或者一个名字来引用一个命名的网格线
    • span <number> :该网格项将跨越所提供的网格轨道数量
    • span <name> :该网格项将跨越到它与提供的名称位置
    • auto:表示自动放置,自动跨度,默认会扩展一个网格轨道的宽度或者高度
    1
    2
    3
    4
    5
    6
    .item {
    grid-column-start: <number> | <name> | span <number> | span <name> | auto
    grid-column-end: <number> | <name> | span <number> | span <name> | auto
    grid-row-start: <number> | <name> | span <number> | span <name> | auto
    grid-row-end: <number> | <name> | span <number> | span <name> | auto
    }

    grid-column / grid-row

    分别为 grid-column-start + grid-column-endgrid-row-start + grid-row-end 的简写形式。

    值:

    • <start-line> / <end-line>:每个网格项都接受所有相同的值,作为普通书写的版本,包括跨度
    1
    2
    3
    4
    .item {
    grid-column: <start-line> / <end-line> | <start-line> / span <value>;
    grid-row: <start-line> / <end-line> | <start-line> / span <value>;
    }

    grid-area

    为网格项提供一个名称,以便可以 被使用网格容器 grid-template-areas 属性创建的模板进行引用。 另外,这个属性可以用作grid-row-start + grid-column-start + grid-row-end + grid-column-end 的简写。

    值:

    • <name>:你所选的名称
    • <row-start> / <column-start> / <row-end> / <column-end>:数字或分隔线名称
    1
    2
    3
    4
    5
    6
    .item {
    grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
    }
    .item-d {
    grid-area: header
    }

    justify-self

    沿着 inline(行)轴线对齐网格项( 相反的属性是 align-self ,沿着 block(列)轴线对齐)。此值适用于单个网格项内的内容。

    值:

    • start:将网格项对齐到其单元格的左侧起始边缘(左侧对齐)
    • end:将网格项对齐到其单元格的右侧结束边缘(右侧对齐)
    • center:将网格项对齐到其单元格的水平中间位置(水平居中对齐)
    • stretch:填满单元格的宽度(默认值)
    1
    2
    3
    4
    5
    6
    .item {
    justify-self: start | end | center | stretch;
    }
    .item-a {
    justify-self: start;
    }

    align-self

    沿着 block(列)轴线对齐网格项(grid items)( 相反的属性是 justify-self ,沿着 inline(行)轴线对齐)。此值适用于单个网格项内的内容。

    值:

    • start:将网格项对齐到其单元格的顶部起始边缘(顶部对齐)
    • end:将网格项对齐到其单元格的底部结束边缘(底部对齐)
    • center:将网格项对齐到其单元格的垂直中间位置(垂直居中对齐)
    • stretch:填满单元格的高度(默认值)
    1
    2
    3
    .item{
    align-self: start | end | center | stretch;
    }
  • 几个常见布局问题

    1. 水平居中

      • margin:0 auto;

        最常见的水平居中解决方案,但有其局限性:块级元素,已知宽度,父级元素有宽度

      • text-align + inline-block

        在父级元素上设置text-align:center;将需要居中的元素设置为inline-block(或inline)

      • position绝对定位

        1
        2
        3
        position:absolute;(同时设置父级元素relative) 
        left:50%;(包括了元素本身的宽度)
        transform:translateX(-50%);
      • flex弹性布局之justify-content

        在父级添加

        1
        2
        3
        4
        #parent{
        display:flex;
        justify-content:center;
        }
    2. 垂重居中

      • height +line-height

        对于一个需要居中的 行内(块)元素 ,设置父元素的高度与行高相等,即可实现垂直居中

      • table-cell + vertical-align

        1
        2
        3
        4
        .parent{
        display:table-cell;
        vertical-align:middle
        }
      • absolute+transform

      • flex+align-items

        父类添加

        1
        2
        3
        4
        .parent{
        display:flex;
        align-items:center;
        }
    3. 左边固定右边自适应

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      .left {
      float: left;
      width: 200px;
      height: 400px;
      background-color: #fff277;
      }
      .right {
      background-color: #b5eeff;
      margin-left: 210px;
      }
      <div class="left"></div>
      <div class="right"></div>
    4. 圣杯布局

      在父级添加左右padding,将三栏全部挤到中间,然后在两侧边栏添加相对定位,配合left和right属性,将它们挪向两边,为中间内容腾出位置

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
          .container {
      overflow: hidden;
      padding: 0 200px;
      }

      .middle {
      width: 100%;
      height: 400px;
      float: left;
      background-color: yellow;
      }

      .left {
      width: 200px;
      height: 400px;
      float: left;
      background-color: blue;
      margin-left: -100%; /*挤到上一行*/
      position: relative;
      left: -200px;
      }

      .right {
      width: 200px;
      height: 400px;
      float: left;
      background-color: darkseagreen;
      margin-left: -200px; /*挤到上一行*/
      position: relative;
      right: -200px;
      }

      <div class="container">
      <div class="middle"></div>
      <div class="left"></div>
      <div class="right"></div>
      </div>
  1. 双飞翼布局

    在中间栏的div中嵌套一个div,内容写在嵌套的div里,对嵌套的div设置margin-left和margin-right。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    .container {
    overflow: hidden;
    }

    .middle {
    width: 100%;
    height: 400px;
    float: left;
    background-color: yellow;
    }

    .left {
    width: 200px;
    height: 400px;
    float: left;
    background-color: blue;
    margin-left: -100%;
    }

    .right {
    width: 200px;
    height: 400px;
    float: left;
    background-color: darkseagreen;
    margin-left: -200px;
    }

    /*解决遮挡*/
    #inside {
    margin: 0 210px;
    height: 400px;
    background-color: red;
    }

    <div class="container">
    <div class="middle">
    <div id="inside">middle</div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
    </div>