Web周志记录第一周：
Web周志第一周：
描述页面制作的过程是怎样的？
1、页面重构师 像素级还原 :HTML CSS
2、初级前端工程师: JavaScript
3、中级前端工程师 模块化 ：NodeJS
4、高级前端工程师:React、Vue、移动端、小程序
描述盒子的分类和盒子的组成。
元素产生的盒子类型取决于display属性，
display：none 不生成盒子
display:inline 行盒 不会换行 只能改变padding/和内容
例子：span
display:block 块盒，会自动换行 例子：div
什么是内容盒子（content-box）和边框盒子（border-box）？
计算盒子大小box-sizeing：内容盒子content box(默认)、边框盒子Border box
什么是视觉格式化模型？什么是视口？什么是包含块？
视觉格式化模型：多个盒子如何布局的机制。主要受两个因素影响：1、元素的盒模型，2.、元素的定位体系
视口：可视窗口，通常指浏览器的可视区域，大小和内容无关。
包含块：指元素的包含块是他父元素的内容盒（conten-box)
Flex练习参照：flex练习小游戏
默认状态下：
容器： 父元素
项目： 子元素
主轴： X轴从左到右
交叉轴：Y轴从上到下
注：
都是用于控制项目位置（布局）
CSS代码（Flex属性）
一类是用于容器
一类是用于项目
创建容器
给某个元素添加
display:flex;当前元素就是容器。
特点：所有项目都会在一行显示。
并且，若所有项目的尺寸大于容器的尺寸，也不会溢出（因为每个项目身上都会有一份缩小比例）。
一类是用于容器（CSS代码）
row行 column列
主轴方向设置（主轴的起始方向）
flex-direction
取值 ：
row （X轴从左到右）默认值
row-reverse（X轴从右到左）
column(Y轴从上到下）
column-reverse(Y轴从下到上）
主轴方向的对齐方式
justify-content:
取值：
flex-start(默认值)
flex-end主轴结束方向对齐
center主轴居中
容器的宽度-所有项目的宽度= 剩余空间
800 100*5 = 300
【space-between;主轴两端对齐】
【space-around;主轴分散对齐】
工作原理：
step1:获取剩余空间 300
step2:获取项目的个数 5
step3:获取剩余空间/项目的个数的结果
300 / 5 = 60
step4:把step3的结果除以2
60/2 =30
step5:把step4的结果，分配给每个项目左右
【space-evenly主轴平均分配】
交叉轴对齐方式
align-items（默认值是stretch）
取值：
flex-start;交叉轴开始对齐（顶端对齐）
flex-end; 交叉轴结束对齐（底部对齐）
center:交叉轴居中
baseline：基础对齐
stretch：如果项目没有给高（就是容器的高）
换行
条件：所有项目尺寸之和要大于容器的尺寸
flex-wrap:nowrap;(默认值）
flex-wrap:wrap换行
注：如果交叉轴有剩余空间，则平均分配给每行之间的距离
flex-wrap:wrap-reverse
多根轴线对齐方式
algin-contnet
如何创建多根轴线（换行）
取值：
flex-start 所有轴线交叉轴顶部对齐
flex-end; 所有轴线交叉轴底部对齐
center; 所有轴线交叉轴居中
space-between; 交叉轴两端对齐
space-around; 交叉轴分散对齐
space-evenly; 交叉轴平均分配
主轴起始和换行的简写方式：
flex-flow:主轴起始 是否换行
例：
flex-flow:column wrap;
【项目】
排序 order:0(默认值）
功能：值越大越往后，值越小越往前
适用场景:
1、调整项目位置
2、提升SEO
放大比例
flex-grow
step1：获取剩余空间 300
step2:获取flex-grow的个数（份数）3
step3:计算剩余空间/个数的结果
300 / 3 =100
step4:按照项目中flex-grow的份数给值
缩小比例
flex-shrink
step1：获取超出部分的尺寸 200
step2:获取flex-shrink的个数（份数）6
step3:计算剩余空间/个数的结果
200 / 6 =XXX
step4:按照项目中flex-shrink的份数给值
1到多个项目的交叉轴对齐方式。
align-self:
取值：
flex-start
flex-end
center
放大比例 缩小比例 基础值 的简写
flex:1;
flex-grow:1;