整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
起之前工作面試時，面試官問的一個問題：行內元素有哪些，和塊級元素有什么區別？這是一道蠻基礎的面試題，但是很多初學者平時只注重標簽語義，忽視了標簽行內和塊級的特性， 因此對于上述問題很有可能答不上來或者答不全。
HTML常見的行內元素有：
<span>、<a>、 <img>、 <input>、<textarea>、<select>、<label>
還有包括一些文本元素如：<br> 、<b>、 <strong>、<sup> 、<sub>、 <i> 、<em> 、<del> 、 <u>等。
要是只回答<span>和<img>那就說不過去了吧。
HTML常見的塊級元素有：
<div>、<table>、<form>、<p>、<ul>、
<h1>......<h6>、<hr> 、<pre>、<address>、<center>、<marquee> 、<blockquote> 等。
要是只回答<div>那就說不過去了吧。
那它們之間的區別是什么呢？
·塊級元素
1.總是從新的一行開始，即各個塊級元素獨占一行，默認垂直向下排列；
2.高度、寬度、margin及padding都是可控的，設置有效，有邊距效果；
3.寬度沒有設置時，默認為100%；
4.塊級元素中可以包含塊級元素和行內元素。
·行內元素
1.和其他元素都在一行，即行內元素和其他行內元素都會在一條水平線上排列；
2.高度、寬度是不可控的，設置無效，由內容決定。
設置margin左右有效，有邊距效果；
設置margin上下會撐大空間但是不會產生邊距效果（即盒模型margin-top/bottom有值，但頁面上沒有邊距效果）。
設置padding左右有效，設置padding上下會撐大空間但是不會產生邊距效果（同上）。
padding效果如下展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style>
span{
border:1px solid red;
padding:10px;
}
div{
border:1px solid blue;
}
</style>
<body>
<div>塊級元素</div>
<span> 行內元素</span>
<span> 行內元素</span>
<div>塊級元素</div>
</body>
</html>3.根據標簽語義化的理念，行內元素最好只包含行內元素，不包含塊級元素。
轉換
當然塊級元素與行內元素之間的特性是可以相互轉換的。HTML可以將元素分為行內元素、塊狀元素和行內塊狀元素三種。
使用display屬性能夠將三者任意轉換：
(1)display:inline;轉換為行內元素；
(2)display:block;轉換為塊狀元素；
(3)display:inline-block;轉換為行內塊狀元素。
行內塊狀元素綜合了行內元素和塊狀元素的特性：
(1)不自動換行，與其他行內元素都會在一條水平線上排列；
(2)高度、寬度、margin及padding都是可控的，設置有效，有邊距效果；
(3)默認排列方式為從左到右。
CSS margin 和 padding 屬性經常被放在一起討論，原因有兩個：
CSS 長度是距離值的一種。CSS 百分比與長度類似，但區別在于它們總是頁面中其他內容的一部分，具體取決于它們與什么屬性一起使用。長度可以是絕對值，也可以是相對值。
CSS 提供了兩種類型的單元，因此我們可以建立靈活的網站，使其適用于各種設備和配置。
在決定使用絕對還是相對 CSS 單位來處理某個 CSS 屬性時，你需要考慮用戶想要做什么。
你可能已經熟悉了在文本大小方面使用相對長度單位。對于 font-size 屬性使用 rem 單位是最佳實踐，因為它允許用戶通過個人設備上的設置來自定義他們的瀏覽體驗
相對長度單位也常用于根據用戶的視口尺寸改變頁面外觀。我們就是這樣實現響應式設計的，無論用戶使用何種設備、窗口大小、頁面縮放或文字大小，都能正常運行。
那么，在使用相對長度單位時，我們要針對哪些用戶行為進行設計呢？
在所有這些情況下，用戶最關心的是什么？是內容，還是內容之間的間距？這兩點中哪一點對理解網頁至關重要？
當用戶在定制自己的觀看體驗時，對他們來說最重要的是內容和手頭的任務。間距對于用戶完成任務來說往往并不重要，因此不需要像內容本身那樣以同樣的速度增長或縮放。
就垂直間距而言，最終也會增加用戶完成任務的難度。由于水平空間有限，文字必須換行到下一行，對此你無能為力，但你也不想讓頁面變得更高，因為你的垂直間距會隨著文字大小的增加而增加。
對于只想以不同方式閱讀內容的用戶來說，過高的頁面意味著更多的滾動和操作，而且他們一次能看到的內容也會更加有限。
以下是在不增加文字大小的情況下一頁的基本視圖。從高層次來看，它具有
要測試僅增加文字大小會發生什么情況，可以在頁面的主 <html> 元素中添加一個 CSS 屬性： font-size: 200% 。這樣做的目的是將網站使用的基本字體大小加倍，因為網站使用 rem 單位來實際調整文字大小。
遺憾的是，在大多數元素中，它們還將 rem 單位用于 margin 和 padding 中。我們可以看到這一點：
為了展示如果這個網頁使用 px 單位而不是 rem 單位來設置 margin 和 padding，它將會是什么樣子，我使用了瀏覽器開發者工具檢查了 HTML 和 CSS，并覆蓋了一些 CSS 值。
入人人都是產品經理【起點學院】產品經理實戰訓練營，BAT產品總監手把手帶你學產品
如果評選近幾年互聯網行業最火的職位，產品經理一定可以排到前三。到如今，很多人畢業之后直接擔任了產品經理/助理的崗位，這也得益于產品崗儼然已成為了很多企業校招時的重頭戲。
與直接以產品經理崗位為職業起點的應屆生不同，業內也存在很多優秀的產品經理是由如開發、視覺設計等其它崗位轉化過來。對于轉崗做產品的人來說，先前的工作經驗無疑在一定程度上也增加了自身的優勢。
對于產品經理來說，思維邏輯能力、溝通表達能力等等都是很重要的人才衡量標準。同時若在某些崗位有比較多的了解，也會增加其競爭力。比如程序猿出身的產品經理，往往對技術實現的可行性、開發工作量等方面有一定的先天優勢；視覺設計出身的產品經理，往往在頁面設計、用戶體驗等方面更勝一籌。
換個角度來理解，產品經理需要了解產品整個研發周期相關的各種知識，才能具備成為優秀產品經理的基本素質（注意：只是具備了基本素質而已）。所以我個人堅持的一個觀點就是產品經理要有孜孜不倦的學習態度，對相關的領域充滿好奇心，換句說好奇心改變產品經理的視野格局（怎么這么像某個手機品牌的slogan...）。
說回來我們的主題，產品人為什么要學習前端知識？我感覺最重要的原因是兩個：技術門檻低、更接近用戶和UI設計，另外還會帶來一個便利性。
首先，前端開發技術門檻相對較低。相比APP、后臺服務器等項目，前端開發要簡單的很多，對于技術門外漢來說，完全可以放下對“編程”兩個字的恐懼心理，并且由于技術門檻低，做的東西更容易所見即所得，在學習過程中更能帶來成就感，而這種成績感正向的激發出更多學習熱情。所以說，如果你是一名不懂技術的產品經理，強烈推薦通過前端開發這門技術來走進程序猿們的世界。
其次，前端更接近用戶和UI設計。跟后端不同，用戶直接面對使用的就是前端頁面，所以在開發過程中需要不斷地站在用戶的角度去考慮問題，這在用戶體驗方面會和產品經理的職責產生一定的化合作用。同時，前端也需要更多的關注頁面布局、視覺展現等等，這在UI設計層面也能和產品經理的職責相輔相成。所以說，站在產品經理的角度來看，前端開發相比其他技術更適合進行深層次的探索。
另外，當測試web項目前端頁面時還有個好處，因為有前端知識，所以自己可以隨時查看頁面中各元素的屬性，并能進行細節的調整且能實時看到效果。這樣在和前端開發、UI設計師等溝通時更加便捷準確，經過你的試驗后，可以直接跟他們說按鈕的高度改為24px會不會更好一點，而不是很模糊的說按鈕的高度調小一點吧。這在一定程度上也會提升整個團隊的協作效率。
學習前端知識前，首先要先從宏觀層面對整個前端體系有個大致的了解。由于我也不是技術出身，更專業的分析解讀可以通過查詢相關的知乎問題等資料去了解，以下只是我站在產品經理角度的一些不成熟的理解，若有誤歡迎請高手指正。
對于用戶而言，最直觀的東西無非就是可以肉眼看到的東西，而html/css就是用來干這個的。html 指的是超文本標簽語言，說白了就是一堆標簽，標簽中定義了網頁中展現的各種元素，比如網頁的標題、正文中的文字、圖片、視頻等等；CSS 指層疊樣式表（Cascading Style Sheets），說白了就是定義html中元素的表現形式，比如字號、顏色、對齊方式等等。
在學習階段，要了解很多東西，包括但不局限于：
我之所以舉幾個例子說明，是想表明在我們學習的過程中，不要鉆知識點的牛角尖，更要學會分模塊的總結思考，這樣才能融會貫通，學起來更加高效。在這個階段推薦w3school 在線教程，這個網站雖然看起來非常接地氣，但非常適合入門學習。
通過入門篇的學習，基本上可以寫一些靜態的界面了。而JavaScript則是用來實現交互效果，讓html、css展示的靜態頁面動起來。比如當鼠標懸浮到分享按鈕上方，則會彈出分享渠道的一個小窗口，這個就是用JavaScript實現出來的。
在了解一些基礎的JavaScript概念之后，則可以繼續學習jQuery，其實就是一個JavaScript代碼庫，通過jQuery能夠顯著降低我們編寫交互效果的難度。
這個階段同樣推薦w3school 在線教程這個網站進行學習，同時也可以通過專業的渠道去了解一些前端UI框架的社區網站，提供大量 CSS 樣式與 jQuery 插件，從而能夠幫助我們快速的制作一些酷炫的交互網站。
以上兩個篇章基本就是前端的內容，在知乎上曾看到這樣一句描述，根據非常貼切：html是名詞，css是形容詞，javascript是動詞，三個互相配合才是一個句子。對于產品經理而言，學習了解這些知識已經足夠了，完成達到了學習前端的初衷，如果對此十分感興趣，想學的更深入，則可以更進一步。
前端完成了瀏覽器頁面展示的運算，頁面的展現離不開服務器和數據庫的支持，這就是后端的開發。后端的架構不像前端已經有很明確的標準形式，目前存在各種方案，而且技術門檻相比前端也比較高。我對這塊的了解也非常少，有興趣的同學可以移步更專業的地方去學習了解。
學習前端小心得
雖然我大一學過C++語言，但并沒有走開發的路線，所學到的知識也僅限于書本，所以嚴格意義上我也是一個技術門外漢。因為最近的一個web項目和自身的好奇心驅動，所以才在最近不到一個月內的零散時間學習了解一些相關的知識（目前水平有限，仍需繼續研究），學習過程中的一些小心得也希望能跟大家分享。
個人練習作品分享
在學習過程中，我也嘗試寫了一個個人網站，目前還非常簡陋（大神勿噴），分享出來供大家一起學習交流。
對了，如果想把自己的網站掛到網上，還需要學習建站技術，購買域名、主機服務器等。目前對具體的步驟我也不太清楚，今后有時間可以研究一下把網站放上去，想想還算是比較有成就感的一件事情。
如果大家感興趣，目前只能把網頁文件下載到本地，然后本地打開查看（這樣也有個好處，用到的圖標和背景圖片可以更方便的拿到），歡迎大家交流指正。
本文由 @劉鵬 原創發布于人人都是產品經理 ，未經許可，禁止轉載。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
