css复习

position：fixed

绝对定位 不会随着屏幕滚动而移动

float

需要用 width 属性来指定浮动元素占据的水平空间

z-index 

指定元素的堆叠次序。

取值是整数，数值大的元素会叠放到数值小的元素上面。

块级元素水平居中

margin：auto

媒体查询

@media （max/min-height）{

p{ font-size：10px}

}

图片自适应

max-width ： 100% 图片不超出父容器的范围；

height ： auto 保持图片的原始宽高比

视窗单位响应式排版

相对于设备的视窗尺寸（宽度或高度），百分比是相对于父级元素的大小

• vw：如 10vw 的意思是视窗宽度的 10%。
• vh： 如 3vh 的意思是视窗高度的 3%。
• vmin： 如 70vmin 的意思是视窗的高度和宽度中较小一个的 70%。
• vmax： 如 100vmax 的意思是视窗的高度和宽度中较大一个的 100%。

display: flex

可以让元素的项目排列成行或列。

给父元素添加 flex-direction 属性，并把属性值设置为 row 或 column

即可横向排列或纵向排列它的所有子元素

justify-content沿主轴线排放 flex 项目

• flex-start：从 flex 容器的起始位置开始排列项目。 对行来说是把项目移至左边， 对于列是把项目移至顶部。 如未设置 justify-content 的值，那么这就是默认值。
• flex-end：从 flex 容器的终止位置开始排列项目。 对行来说是把项目移至右边， 对于列是把项目移至底部。
• space-between：项目间保留一定间距地沿主轴居中排列。 第一个和最后一个项目被放置在容器边沿。 
• space-around：与space-between相似，但头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。
• space-evenly：头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。

align-items

• flex-start：从 flex 容器的起始位置开始对齐项目。 对行来说，把项目移至容器顶部； 对列来说，是把项目移至容器左边。
• flex-end：从 flex 容器的终止位置开始对齐项目。 对行来说，把项目移至容器底部； 对列来说，把项目移至容器右边。
• center：把项目居中放置。 对行来说，垂直居中（项目距离顶部和底部的距离相等）； 对列来说，水平居中（项目距离左边和右边的距离相等）。
• stretch：拉伸项目，填满 flex 容器。 例如，排成行的项目从容器顶部拉伸到底部。 如未设置align-items的值，那么这就是默认值。
• baseline：沿基线对齐。 基线是文本相关的概念，可以认为它是字母排列的下端基准线。

flex: 1 0 10px; 

// flex-grow: 1;、flex-shrink: 0;  flex-basis: 10px;

align-self

调整单个子元素自己的对齐方式

grid

grid-template-columns: 50px 50px;
//两列，宽度均为 50px

grid-template-columns: auto 50px 10% 2fr 1fr;
//第一列的宽与它的内容宽度相等；第二列宽 50px；
第三列宽是它容器的 10%；
最后两列，将剩余的宽度平均分成三份，第四列占两份，第五列占一份