CSS 布局

网上写的笔记挺全的，随便记录一下，布局重点看flex布局，Grid 网格布局，媒体查询；记一些css函数，选择器。

display 布局属性

每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline

设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类。因此，带有 display: block; 的行内元素不允许在其中包含其他块元素。

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。

position: static;

HTML 元素默认情况下的定位方式为 static（静态）。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

根据页面的正常流进行定位：

position: relative;
相对定位

相对于其正常位置进行定位,视图上位置改变，元素位置不变

position: absolute;
绝对定位（父）

相对于最近的定位祖先元素进行定位

视图上位置改变，元素位置也改变，且不会影响其他元素站位（不为元素预留空间）
该父元素必须设置有position属性，可以将position设置为relative
行内元素

position: fixed;
绝对定位（视窗）

相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置

视图上位置改变，元素位置也改变，且不会影响其他元素站位（不为元素预留空间）

行内元素

position: sticky;

根据用户的滚动位置进行定位。

起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置

属性	描述
display	规定用于 HTML 元素的盒类型。
flex-direction	规定弹性容器内的弹性项目的方向。
justify-content	当弹性项目没有用到主轴上的所有可用空间时，水平对齐这些项目。
align-items	当弹性项目没有用到主轴上的所有可用空间时，垂直对齐这些项。
flex-wrap	规定弹性项目是否应该换行，若一条 flex 线上没有足够的空间容纳它们。
align-content	修改 flex-wrap 属性的行为。与 align-items 相似，但它不对齐弹性项目，而是对齐 flex 线。
flex-flow	flex-direction 和 flex-wrap 的简写属性。
order	规定弹性项目相对于同一容器内其余弹性项目的顺序。
align-self	用于弹性项目。覆盖容器的 align-items 属性。
flex	flex-grow、flex-shrink 以及 flex-basis 属性的简写属性。