前端工作一年了，期間由於工作需要，也做了一些產品的設計，因為自己的目標就是做編程，所以婉拒了與產品相關的一些任務，打算主要把精力放到編程這方面. PS:2015年1月進軍編程行業。 廢話不多講，這一年頁面改版了N次，以至於設計師都撂挑子了，，，頁面做多了，經驗自然就有了。 背景（前端小白，迫於生計放 ...
前端工作一年了，期間由於工作需要，也做了一些產品的設計，因為自己的目標就是做編程，所以婉拒了與產品相關的一些任務，打算主要把精力放到編程這方面.
PS:2015年1月進軍編程行業。
廢話不多講，這一年頁面改版了N次，以至於設計師都撂挑子了，，，頁面做多了，經驗自然就有了。
背景（前端小白，迫於生計放棄之前銷售工作，電腦專業）
前端的最基本要求，實現設計師所出的效果圖，也就是樣子跟設計圖一樣就可以。
這個要求容易實現，需要費點心思，花點時間，期初切圖會慢一點，往後就越來越快了，，
前端的進階一，頁面是很講究佈局結構的。
一次偶然的機會，跟同事討論前端頁面，他打開了拉勾網的頁面，想做頁面其中的一部分，我通過谷歌瀏覽器F12審查了一下頁面代碼，發現這頁面結構跟我的頁面結構也似乎如出一轍，頁面是很講究佈局結構的，也就是說，接到頁面之後，不是急於去寫代碼，而是先把佈局結構在心裡設計好，傳統的結構無非就兩種，上下結構，左右結構，只是上邊與下邊，左邊與右邊的寬度與高度不一樣罷了。
前端頁面切圖的誤區，元素高度，浮動，定位。
首先來說一下高度，所有元素的高度，尤其是父元素，也就是最外層包含的容器，這些高度都是由其子元素撐開的。什麼意思呢，通俗點說就是，心有多大，舞臺就有多大，心就是子元素，舞臺就是父元素，子元素能撐多寬，多高，父元素自然就實現了設計圖上的效果。
然後再來說一下浮動，不瞭解浮動為何要清除的剛入門的同學，會在子元素浮動後，父元素，塌陷失去高度，會手動定義高度，因此便覺得浮動不清除也沒多大影響，這其實也跟第一個問題也有關係，他還不清除頁面元素的高度是靠子元素撐起來的。
最後說一下定位，定位就是需要一個參考值，在當前元素絕對定位時，若父元素沒有使用相對定位，其參考的元素為視窗，也可以說是body元素，否則參考的就是最近的使用了相對定位的父元素。還有一種定位是，固定定位，就是固定在頁面的某個位置，
