align-items
align-items 定义了项目在交叉轴上如何对齐。
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
假设交叉轴是从上到下的垂直方向，下面给出了不一样属性值的效果图。
（align-items 为 flex-start）
（align-items 为 flex-end）
（align-items 为 center）
（align-items 为 baseline）
（align-items 为 stretch）
align-content
align-content 定义了多根轴线的对齐方式，若此时主轴在水平方向，交叉轴在垂直方向，align-content 就能够理解为多行在垂直方向的对齐方式。项目排列只有一行时，该属性不起做用。
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
（align-content 为 flex-start）
（align-contet 为 flex-end）
（align-content 为 center）
（align-content 为 space-between）
（align-content 为 space-around）
（align-content 为 stretch）
项目属性
对项目设置属性，能够更灵活地控制 Flex 布局。如下六种属性能够设置在项目上：
order
order 定义了项目的排列顺序，默认值为 0，数值越小，排列越靠前。
.item {
order: <integer>;
}
（给第三个项目设置了 order: -1; 后，该项目排到了最前面）
flex-grow
flex-grow 定义了项目的放大比例，默认为 0，也就是即便存在剩余空间，也不会放大。
若是全部项目的 flex-grow 都为 1，则全部项目平分剩余空间；若是其中某个项目的 flex-grow 为 2，其他项目的 flex-grow 为 1，则前者占据的剩余空间比其余项目多一倍。
.item {
flex-grow: <number>;
}
（全部项目的 flex-grow 都为 1，平分剩余空间）
（flex-grow 属性值越大，所占剩余空间越大）
flex-shrink
flex-shrink 定义了项目的缩小比例，默认为 1，即当空间不足时，项目会自动缩小。
若是全部项目的 flex-shrink 都为 1，当空间不足时，全部项目都将等比缩小；若是其中一个项目的 flex-shrink 为 0，其他都为 1，当空间不足时，flex-shrink 为 0 的不缩小。
负值对该属性无效。
.item {
flex-shrink: <number>；
}
（空间不足时，默认等比缩小）
（flex-shrink 为 0 的不缩小）
flex-basis
flex-basis 定义了在分配多余的空间以前，项目占据的主轴空间，默认值为 auto，即项目原来的大小。浏览器会根据这个属性来计算主轴是否有多余的空间。
flex-basis 的设置跟 width 或 height 同样，能够是像素，也能够是百分比。设置了 flex-basis 以后，它的优先级比 width 或 height 高。
.item {
flex-basis: <length> | auto;
}
（不一样的 flex-basis 值效果展现）
flex
flex 属性是 flex-grow、flex-shrink、flex-basis 的缩写，默认值是 0 1 auto，后两个属性可选。
该属性有两个快捷值：auto（1 1 auto）和 none（0 0 auto）。auto 表明在须要的时候能够拉伸也能够收缩，none 表示既不能拉伸也不能收缩。
.item {
flex: auto | none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
align-self
align-self 用来定义单个项目与其余项目不同的对齐方式，能够覆盖 align-items 属性。默认属性值是 auto，即继承父元素的 align-items 属性值。当没有父元素时，它的表现等同于 stretch。
align-self 的六个可能属性值，除了 auto 以外，其余的表现和 align-items 同样。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
（第三个项目的对齐方式与其余不一样）
浏览器兼容性及其余
设置为 Flex 布局后，子元素的 float、clear、vertical-align 属性都将失效。
由于历史缘由，W3C 对 flex 作了屡次更新，也就致使了各浏览器支持度良莠不齐。到目前为止，Flex 布局有一下几种写法：
display: box; /* 2009 version 老语法 */
display: flexbox; /* 2011 version 过渡语法 */
display: flex | inline-flex; /* 2012 version 新语法 */
从 Can I Use 上能够看出目前 Flex 布局对浏览器的支持状况。从中咱们能够总结出新语法目前的支持状况：
更低的版本须要加上前缀进行支持，不一样版本所在时期不一样也会致使属性值不一样，这里有一个推荐的兼容性写法：
.page-wrap {
display: -webkit-box; /* 老语法 iOS 6-, Safari 3.1-6 */
display: -moz-box; /* 老语法 Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* 过渡语法 IE 10 */
display: -webkit-flex; /* 新语法 Chrome */
display: flex; /* 新语法, Spec - Opera 12.1, Firefox 20+ */
}
什么是响应式布局
在平常生活中，咱们可使用电脑，手机，平板来浏览网页。这些不一样的媒介的屏幕大小是不同的，那么咱们如何保证本身设计的网页在任何大小的屏幕上都能有一个完美的布局呢，这里就要用到咱们这一节要讲的响应式布局的知识啦。所谓响应式布局，就是页面的布局可以随着屏幕大小的变化而变化，从而实如今任何大小的屏幕上都能以最完美的布局来展现咱们的内容。本文将以示例的形式讲解如何利用原生的 CSS 来实现页面的响应式布局，知识点都很是基础但同时也很是重要，适合新手学习。
示例一：响应式图片
（图片大小随显示区域的变化而变化）
从上图中咱们能够看出，图片在随着显示区域的变小而变小，这是怎么实现的呢，咱们先来看一下相应的 HTML 和 CSS 代码：
//HTML代码
<body>
<img src="http://www.chenxin.art/imgs/xingkong.jpg" alt="drawing" />
</body>
//CSS代码
img {
width: 1200px;
max-width: 100%;
}
width: 1200px; 规定了图片的宽度。这里咱们只规定了宽度而没有规定高度是由于，对于 img 标签而言，若是咱们只规定高度和宽度中的一个的话，没有规定的那一个会根据图片自己的比例进行自适应，也就是说能够保证图片的比例不变。
max-width: 100% 才是实现响应式的关键。这句代码的意思是，图片的最大宽度不能超过 100% 。这个 100% 是相对于其父元素来讲的。在本例中， img 标签的父元素是 body 标签，因此它的意思实际上是 img 的宽度不能超过 body 的宽度，而body 的宽度实际上就是浏览器窗口可见区域的宽度啦。这个时候咱们能够分两种状况来讨论：
- 当浏览器的宽度大于或等于
1200px 时，由于图片的宽度为 1200px ，知足“图片的宽度不能大于其父元素的宽度”这一限制条件，因此图片保持宽度 1200px 不变。
- 当浏览器的宽度小于
1200px 时，此时不知足“图片的宽度不能大于其父元素的宽度”这一限制条件，因此图片会缩小到知足条件为止，最后的结果就是图片的宽度会等于浏览器的宽度。这就是为何图片会随着窗口的变窄而变小了。
相似的 CSS 属性还有 min-width 、max-height 、min-height ，原理都是同样的。
示例二：首屏内容始终填充整个窗口
（淡绿色的首屏始终填满了整个窗口，稍稍拉动下拉条，就会进入白色的第二屏）
在上图中咱们能够看到，谈绿色的首屏始终填满了整个窗口，咱们稍稍拉动下拉条，就会进入白色的第二屏。这种技术常常被展现产品的网站所采用：产品的概念图放在首屏，详细的产品描述放在首屏以后，这样的首屏看起来干净简洁，重点突出。这种首屏内容填满整个窗口的技术是怎么实现的呢，咱们来看代码：
//HTML代码
<div class="intro">
<h1>语雀-前端九部</h1>
</div>
//CSS代码
.intro {
background: #e0ebe8;
text-align: center;
height: 55vh;
padding-top: 45vh;
}
这其中就用到了 css3 的新增单位 vh 。vh 是一个表示浏览器视窗高度的单位，所谓视窗，就是浏览器用来真正显示内容的区域，不包括工具栏等。 1vh 表示视窗高度的百分之一，100vh 表示整个视窗的高度。注意，咱们这里虽然是使用了百分号的机制，可是书写的时候不用写百分号，只用写数字就行了。在上段代码中，height 和 padding-top 加起来正好是100vh，因此首屏内容刚好占据整个视窗的大小。
的新增单位还有vw、vmin、vmax。你们能够经过这篇文章了解一下。
示例三：媒体查询(@media)
（利用媒体查询在特定状况下改变标签样式）
在上图中咱们能够看到，带有“语雀”字样的圆形图标在窗口缩窄到必定程度以后改变了其样式，由圆形变为了长方形。这里就使用到了所谓的媒体查询方法。媒体查询简单用法以下：
@media (max-width: 480px) {
background-color: lightgreen;;
}
媒体查询的标识符是 @media 。上面这段代码的含义是：若是视窗的宽度小于 480px 时，将背景色变为淡绿色。下面咱们再来看一下实现上图效果的代码：
//HTML代码
<div>
<a href="#">语雀</a>
<a href="#">语雀</a>
<a href="#">语雀</a>
<a href="#">语雀</a>
<a href="#">语雀</a>
</div>
//CSS代码
div {
text-align: center;
padding-top: 20vh;
}
a {
display: inline-block;
margin: 0 35px 45px 35px;
border-radius: 50%;
width: 100px;
height: 100px;
line-height: 100px;
background: #e0ebe8;
color: #008080;
}
@media (max-width: 367px) {
a {
border-radius: 0;
height: 20px;
padding: 10px;
line-height: normal;
}
}
当视窗宽度小于 367px 时，写在 @media 内部的样式会被启用。好比@media 中，a 标签被设置了的 border-radius：0 ，这个时候 border-radius: 0 就会覆盖以前的 border-radius: 50% ，a 标签就从圆形变成了长方形。@media 中的某个样式，若是在这以前已经被设置了，那么就会覆盖以前的值，若是以前没有被设置过，就会添加进去。所谓“存在即覆盖，不存在则添加”。
关于媒体查询的用法还有不少，咱们这里只是介绍了其中的一种，关于更多媒体查询的用法你们能够参考这个网站。
*Webpack
什么是Webpack
WebPack能够看作是模块打包机：它作的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
为什要使用WebPack
现今的不少网页其实能够看作是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了不少好的实践方法
- 模块化，让咱们能够把复杂的程序细化为小的文件;
- 相似于TypeScript这种在JavaScript基础上拓展的开发语言：使咱们可以实现目前版本的JavaScript不能直接使用的特性，而且以后还能转换为JavaScript文件使浏览器能够识别；
- Scss，less等CSS预处理器
- ...
这些改进确实大大的提升了咱们的开发效率，可是利用它们开发的文件每每须要进行额外的处理才能让浏览器识别,而手动处理又是很是繁琐的，这就为WebPack类的工具的出现提供了需求。
Webpack的工做方式是：把你的项目当作一个总体，经过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的全部依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
*代码规范
css规范
1.使用CSS缩写属性
CSS有些属性是能够缩写的，好比padding,margin,font等等，这样精简代码同时又能提升用户的阅读体验。
2.去掉小数点前的“0”
.box{
margin-top: .5px;
}
3.不要随意使用！important 样式，这样会给后续维护代码的人员形成困扰
3.简写命名
不少用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！
4.连字符CSS选择器命名规范
1）.长名称或词组可使用中横线来为选择器命名。
2）.不建议使用“_”下划线来命名CSS选择器，为何呢？
输入的时候少按一个shift键； 浏览器兼容问题 （好比使用_tips的选择器命名，在IE6是无效的） 能良好区分JavaScript变量命名（JS变量命名是用“_”）
5.不要随意使用id
id在JS是惟一的，不能屡次使用，而使用class类选择器却能够重复使用，另外id的优先级优先与class，因此id应该按需使用，而不能滥用。
6.为选择器添加状态前缀
有时候能够给选择器添加一个表示状态的前缀，让语义更明了
7.CSS命名规范（规则）
经常使用的CSS命名规则
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制总体佈局宽度：wrapper
左右中：left right center
登陆条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情连接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签：tags
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guide
服务：service
注册：regsiter
状态：status
投票：vote
合做伙伴：partner
注释的写法:
/* Header */
内容区
/* End Header */
id的命名:
1)页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制总体佈局宽度：wrapper
左右中：left right center
(2)导航
导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
(3)功能
标志：logo
广告：banner
登录：login
登陆条：loginbar
注册：register
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标籤页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合做伙伴：partner
友情连接：link
版权：copyright
注意事项:
1.一概小写;
2.尽可能用英文;
3.不加中槓和下划线;
4.尽可能不缩写，除非一看就明白的单词
CSS样式表文件命名
主要的 master.css
模块 module.css
基本共用 base.css
布局、版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
js规范
空格与运算符
一般运算符 ( = + - * / ) 先后须要添加空格
代码缩进
一般使用 4 个空格符号来缩进代码块：
不推荐使用 TAB 键来缩进，由于不一样编辑器 TAB 键的解析不同。
语句规则
简单语句的通用规则:
var values = ["Volvo", "Saab", "Fiat"];
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
-
复杂语句的通用规则:
- 将左花括号放在第一行的结尾。
- 左花括号前添加一空格。
- 将右花括号独立放在一行。
- 不要以分号结束一个复杂的声明。
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
短的对象代码能够直接写成一行:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
命名规则
通常不少代码语言的命名规则都是相似的，例如:
- 变量和函数为小驼峰法标识, 即除第一个单词以外，其余单词首字母大写（ lowerCamelCase）
- 全局变量为大写 (UPPERCASE )
- 常量 (如 PI) 为大写 (UPPERCASE )
使用小写文件名