目的：汇总CSS布局技巧，如浮动、定位、弹性盒子布局等，以及写出它们的应用场景和实操实践。
一、布局（layout）是什么
是确定内容大小和位置的算法。 依据元素、容器、兄弟节点和内容等信息来计算。
二、相关技术（布局技巧）及其实操实践
（1）常规流（normal flow）：
在 css 中实现页面布局的主要方法是设定display属性的值。此属性允许我们更改默认的显示方式。正常流中的所有内容都有一个display的值，用作元素的默认行为方式。
在display属性中标准的 value，比如block, inline 或者 inline-block 元素在正常布局流中的表现形式 . 接着是全新的布局方式，通过设置display的值，比如CSS Grid和 Flexbox。
block（块级）：列表项显示为一个在另一个之下
inline（行级）：显示在彼此旁边
以下分别是block、inline、inline-block结果
1、block
2、inline
3、inline-block
发现23结果一样，原因是inline和inline-block布局逻辑都是先行再块，而inline-block还包含了一层块状逻辑在。
“当你使用 css 创建一个布局时，你正在离开正常布局流，但是对于页面上的多数元素，正常布局流将完全可以创建你所需要的布局。从一个结构良好的 Html 文档开始是非常重要，因为你可以按照默认的方式来搭建页面，而不是自造车轮”——mdn
（2）flexbox（弹性盒子）：
被专门设计出来用于创建横向或是纵向的一维页面布局。要使用 flexbox，你只需要在想要进行 flex 布局的父元素上应用display: flex ，所有直接子元素都将会按照 flex 进行布局。
例如：在css中
wrapper {
display: flex;
}
<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
</div>
则得到的结果为：
拓展：flexibility：可以设置子项的弹性（flex-grow：伸长 ；flex-shrink：收缩 ；flex-basis：基础长度）
（3）grid布局：
用于同时在两个维度上把元素按行和列排列整齐
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
grid-gap: 10px;
<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<div class="box4">Four</div>
<div class="box5">Five</div>
<div class="box6">Six</div>
</div>
结果为
（4）浮动：
把一个元素“浮动”(float) 起来，会改变该元素本身和在正常布局流（normal flow）中跟随它的其他元素的行为。这一元素会浮动到左侧或右侧，并且从正常布局流 (normal flow) 中移除，这时候其他的周围内容就会在这个被设置浮动 float 的元素周围环绕。
float 属性有四个可能的值：
left— 将元素浮动到左侧。right— 将元素浮动到右侧。none— 默认值，不浮动。inherit— 继承父元素的浮动属性。
<h1>自我介绍</h1>
<div class="box">辣椒油子</div>
<p>
她是一位魁梧女子，身形高大强壮，双臂有力，步履稳健，身躯壮硕的好像一堵墙似的；
身躯凛凛，相貌堂堂，肩膀好似双开门冰箱。一双眼光射寒星，两弯眉浑如刷漆；
如同天上降魔主，真是人间太岁神，好一个能让金丝雀依偎的宽大肩膀！.
</p>
.box {
float: left;
width: 150px;
height: 150px;
margin-right: 30px;
}
结果如下
就是把盒子移到了左边，
（5）定位：
允许你精准设置盒子中的盒子的位置，正常布局流中，默认为 static ，使用其他值会引起元素不同的布局方式，例如将元素固定到浏览器视口的左上角
- 静态定位（Static positioning）是每个元素默认的属性——它表示“将元素放在文档布局流的默认位置——没有什么特殊的地方”。
- 相对定位（Relative positioning）允许我们相对于元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上。这对于微调和精准设计（design pinpointing）非常有用。
- 绝对定位（Absolute positioning）将元素完全从页面的正常布局流（normal layout flow）中移出，类似将它单独放在一个图层中。我们可以将元素相对于页面的
<html>元素边缘固定，或者相对于该元素的最近被定位祖先元素（nearest positioned ancestor element）。绝对定位在创建复杂布局效果时非常有用，例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板。 - 固定定位（Fixed positioning）与绝对定位非常类似，但是它是将一个元素相对浏览器视口固定，而不是相对另外一个元素。这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用。
- 粘性定位（Sticky positioning）是一种新的定位方式，它会让元素先保持和
position: static一样的定位，当它的相对视口位置（offset from the viewport）达到某一个预设值时，它就会像position: fixed一样定位
（6）多列布局：
Multi-column layout 属性可以让块按列布局，比如报纸的内容就是一列一列排布的
三、学习建议
-
充分利用MDN和规范
-
保持好奇心，善用浏览者开发工具
-
持续学习，CSS新特性还在不断出现
正如老师所讲的那样学习css需要的是持之以恒的学习。
相信大家都能够在青训营有所收获！
