[TOC]
display值
display 属性可以设置元素的内部和外部显示类型 display types。
元素的外部显示类型 outer display types
将决定该元素在流式布局中的表现（块级或内联元素）
-
block
生成一个块级元素盒子，同时在该元素之前和之后打断（换行），即将该元素变成块级元素。
-
inline
生成一个行内元素盒子，该元素之前和之后不会打断（换行）。如果空间充足，该元素后的元素将会在同一行显示。简单来说就是，这个值会将该元素变成行内元素。
-
run-in
生成一个run-in盒子。如果其后的兄弟元素是块级盒子，那么这个run-in盒子就会以兄弟元素的第一个行内元素盒子的形式存在；如果其后的兄弟元素是行内元素，那么这个run-in盒子会变成块级元素。
run-in元素的存在形式取决于相邻的元素，如果它的内部存在block box，那么它会变成块级元素盒子。
元素的内部显示类型 inner display types
可以控制其子元素的布局
-
flow
-
flow-root
-
table
-
flex
-
grid
-
ruby
正常布局流
指在不对页面进行任何布局控制时， HTML元素完全按照源码中出现的先后次序显示 。
下列布局会覆盖默认的布局行为：
-
display 属性
标准的value,如block, inline 或inline-block 元素在正常布局流中的表现形式.
接着是全新的布局方式，通过设置display的值, 比如 CSS Grid 和 Flexbox.
-
浮动
应用 float 值，诸如 left 能够让块级元素互相并排成一行，而不是一个堆叠在另一个上面。
-
position 属性
允许你精准设置盒子中的盒子的位置，正常布局流中，默认为 static ，使用其它值会引起元素不同的布局方式，例如将元素固定到浏览器视口的左上角。
-
表格布局
表格的布局方式可以用在非表格内容上，可以使用display: table和相关属性在非表元素上使用。
-
多列布局
这个 Multi-column layout 属性 可以让块按列布局，比如报纸的内容就是一列一列排布的。
弹性盒子
Flexbox被专门设计出来用于创建横向或是纵向的一维页面布局。
使用flexbox，只需在想要进行flex布局的父元素上应用display: flex ，所有直接子元素都将会按照flex进行布局。
子元素上添加flex 属性，并赋值为1，这会使得所有的子元素都伸展并填充容器，而不是在尾部留下空白，如果有更多空间，那么子元素们就会变得更宽，反之，他们就会变得更窄。
Grid布局
Grid布局用于同时在两个维度上把元素按行和列排列整齐。
通过指定display的值来转到grid布局：display: grid。
使用 grid-template-columns 和grid-template-rows 两个属性定义了一些列和行的轨道。声明三个1fr的列，两个100px的行。
利用 grid-column 和 grid-row 两个属性来指定每一个子元素应该从哪一行/列开始，并在哪一行/列结束。这就能够让子元素在多个行/列上展开。
浮动
float会改变该元素本身和在正常布局流中跟随它的其他元素的行为。
这一元素会浮动到左侧或右侧，并且从正常布局流中移除，这时候其他的周围内容就会在这个被设置浮动的元素周围环绕。
属性值
-
left 将元素浮动到左侧。
-
right 将元素浮动到右侧。
-
none 默认值, 不浮动。
-
inherit 继承父元素的浮动属性。
定位
positioning能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置。
定位并不是一种用来做主要页面布局的方式，它更像是让你去管理和微调页面中的一个特殊项的位置。
类型值
-
静态定位(Static positioning)
每个元素默认的属性，表示将元素放在文档布局流的默认位置。
-
相对定位(Relative positioning)
相对于元素在正常的文档流中的位置移动它，包括将两个元素叠放在页面上，对于微调和精准设计非常有用。
-
绝对定位(Absolute positioning)
将元素完全从页面的正常布局流中移出，类似将它单独放在一个图层中。
比如通过标签显示和隐藏的内容面板，或者通过按钮控制滑动到屏幕中的信息面板。
-
固定定位(Fixed positioning)
与绝对定位非常类似，但是它是将一个元素相对浏览器视口固定，而不是相对另外一个元素。
比如在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单。
-
粘性定位(Sticky positioning)
一种新的定位方式，它会让元素先保持和position: static一样的定位，当它的相对视口位置达到某一个预设值时，他就会像position: fixed一样定位。
表格布局
HTML表格对于显示表格数据是很好的，在浏览器中支持基本的CSS之前，常常使用表格来完成整个网页布局，将它们的页眉、页脚、不同的列等等放在不同的表行和列中。
这在当时是有效的，但它有很多缺点，表布局是不灵活的，繁重的标记，难以调试和语义上的错误。
表格布局是一种传统方法，它通常会被用于兼容一些不支持Flexbox和Grid的浏览器。
多列布局
一种把内容按列排序的方式，就像文本在报纸上排列那样。
由于在web内容里让你的用户在一个列上通过上下滚动来阅读两篇相关的文本是一种非常低效的方式，那么把内容排列成多列可能是一种有用的技术。
要把一个块转变成多列容器，可以使用 column-count属性来告诉浏览器我们需要多少列，也可以使用column-width来告诉浏览器以至少某个宽度的尽可能多的列来填充容器。
