一了百了，彻底搞懂CSS布局

一了百了，彻底搞懂CSS布局

成为全栈成为了很多工程师的目标。作为后端开发工程师，在设计和开发应用页面时，需要学习的东西很多，尤其是CSS。在项目开发过程中，对于CSS布局这块感到尤其困难，怎么能实现瀑布流布局、图文环绕等。我们总是不断尝试不同的display、position、margin等值试图侥幸满足我们的需求。
长通不如短痛，今天我们花点时间，彻底理解CSS布局中几个关键的概念。

一、元素框属性

如下图所示，在CSS中，文档的每个元素被构造成文档布局内的一个矩形框。height和width标识的内容框（context），表示的是内容或包含的其他元素框防止的区域；padding表示的是内边距，border标识框边，margin标识与其他元素框距离关系。
打个比方，元素框就像一个放在桌子上的纸盒，放在距离桌子右边3厘米（margin:3cm），纸盒子存放一块蛋糕（蛋糕放在盒子上方10cm，padding-top:10cm）盒子包装纸厚度1cm（border:1cm)，蛋糕12*12cm（height:12cm, width:12cm)。

二、元素常见类型

CSS实践中，我们首先探讨三个常见的基础元素类型，包括块级元素、行内块元素和行内元素。

块级元素

属性display:block的元素都属于块级元素，在布局中会独占一行。

行内元素

属性display:inline的元素都属于行内元素，不会自己独占一行，它随着文档的文字流动（例如：它将会和周围的文字和其他行内元素出现在一行）。行内元素的高度设置是无效的，它的高度是由行内内容元素决定的。

行内块元素

属性display:inline-block的元素都是行内块元素。像是上述两种的集合：它不会重新另起一行但会像行内元素一样随着周围文字而流动，而且他能够设置宽高，并且像块框一样保持了其块特性的完整性，它不会在段落行中断开。

还是以桌子上的盒子为例，我们说说三者的区别。
块元素就像一个铁盒A，对齐桌子两边摆放，就相当于占据桌子一行，这一行的高度是铁盒子自身属性决定，并且要求这一行不能摆放其他元素。
行内元素就像一个布包裹B，它所在的一行可以存放其他元素，它的高度只能由行原有高度或包裹内物品高度决定（原有高度或物品高度取大）决定。
行内块元素还是像一个铁盒C，与铁盒A的区别在于，铁盒C不要求独占一行。

三、页面布局（display）

属性display指定了元素的显示类型，它包含两类基础特征，用于指定元素怎样生成盒模型：外部显示类型定义了元素怎样参与流式布局的处理，内部显示类型定义了元素内子元素的布局方式。

dispaly的属性值主要分为几类：

1）display-outside，用于指定了元素的外部显示类型，实际上就是元素在流式布局中的角色，值有（inline,block,run-in)；
2)display-inside,指定了元素内部显示类型，主要是描述元素内部内容布局方式，值有（flow,flow-root,table,flex,grid,ruby)；
3）display-listitem 会为元素内容生成一个块型框，随后再生成一个列表型的行内块。其效果就和ul中出现项目列表符号一样。通俗地说就是会在内容前面自动加上黑点，而display:block则不会出现黑点；值有（list-item,list-item block,list-item inline,list-item flow,list-item flow-root,list-item block flow,list-item block flow-root,flow list-item block）；
4）display-internal，像table 和 ruby 这样的布局模型有着复杂的内部结构，因此它们的和后面的元素可能具有多个角色。这一类关键字就是用来定义这些“内部”显示类型，并且只有在这些特定的布局模型中才有意义,值有（table-row-group,table-header-group,table-footer-group,table-row,table-cell,table-column-group,table-column,table-caption,ruby-base,ruby-text,ruby-base-container,ruby-text-container) ;
5) display-box, 定义元素是否完全生成显示盒，值有（contents,none）；contents:元素本身不产生任何边界框，而元素的子元素与伪元素仍然生成边界框，元素文字照常显示。为了同时照顾边界框与布局，处理这个元素时，要想象这个元素不在元素树型结构里，而只有内容留下。著作权归作者所有。
6）其他 , 比如display-legacy,display-xul等。这些基本上用不到。

四、弹性布局（flex）

在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。

Flex布局，所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

来个示例，将容器设置为 display: flex ，这意味着三个子项成为弹性项。justify-content 的值已设置为 space-between ，以便在主轴上均匀地分隔项目。在每个项目之间放置等量的空间，左侧和右侧项目与Flex容器的边缘齐平。你还能看到项目在十字轴上拉伸，因为 align-items 的默认值为 stretch。这些项目伸展到Flex容器的高度，使它们看起来都像最高的项目一样高。

基础属性

• flex-direction，容器内项目的排列方向(默认横向排列)
• flex-wrap，容器内项目换行方式
• flex-flow，以上两个属性的简写方式
• justify-content，项目在主轴上的对齐方式
• align-items，项目在交叉轴上如何对齐
• align-content，定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
• orde，项目的排列顺序。数值越小，排列越靠前，默认为0。
• flex-grow，项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• flex-shrink，项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
• flex-basis ，在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
• flex，是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
• align-self，允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

五、网格布局（grid）

网格布局让我们能够按行或列来对齐元素。 然而在布局上，网格比表格更可能做到或更简单。
我们来看一示例，

* {box-sizing: border-box;}
.wrapper {
  max-width: 940px;
  margin: 0 auto;
}
.wrapper > div {
  border: 2px solid rgb(233,171,88);
  border-radius: 5px;
  background-color: rgba(233,171,88,.5);
  padding: 1em;
  color: #d9480f;
}.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two { 
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-row: 2 / 5;
  grid-column: 1;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>

生成的页面布局如下图所示:

参考资料

• 腾讯CSS: https://cloud.tencent.com/developer/doc/1052