弹性布局
一个盒子，如果将其display属性设置为 flex ，该盒子变为弹性盒（弹性容器），该盒子的 所有子元素，自动变为弹性项目。弹性盒本身按照自身的定位体系排列，弹性布局影响的仅 仅是弹性盒中的弹性项目 。
属性 ：
1.flex-direction ：更改主轴方向
2.row 行 默认值
3.row-reverse 反向 主轴从右向左
4.column 列 按主轴从上往下排列
5.column-reverse 按主轴从下往上
6.justify-content ：更改主轴对其方式
7.flex-start 默认值 主轴起点一次排列
8.flex-end 主轴终点对齐
9.center 主轴中线对齐
10.space-between 左右项目靠边，中间平均分布
11.space-around 所有项目平均分布
12.align-items: 更改侧轴对齐方式
13.stretch 默认值 拉伸
14.flex-start 侧轴起点对齐
15.flex-end 侧轴终点对齐
16.center 侧轴中线对齐
flex-wrap ： wrap （换行） nowrap （不换行）
align-content 规则：弹性项目宽度自动时，表示适应内容的宽度和高度。margin为自动时，会吸收 弹性容器的剩余空间。
项目属性 ： order 更改弹性项目的排列顺序，顺序为从小到大进行排列 flex-shrink 更改弹性项目的压缩比例 1 默认 0 不压缩
flex-grow ： 更改弹性项目的增长比例 0 默认 不增长
flex-basis ： 弹性项目在压缩或增长前的基础宽度，若不设置，默认值为auto，表示 与width属性值相同
速写 flex：grow shrink basis; 同时设置增长、压缩、基础值。
水平居中方式
1. 文字水平居中，设置文字所在元素的 text-aline:center;
2. 常规流块盒水平居中，定宽，左右m argin 为 auto
3. 将该盒子的父元素设置为弹性盒，同时设置 justify-content: center;
4. 设置父元素为弹性盒，将需要居中的元素的左右 margin 设置为 auto 。
垂直居中
1. 文字在元素中垂直居中，设置行高为元素高度 。
2. 盒子在包含块中垂直居中，设置父元素为弹性盒，其侧轴对齐方式为居中 align-items： center 。
3. 设置父元素为弹性盒，将需要居中的元素上下 margin 设置为 auto 。
水平居中（包含块中居中）
1.定宽，左右margin为auto。（常规流块盒、弹性项目[不用定宽]）
2.弹性盒设置justify-content:center，让弹性项目在主轴上居中。（普遍适应）
3.父元素设置text-align: center，让其内部的行盒、块盒居中。
4.绝对定位元素，left:0? right:0? 定宽；左右margin: auto。 5.margin-left:50%?transform:translateX( -50%)。[margin,padding相对于包含块宽度的百分比
垂直居中
1.单行文本垂直居中，设置父元素的line-height为包含块高度。
2.弹性盒设置align-items:center，让弹性项目在侧轴上居中。
3.绝对定位元素，top：0；bottom：0；定高；上下margin:auto。
4.绝对定位元素，top：50%；transform:translateY(-50%)。
5.绝对定位元素水平垂直居中
left：50%；top：50%；transform：translate（ -50%，-50%）
行盒和块盒的区别
1.行盒不可设置宽高，垂直方向上所有尺寸不占用空间，但水平方向上的margin、border、 padding可以。块盒所有尺寸有效。
2.行盒会在合适位置被截断，而块盒不行。
3.行盒只有常规流（浮动和绝对定位会强行将之转换为块盒），排列时，与其他行盒首尾相 接。块盒有多种定位体系，每种定位体系按照自身规则排列。
4.行盒之间和行盒内部会空白折叠。块盒不会。
伪类选择器
1.:hover，鼠标悬浮时的效果
2.:active，a/button元素激活（按钮）时的效果
3.:link，a元素未访问过的样式
4.:visited，a元素访问过的样式
5.:checked，单元或多选被选中的样式
6.:focus，表单元素聚焦的样式
7.:firstchild，第一个子元素
8.:lastchild，最后一个子元素
9.:nthchild(2)，第二个子元素
10. :nthchild(2n)/:nthchild(even)，第偶数个子元素
11. :nthchild(odd)，第奇数个子元素
伪元素选择器
1. ::before，在内部生成一个子元素，作为第一个子元素，然后选中它
2. ::after，在内部生成一子元素，作为最后一个子元素，然后选中它
3. :selection，选中被框选的文字
后\0：IE5~IE7 前*：IE5~IE7 前_：IE5~IE6
设置color属性，让非IE浏览器为绿色，IE5~IE6为红色，IE7为棕色，IE8~IE11为黑色 color：green； color\0:black； *color：brown； _color:red；
height的百分比相对于包含块的高度，其有效的前提条件是：包含块的高度是可计算的给html设置100%，是视口的高度。
CSS框架
bootstrap 理念：移动端优先，响应式，栅格系统（960布局） 960布局：主区域宽度为960像素，将区域内部划分为12列，每列之间间隔10像素，每列宽度60像素。
原文地址：https://www.cnblogs.com/akangwx0624/p/10971481.html