入人人都是產品經理【起點學院】產品經理實戰訓練營，BAT產品總監手把手帶你學產品

如果評選近幾年互聯網行業最火的職位，產品經理一定可以排到前三。到如今，很多人畢業之后直接擔任了產品經理/助理的崗位，這也得益于產品崗儼然已成為了很多企業校招時的重頭戲。

與直接以產品經理崗位為職業起點的應屆生不同，業內也存在很多優秀的產品經理是由如開發、視覺設計等其它崗位轉化過來。對于轉崗做產品的人來說，先前的工作經驗無疑在一定程度上也增加了自身的優勢。

行業背景

對于產品經理來說，思維邏輯能力、溝通表達能力等等都是很重要的人才衡量標準。同時若在某些崗位有比較多的了解，也會增加其競爭力。比如程序猿出身的產品經理，往往對技術實現的可行性、開發工作量等方面有一定的先天優勢；視覺設計出身的產品經理，往往在頁面設計、用戶體驗等方面更勝一籌。

換個角度來理解，產品經理需要了解產品整個研發周期相關的各種知識，才能具備成為優秀產品經理的基本素質（注意：只是具備了基本素質而已）。所以我個人堅持的一個觀點就是產品經理要有孜孜不倦的學習態度，對相關的領域充滿好奇心，換句說好奇心改變產品經理的視野格局（怎么這么像某個手機品牌的slogan...）。

為什么要學習前端知識？

說回來我們的主題，產品人為什么要學習前端知識？我感覺最重要的原因是兩個：技術門檻低、更接近用戶和UI設計，另外還會帶來一個便利性。

首先，前端開發技術門檻相對較低。相比APP、后臺服務器等項目，前端開發要簡單的很多，對于技術門外漢來說，完全可以放下對“編程”兩個字的恐懼心理，并且由于技術門檻低，做的東西更容易所見即所得，在學習過程中更能帶來成就感，而這種成績感正向的激發出更多學習熱情。所以說，如果你是一名不懂技術的產品經理，強烈推薦通過前端開發這門技術來走進程序猿們的世界。

其次，前端更接近用戶和UI設計。跟后端不同，用戶直接面對使用的就是前端頁面，所以在開發過程中需要不斷地站在用戶的角度去考慮問題，這在用戶體驗方面會和產品經理的職責產生一定的化合作用。同時，前端也需要更多的關注頁面布局、視覺展現等等，這在UI設計層面也能和產品經理的職責相輔相成。所以說，站在產品經理的角度來看，前端開發相比其他技術更適合進行深層次的探索。

另外，當測試web項目前端頁面時還有個好處，因為有前端知識，所以自己可以隨時查看頁面中各元素的屬性，并能進行細節的調整且能實時看到效果。這樣在和前端開發、UI設計師等溝通時更加便捷準確，經過你的試驗后，可以直接跟他們說按鈕的高度改為24px會不會更好一點，而不是很模糊的說按鈕的高度調小一點吧。這在一定程度上也會提升整個團隊的協作效率。

前端的技術體系有哪些？

學習前端知識前，首先要先從宏觀層面對整個前端體系有個大致的了解。由于我也不是技術出身，更專業的分析解讀可以通過查詢相關的知乎問題等資料去了解，以下只是我站在產品經理角度的一些不成熟的理解，若有誤歡迎請高手指正。

一、入門篇：html、css

對于用戶而言，最直觀的東西無非就是可以肉眼看到的東西，而html/css就是用來干這個的。html 指的是超文本標簽語言，說白了就是一堆標簽，標簽中定義了網頁中展現的各種元素，比如網頁的標題、正文中的文字、圖片、視頻等等；CSS 指層疊樣式表（Cascading Style Sheets），說白了就是定義html中元素的表現形式，比如字號、顏色、對齊方式等等。

在學習階段，要了解很多東西，包括但不局限于：

1. 常用html標簽的含義，比如<a>**</a>定義一個鏈接等
2. CSS的框模型，即margin、border、padding等具體的含義代表什么；
3. CSS選擇器的種類，如元素選擇器、類選擇器以及通常的用法
4. CSS定位模式都有哪些？
5. ......

我之所以舉幾個例子說明，是想表明在我們學習的過程中，不要鉆知識點的牛角尖，更要學會分模塊的總結思考，這樣才能融會貫通，學起來更加高效。在這個階段推薦w3school 在線教程，這個網站雖然看起來非常接地氣，但非常適合入門學習。

二、進階篇：JavaScript、jQuery

通過入門篇的學習，基本上可以寫一些靜態的界面了。而JavaScript則是用來實現交互效果，讓html、css展示的靜態頁面動起來。比如當鼠標懸浮到分享按鈕上方，則會彈出分享渠道的一個小窗口，這個就是用JavaScript實現出來的。

在了解一些基礎的JavaScript概念之后，則可以繼續學習jQuery，其實就是一個JavaScript代碼庫，通過jQuery能夠顯著降低我們編寫交互效果的難度。

這個階段同樣推薦w3school 在線教程這個網站進行學習，同時也可以通過專業的渠道去了解一些前端UI框架的社區網站，提供大量 CSS 樣式與 jQuery 插件，從而能夠幫助我們快速的制作一些酷炫的交互網站。

以上兩個篇章基本就是前端的內容，在知乎上曾看到這樣一句描述，根據非常貼切：html是名詞，css是形容詞，javascript是動詞，三個互相配合才是一個句子。對于產品經理而言，學習了解這些知識已經足夠了，完成達到了學習前端的初衷，如果對此十分感興趣，想學的更深入，則可以更進一步。

三、高手篇：web server、 php等后端知識

前端完成了瀏覽器頁面展示的運算，頁面的展現離不開服務器和數據庫的支持，這就是后端的開發。后端的架構不像前端已經有很明確的標準形式，目前存在各種方案，而且技術門檻相比前端也比較高。我對這塊的了解也非常少，有興趣的同學可以移步更專業的地方去學習了解。

學習前端小心得

雖然我大一學過C++語言，但并沒有走開發的路線，所學到的知識也僅限于書本，所以嚴格意義上我也是一個技術門外漢。因為最近的一個web項目和自身的好奇心驅動，所以才在最近不到一個月內的零散時間學習了解一些相關的知識（目前水平有限，仍需繼續研究），學習過程中的一些小心得也希望能跟大家分享。

1. 先通過文中分享的網站教程，認真過一遍html+css的知識點，盡量全面細致，有些知識點看不懂不要緊，但至少要在腦海中留下印象（下一點會說明為什么）
2. 教程中會有一些小練習，嘗試理解并能夠自己寫一些拓展的頁面展示，過程中發現不理解的點要回過頭再去細看對應的知識點（只有先留下印象才能定位到問題在哪里，然后知識點和實踐結合起來更能方便理解掌握）
3. 仿照一些簡單的靜態網頁，比如電商登錄頁面，利用學到的html、css知識臨摹出來，期間可以通過查看網頁源碼幫助自己思考（不會看源碼的同學請自行百度），主要鍛煉自己html標簽的使用、css屬性使用、以及div定位布局等方面的知識
4. 可以先學習html+css入門的知識，寫一些靜態頁面有了一定基礎之后，再開始學習JavaScript知識，然后給制作的靜態頁面添加交互效果，循序漸進的學習，盡量不要想著一步到位，不然容易打消積極性
5. 可以嘗試寫一下小的項目，比如個人的網站。同樣在過程中會遇到很多問題，要學會不斷回到第1、2點進行復盤學習幫助對知識點的加深，也要學會通過參考其它網頁源碼獲取思路，最重要的要不斷總結思考

個人練習作品分享

在學習過程中，我也嘗試寫了一個個人網站，目前還非常簡陋（大神勿噴），分享出來供大家一起學習交流。

對了，如果想把自己的網站掛到網上，還需要學習建站技術，購買域名、主機服務器等。目前對具體的步驟我也不太清楚，今后有時間可以研究一下把網站放上去，想想還算是比較有成就感的一件事情。

如果大家感興趣，目前只能把網頁文件下載到本地，然后本地打開查看（這樣也有個好處，用到的圖標和背景圖片可以更方便的拿到），歡迎大家交流指正。

本文由 @劉鵬 原創發布于人人都是產品經理 ，未經許可，禁止轉載。

位已經入坑的前端小伙伴,前面咱們已經給大家分享了移動端開發時候流式布局的應用場景及注意事項,今天再次給大家分享一個布局叫彈性布局,接下來咱們從如下幾個方面,全方位的給大家介紹彈性布局的使用.

一:什么是彈性布局?

彈性布局(flex container),頁面中任何一個元素只要設置了display:flex屬性,那么當前盒子都稱為彈性盒子.彈性盒子默認有兩條軸: 默認水平顯示的主軸 和 始終要垂直于主軸的側軸(也叫交叉軸),在彈性盒子中所有的子元素都是沿著主軸方向顯示。

二:什么情況下用彈性布局?

①: 以攜程移動頁面為例,在網頁中當遇到需要將父元素按照奇數進行等分,比如攜程中紅色區域是將父元素3等分.如果用流式布局那么就需要設置33.33%.如果用彈性布局只需要給每一個子元素設置一個屬性flex:1即可快速實現.

②:以淘寶網頁為例,當我們需要頁面中多個子元素快速實現在父元素中以左右距離適中顯示的時候,這個時候我們不需要設置任何的px值,只需要給元素設置justify-content:space-around就可以實現.

③:以攜程為例,當頁面中出現子元素按照其他比例分割父元素的時候,依然可以通過彈性盒子中的flex實現快速實現.如圖:紅色區域是按照 2:1:2 和 2:1:1:1的比例顯示.

如果咱們在寫移動端頁面(包括PC端頁面)遇到以上幾種情況的時候,彈性布局是最好的選擇.

三:彈性布局的具體使用

很多小伙伴都清楚彈性布局很好用,但是就是屬性太多記不住而且還容易將屬性對應的效果搞混,所以接下來我將給大家總結一下彈性布局中幾個必須掌握的屬性.

①:彈性布局第一步就是先給父元素設定為彈性盒子,既設置屬性:display:flex.如代碼所示:

②:設置伸縮盒子的主軸方向,默認伸縮盒子中的主軸是水平顯示,所以默認元素都是一行顯示的.可以通過flex-direction屬性調整主軸的方向,改變元素的顯示方式

flex-direction: row的顯示效果如下圖所示:

flex-direction:row-reverse的顯示效果如下圖所示:

flex-direction:column的顯示效果如下圖所示:

flex-direction:column-reverse的顯示效果如下圖所示:

③:設置元素在主軸方向的對齊顯示方式,通過justify-content屬性實現

justify-content:flex-start的顯示效果如下:

justify-content:flex-end的顯示效果如下:

justify-content:space-between的顯示效果如下:

justify-content:space-around的顯示效果如下:

④:設置彈性盒子中元素在側軸(交叉軸)方向的對齊方式通過align-items實現.

align-items: stretch 默認值的顯示效果如下:

align-items:flex-start顯示效果如下:

align-items:flex-end顯示效果如下:

align-items:center顯示效果如下:

⑤:在伸縮盒子中,默認所有的子元素超出父容器寬度后都不換行顯示,如果希望讓超出父元素后換行顯示,可以通過flex-wrap屬性實現

flex-wrap:nowrap 默認效果如下:

flex-wrap:wrap 顯示效果如下:

⑥:在伸縮和中元素換行后設置多行對齊方式,通過align-content屬性實現

align-content:stretch默認值顯示效果:

align-content:flex-start 顯示效果如下:

align-content:flex-end 顯示效果如下:

align-content:center 顯示效果如下:

align-content: space-between 顯示效果如下

align-content: space-around顯示效果如下:

以上屬性都是給彈性盒子設置的屬性,各位小伙伴要注意.如下代碼所示:

⑦:如果希望彈性盒子中子元素按照任何一個比例顯示,可以給子元素設置flex屬性,如下圖所示:

Flex: 1.代表子元素占父元素空間寬度的一份.

Felx:2代表子元素占父元素空間寬度的2份,依次類推

三: 彈性布局優缺點分析

彈性布局在網頁中實現快速分配比例,盒子快速對齊優勢很大,因為通過簡單的幾個屬性就可以實現,進而減少我們設置具體值.但是彈性布局中的屬性對于瀏覽器版本要求比較嚴格,如果瀏覽器版本太低那么彈性布局中的屬性是無法正常使用的.如下圖所示:

寫在最后的幾句話,送給大家.學習任何知識都不是為了去解決某個特定問題的.我們學的知識可以當成是我們工具包中的一個新工具.在恰當的時候使用恰當的工具解決問題就可以了.針對彈性布局中還有其他屬性,由于我們在寫頁面的過程中不是經常用到,所以今天主要分享給大家彈性布局中我們必須會的. 好的這個章節就講到這里。

黑馬最新活動：

黑馬程序員2020年java中級程序員學習路線圖、全部資源免費大放送，點擊下方：“了解更多”的鏈接就可進入頁面領取哦。