CSS知识总结flex-start: 元素与容器的顶部对齐。 flex-end: 元素与容器的底部对齐。 center:

CSS tricks ，MDN查看文档；dribbble作为实战参考

语法

样式语法

选择器 {
	属性: 值;
}

@ 语法

@charset "utf-8";
@import url(2.css);
@media (min-width: 10px;) and (max-width: 100%) {
	.ceew {
		asdad: 1000;
	}
/*⚠️@charset必须在第一行，@语法 必须以分号结尾*/
}

css布局

考虑兼容 IE 9 的使用float布局
不考虑 IE 9的使用flex布局
只兼容最新浏览器的使用 grid 布局 ⚠️使用float，给父元素添加clearfix

.clearfix:after {
  content: '';
	display: block;
	clear: both;
}

CSS3完全向后兼容，不必改变现有的设计，浏览器永远支持CSS2

css3模块其中最重要的包括

选择器
盒模型
背景和边框
文本效果
2D/3D转换
动画
多列布局
用户界面

CSS3边框

创建圆角边框，向矩形添加阴影，使用图片绘制边框并且不需要设计软件 border-radius
box-shadow
border-image

CSS3背景

包含多个新的背景属性，提供了对背景更强大的控制 background-size
background-origin

盒模型

content-box

.content {
    border: 5px solid mediumvioletred;
    padding: 30px;
    margin: 50px;
    width: 200px;
    background-color: #dee4f3;
    box-sizing: content-box;
}

box-sizing: content-box; 设置以内容的width为基准内容的宽度=width

border-box

.box {
    border: 5px solid orange;
    padding: 30px;
    margin: 50px;
    width: 200px;
    background-color: #22ff22;
    box-sizing: border-box;
}

box-sizing: border-box; 设置以border边框为基准 width = 内容+padding+border
⚠️border-box比content-box更好用一点

Flexbox

display: flex; align-items纵向对齐元素，可选以下几个值：

flex-start: 元素与容器的顶部对齐。
flex-end: 元素与容器的底部对齐。
center: 元素纵向居中。
baseline: 元素在容器的基线位置显示。
stretch: 元素被拉伸以填满整个容器。

justify-content横向对齐元素:

space-between ：分散对齐
space-around ：平均等宽横向对齐
flex-start(default)：默认左对齐
flex-end ：右对齐
center ：居中

flex-direction属性定义了元素在容器里摆放的方向:

row: 元素摆放的方向和文字方向一致。
row-reverse: 元素摆放的方向和文字方向相反。
column: 元素从上放到下。
column-reverse: 元素从下放到上。

order属性设置单个元素的order。元素的属性默认值为0，但是我们设置这个属性为正数或负数。改变的单个flex元素的顺序

align-self设置其中单个元素的交叉轴位置

flex-start: 元素与容器的顶部对齐。
flex-end: 元素与容器的底部对齐。
center: 元素纵向居中。
baseline: 元素在容器的基线位置显示。
stretch: 元素被拉伸以填满整个容器。

flex-wrap

nowrap: 所有的元素都在一行。
wrap: 元素自动换成多行。
wrap-reverse: 元素自动换成逆序的多行。

flex-flow 是 flex-direction + flex-wrap两个属性的合体可以同时接受两个属性值。

align-content来决定行与行之间隔多远。这个属性接受这些值：

flex-start: 多行都集中在顶部。
flex-end: 多行都集中在底部。
center: 多行居中。
space-between: 行与行之间保持相等距离。
space-around: 每行的周围保持相等距离。
stretch: 每一行都被拉伸以填满容器。
⚠️有些容易混淆，但align-content决定行之间的间隔，而align-items决定元素整体在容器的什么位置。只有一行的时候align-content没有任何效果。

Grid

grid-column: 3 / 5; //还可以写成 span 2 会从第三列的网格开始，这也是描述网格中从左起第三列边界的另一种方法。

grid-row: 1 / 5 纵向

grid-area: 1 / 1 / 3 / 5; 接受4个由’/‘分开的值：grid-row-start, grid-column-start, grid-row-end, 最后是grid-column-end。

设置为5列，每列占总宽度的20%；5行，每行占全部高度的20%。这是通过设置**grid-template-columns: 20% 20% 20% 20% 20%;和grid-template-rows: 20% 20% 20% 20% 20%;**来实现的。每一条规则都有5个值，代表创建了5个列，每一列设置为总宽度的20%。但是你也可以任意设置网格项的宽度。

grid-template是grid-template-rows和grid-template-columns的缩写形式。比如说，**grid-template: 50% 50% / 200px;**将创建一个具有两行的网格，每一行占据50%，以及一个200像素宽的列。

Position

static：默认值，待在文档流,元素不会受到top,left,right,bottom的影响
relative：相对定位，不脱离文档流，原本所占的空间不会改变,通常被用做绝对定位元素的容器块
absolute：绝对定位，定位基准是父元素里的非static，与文档流无关，不占据空间
fixed：固定定位，定位基准是 viewport，（有坑，尽量不要用） fixed定位是元素的位置和文档流无关，不占据空间
sticky：粘滞定位，加-webkit- ，兼容性差
z-index：层叠，使元素和文档流无关，可以置顶堆叠顺序

Transform

transform属性用于旋转、倾斜、缩放、平移有XYZ轴方向
⚠️职能转换由盒模型定位的元素

scale（-2，2）横向和纵向的缩放
translate(50%,30px) 平移 translate(-50%, -50%)//可以做绝对定位元素的居中
rotate（30deg）旋转30度
skew（30deg, 45deg）横向和纵向的倾斜
transform: none不应用任何转换可以组合使用对浏览器的兼容性支持

浏览器渲染过程

根据HTML构建html树（DOM）
根据css构建css树（cssom）
将两棵树合并成一颗渲染树（render tree）
layout布局（文档流、盒模型、计算大小和位置）
paint绘制（把边框颜色、文字颜色、阴影等画出来）
compose合成（根据层叠关系展示页面） 如何更新样式 一般采用 js 来更新样式

div.style.display='none'
div.classList.add('red')
div.remove() //直接闪电节点

样式更新方式

transition 过渡

用来补充中间帧
transition: 属性名时长，属性名时长过渡方式延迟
all 代表所有属性