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 )
使用小寫文件名