2018.6.25 培训学习任务-样式与布局
深度学习以下样式写法,将当前项目代码尽量规范化
CSS 规范 https://www.cnblogs.com/makai/p/9002898.html
CSS布局布局深入学习 https://segmentfault.com/a/1190000011358507
补充Flex布局
Flex 布局-语法 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 阮一峰
Flex 布局-实例 http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
要求
在fullstack-training个人目录中创建学习demo
将当前开发中的模块应用以上样式写法尽量优化。
培训计划
css命名法：
关于CSS布局深入规范
二栏布局
三栏布局
实验结果
弹性布局 flex
一个伸缩盒模型 https://www.w3.org/html/ig/zh/css-flex-1/
.box{
display:-webkit-flex; /* Safari */
display:flex;}
以下6个属性设置在容器上：
flex-direction 容器内项目的排列方向(默认横向排列)
flex-wrap 容器内项目换行方式
flex-flow 以上两个属性的简写方式
justify-content 项目在主轴上的对齐方式
align-items 项目在交叉轴上如何对齐
align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-direction
1 .box { 2 flex-direction: row | row-reverse | column | column-reverse; 3 }
属性可选值的范围为row(默认)沿水平主轴由左向右排列、row-reverse沿水平主轴由右向左排列、column沿垂直主轴右上到下和column-reverse。
flex-wrap1 .box{ 2 flex-wrap: nowrap | wrap | wrap-reverse; 3 }
属性可选值的范围为nowrap(默认)不换行、wrap换行（第一行在上方）和wrap-reverse（你懂的~）
flex-flow
1 .box { 2 flex-flow: || ; 3 }
写法属性中，将上述两种方法的值用||连接即可
justify-content
1 .box { 2 justify-content: flex-start | flex-end | center | space-between | space-around; 3 }
项目在主轴上的对齐方式(主轴究竟是哪个轴要看属性flex-direction的设置了)
flex-start：在主轴上由左或者上开始排列
flex-end：在主轴上由右或者下开始排列
center：在主轴上居中排列
space-between：在主轴上左右两端或者上下两端开始排列
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
这个很重要，一个简写形式
以下是项目属性
最重要部分常用
实例：
https://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/视区 vh
我的git会提示报一下这样的错误
问题描述：自己想要完成今天的任务，在自己的文件里面配置一个文件夹 复制自己的文件，发现没有moch文件，便复制老总最初配置的那个文件，结果 packge.json里面的文件是空的，说明后面被删掉了。红色的为被删除的部分，所以要重新配置好
进入文件夹 使用 git log -p packge.json命令 （可查看文件之前的样子）
配置完成
晚上老总亲自上了一课：单独培训
这些都 是专门引用的所依赖的包文件
{
"devDependencies": {
"gulp": "^3.9.1",
"gulp-clean-css": "^3.9.4",
"gulp-sass": "^4.0.1",
"gulp-uglify": "^3.0.0",
"eslint": "^3.6.0",
"eslint-config-ali": "~1.0.0",
"eslint-plugin-import": "^1.16.0",
"eslint-plugin-react": "^6.3.0"
},
"scripts": {
"start": "gulp watch"
}
}
http://118.190.62.2:10101/tree/fullstack-training.git/master/dev%2Fchenxiangyan%2Fxtemplate-study
所以得出一个非常重要的结论：这前都 是云里雾里的。node的包模块，所有需要的东西都 要先
引用即require一下，才能够执行 最后才会加载到包里， npm install （安装包名）
npm install a --save (安装保存到本地文件目录（即当前开发文件，并不是全局安装）)
npm install -g 才是全局模块的安装。
https://www.npmjs.com（npm 包地址的引用）
https://github.com/yubhbh/rollbar.js/blob/master/package.json (参考 人家写的代码pack.json文件配置)
最后自己成功配置完成文件
cnpm install 安装 出错，要先局装服务
