Question

layout 布局

[TOC]

CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。 在网页中，元素有三种布局模型：

1. 流动模型（Flow）
2. 浮动模型 (Float)
3. 定位（Layer） CSS3 新引入的布局方式
4. 可伸缩盒式布局
5. 多列布局

流动模型

流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

流动布局模型具有2个比较典型的特征：

第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。

第二点 内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

浮动模型

块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。

任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>

定位

什么是层布局模型？层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。

如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。

层模型有三种形式：

1、绝对定位(position: absolute)

2、相对定位(position: relative)

3、固定定位(position: fixed)

定位--绝对定位

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>

定位--相对定位

如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

如下代码实现相对于以前位置向下移动50px，向右移动100px;

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

<div id="div1"></div>

什么叫做“偏移前的位置保留不动”呢？

大家可以做一个实验，在右侧代码编辑器的19行div标签的后面加入一个span标签，在标并在span标签中写入一些文字。如下代码：

偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置效果图：

从效果图中可以明显的看出，虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。

定位--固定定位

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
....

伸缩布局盒模型

使布局多列更加轻松。CSS3引入了一种新的布局模式————Flexbox布局。用来提供一个更加有效的方式指定、调整和分布一个容器里的项目布局，即使它们的大小事位置或者动态的。

布局是有一个盒与其兄弟、祖先和的关系决定尺寸与位置的原发。之前的布局方式有

• 块布局
• 行内布局
• 表格布局
• 定位布局 CSS3引入的Flexbox布局，主要是让容器有能力让其子元素能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间。 重要的是，Flexbox布局方向不可预知，不像常规的布局（块就是从上到下，内联就是从左到右），对于大型护着复杂的应用程序（特别是设计去向以及改变、缩放）就缺乏灵活性。

flexbox 功能特点

• 屏幕和浏览器窗口大小发生改变能够灵活调整布局
• 指定伸缩元素按主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩容器大小。
• 指定额外空间如何分配到可伸缩元素的周围。
• 控制元素在页面上的布局方向
• 按照不同于DOM所指定的顺序对元素从新排序。也即是可以在浏览器渲染中不按照文档流先后顺序重排伸缩元素顺序。

在网上查找中资料时，如何判断版本

flex-box 由于出现的较晚，在浏览器中经历了一个快速发展过程。

最老版本 -> 混合版本 -> 标准版本

如果在网上搜索资料，合法性许多老版本的资料。如何辨别这些内容，使用W#C最新版本的标注很有用。

• 看到 display: box 或者 box-{*} 说明是2009年版本的 Flexbox。
• 看到 display: flexbox 或者 flex() 函数，说明是2011年版本，也称为混合版本。
• 看到 display: flex 或者使用 flex-{*} 属性，说经是当前规范，也就是W3C 标注规范版本。

规范已经确定下来了，只需要使用规范版本即可。

伸缩容器的设置

display: flex|inline-flex 伸缩容器

想要市容伸缩布局，只需要设置外部用于包裹内容的标签的display属性即可。

• flex: 将容器设置为块伸缩容器
• inline-flex: 将容器设置为内联伸缩容器

注意: css的 columns 在伸缩容器上没有效果，floa、clear、vertical-align在伸缩项目上没有效果。

flex-direction 伸缩流方向

用于创建伸缩主轴，从而控制了伸缩项目在容器中摆放的方向。

• row: （默认值）在 ltr 排版方式下，从左向右排列；在 rtl 排版方式下，从右向左排列。
• row-reverse: 与row 排列方式相反，在 ltr 排版方式下，从右想左排列；在 rtl 排版方式下，从左向右排列。
• column: 从上到下排列
• column-reverse: 从下到上排列

伸缩换行 flex-wrap 伸缩换行

flex-wrap 属性用于定义伸缩容器是单行显示还是多行显示，侧轴方向决定了新行的堆叠方向。

• no-wrap: 单行显示
• wrap: 多行显示
• wrap-reverse: 多行显示，显示方向与排版方向相反。让伸缩项目在侧轴方向的start和end翻转。

flex-flow 伸缩流方向与换行的缩写

flex-flow:||

justify-content 主轴对齐方式

定义伸缩项目沿着主轴线的对齐方式。当一行的所有项目都不能伸缩，或伸缩项目达到最大数目时，这一属性才会对伸缩容器额外空间进行分配。

• flex-start: 向一行的起始位置靠齐
• flex-end: 向一行的结束位置靠齐
• center: 向一行的中间位置靠齐
• space-between: 伸缩项目会平均地分配在项目之间的位置。第一个项目在一行的开始位置，最后一个项目在一行的结束位置。
• space-around: 伸缩项目会平均地分配在每隔一个项目两侧的位置。两端会保留一半的空间。

align-items 侧轴对齐方式

调整伸缩项目在侧轴的对齐方式

• flex-start: 伸缩项目在行内靠近侧轴的起始方向对齐
• flex-end: 伸缩项目在行内靠近侧轴的结束方向对齐
• center: 伸缩项目在行内靠近中间对齐
• base-line: 伸缩项目靠近伸缩项目设置的基准线对齐
• stetch: （默认值) 伸缩项目将拉伸填充整个侧轴的行。此值会使用项目的外边距。 盒的项目在遵照尺寸属性限制（min/max-width/height）的情况下尽可能接近所在行的尺寸，

align-content 行堆叠方式

当伸缩容器的侧轴方向上还有额外空间时，align-content 用于调整伸缩行的对齐方式。它会更改 flex-wrap 的行为。

• flex-start: 各行向伸缩容器的起始位置堆叠
• flex-end: 各行向伸缩容器的结束位置堆叠
• center: 各行向侧轴的中间位置堆叠
• space-between: 侧轴方向上的剩余空间均匀分配在行之间的位置
• space-around: 侧轴方向上的剩余空间均匀分配在行两则的位置。
• stretch: 默认值，各行会伸展以占用额外空间。

伸缩项目的设置

align-self

ailgn-self 属性和 align-items 属性的作用和值都一样，用于调整伸缩项目在侧轴的对齐方式。ailgn-self 应用于单个项目，以覆盖整体的对齐方式。如果没有声明，则其值继承自 align-items 属性。

如果伸缩项目的任一项侧轴方向上的外边距设置为 auto，则 align-self 没有效果。

flex 伸缩性

让伸缩项目的宽度或高度的伸缩比例、伸缩基准值，以自动填充伸缩容器额外的空间。伸缩容器会按照伸缩项目设置的扩展比率分配额外空间，也会按照伸缩比率缩小伸缩项目以避免伸缩项目溢出容器。 flex: none | [? ||]

当一个项目是伸缩项目时，flex将代替主轴长度属性决定项目的主轴长度。若元素不是伸缩项目，则 flex 没有效果。

• flex-grow: 数字，用于设置伸缩项目在行中所占的比例，如果每个项目都这只为1，每个伸缩项目将占有大小相等的额外空间。如果一个伸缩项目的 flex-grow 设置为2，那它占有的额外空间将是其它项目的2倍。
• flex-shrink: 数字，定义伸缩项目的收缩能力。
• flex-basis: 用于设置伸缩基准值（和width值格式一致），即参与计算的主轴长度。默认值为 auto。如果 flex 省略此部件，则 flex-basis 被设置为0，此时伸缩项目最小为0。如果设置为 auto，则此项目的主轴长度是with值。

flex 设置为none时，相当于 flex-grow:0; flex-shink:0; flex-basis: auto。

• flex: 0 auto和flex: initial 与 flex: 0, 1, auto 作用相同。这也是 flex 的初始值。根据 width/height 属性决定项目尺寸。
• flex: auto 与 flex: 1 1 auto 效果相同。

order 显示顺序

默认状态下，元素按照文档流的顺序显示。在伸缩布局中，项目可以按照 order 属性分配到的值，排序显示。 伸缩项目会按照序号从小到大的顺序排列，相同工号的项目将按照文档流的排序排列。

多列布局

在之前，想要实现报纸或者杂志的多列显示效果并不是那么容易，通常将一篇文章分成多个div而分别浮动。而这种浮动效果在拉伸效果下的显示效果并不容易控制。CSS3对多列布局进行了直接支持，能够通过简单的属性实现之前的的效果。

CSS3 能够确定何时结束一列和开始下一列而无需任何额外标记。

columns 列宽和列数

columns 是一个复合属性，它包括 columns:||

• column-width: 定义列宽。auto |，其中auto为默认值，当设置为auto时，宽度将有其他属性决定，如column-count。
• column-coount: auto |定义允许的最大列数。列数的多少将首先依照column-width计算，当计算出的列数小于等于column-count设置的列数时，按照column-width的计算结果来显示列数。当大于column-count时，将会只显示 column-count 列。

column-gap 列间距

column-gap: mormal |

• normal: 默认值，一般情况下，浏览器的默认值为1em。
• length: 接受浮点数和长度标记的各种单位。

column-rule 边框设置

column-rule 用于设置列分割线宽度、样式、颜色。column-rule 并不占用空间位置，即不会改变列的位置。column-rule 也是一个复合属性，可以分别设置。 column-rule:||

其值和 border 属性可设置的值一样。其宽度超过了间距的宽度时，将不会显示。

column-span 跨列属性

报纸和杂志的标题通常会显示在最顶部，而不会显示在某一列中。CSS3也为这种跨列显示效果提供了支持。

column-span: none | all

none: 不跨列，默认值。 all: 所有列，并定位显示在列的Z轴上。

column-fill 多列高度

在列布局中，有事由于内容不足，会使靠后的列无内容显示。但实际使用常常需要使多列内容量基本相同。column-fill 就是用来控制多列的高度是否统一。 column-fill: auto | balance

• auto: 默认值，各列高度根据列的内容自动变化。
• balance: 列的内容进行平均，以使高度尽量平衡。

表格布局

https://www.cnblogs.com/shixizhi/p/8319298.html