知乎上很多前端大佬說，要做好前端的話html和css基礎必須夯實。那麼，達到什麼水平才能叫基礎夯實呢？
如題
比如說仔細看完css權威指南，要用到的時候有印象算什麼水平？
做為一名從切頁面轉到寫js的前端開發工程師，看到這道題目非常有感觸啊。
先感性說一下，我還記得我第一年工作的時候，寫css和html的時候聽很high的歌，但是寫js的時候，是絕對不敢聽歌的。
再理性的說一下，我記得我當時的頁面兼容程度是ie678和firefox，恩。。沒錯，那時候還沒有chrome。。
盒模型什麼的概念我也是幾年前才知道的，我還記得我當時面試時，前端要求必須會div+css頁面布局。
你看的沒錯，當時很多網站都是table布局的。。很多人對div這個概念都不太理解，更別說什麼雙飛翼，聖杯布局，9/12宮格了。
恩。。但是我記得我巔峰時期可以一口氣切出兼容4個瀏覽器的頁面，基本是一氣呵成，不需要再單獨調試，基本上是連著hack一起寫完的。
要說現在達到什麼水平才行，我總結幾條吧，也不知道算不算落伍。
1，盒模型概念一定清楚，知道自己想要的布局到底該寫多寬多高。
2，渲染模式要分清楚，怪異和標準，怎麼轉換，說白了也是盒模型表現的事。
3，不同瀏覽器的css hack怎麼寫，選擇器的優先順序弄明白怎麼調整。
4，所有的html標籤都知道語義，所有的tag attribute都知道什麼含義，記住是所有，並且知道默認樣式是什麼，了解如何reset。
5，知道css3動畫的所有細節，並且知道在不同瀏覽器下的差異，知道css media query和flex的細節和一些比例單位如em，rem，vm等用法，並且知道怎麼用於實際的自適應布局。
6，知道如何做css性能優化和oocss，以及如何寫出模塊化的css。
7，知道不同瀏覽器的差異屬性並且知道如何繞過不使用這些屬性。
8，各種垂直居中的寫法，相對，絕對，fixed還有float的各種用法。
9，對齊，各種垂直對齊，文本，圖片，行內元素和塊級元素等。
10，給你一份psd設計稿，寫完css和html，去掉css，能保證頁面不亂，依然按照語義可以默認樣式正常顯示文檔。
11，對seo有了解，知道怎麼讓顯示和文案同時存在頁面，了解css icon fonts，svg，雪碧圖等原理和用法。
12，寫過簡單的js，知道如何給js工程師預留結構和節點鉤子，不隨意使用id屬性來做樣式渲染。
實現的頁面和效果設計師交口稱讚，可以實現偏js前端無法實現的需求，沒錯是無法實現。
簡單來說，無論設計師出的效果，你都可以很快實現
切頁面一氣呵成的時候。
合理語義化布局，
你能理解並嘗試繞開它們的局限性的時候。
這些東西需要大量練習 遇過的坑不要再跳一次就好了
對我來說然並卵 寫一段時間pc之後去寫移動差點炸了 又過一段時間再寫pc的時候真的炸了 東西亂七八糟的
達到可以行雲流水、心平氣和地支持連微軟也不要了的IE6的時候
沒有js？這不科學。
說實話，HTML和CSS都是熟能生巧，看過書又怎樣？這麼多屬性，幾個月不用你還能全記住嗎？做的多了，遇到問題多思考，多找文檔才是正道。
不是說不要記這些東西，要記一些基本的、有共性的東西。話說這些東西做了幾個項目就自然熟了。碰到細節的東西，覺得有意思的就往自己的雲筆記上扔啊。
當你寫的時候可以很容易想像到頁面呈現效果，並且不用看，一步到位寫完以後再看瀏覽器效果發現和你想要的一模一樣的時候
本小菜前來強答一波。。。
不同階段對「基礎」的理解可能不同，所以我傾向於分層來描述。
在我描述的「基礎」為，只有具備了該能力才具備應對當前階段的工作。
以下主要是根據自己個人經驗整理所得，而且可能過於概括不太確切，望請更正補充。
1、前端入門
可實現：簡單的PC布局
基礎：常用的CSS2、HTML4知識（2/8定律中的2，類同），語義化，CSS命名使用規範。
此階段中的問題大都可以在W3School中找到答案。
2、前端入行
可實現：稍複雜的布局
基礎：瀏覽器兼容（如css reset，逐漸成為過去式的hack、css前綴等），布局技巧（如浮動、垂直居中，清除浮動等），模塊化CSS增強復用性，常用的H5+CSS3知識，布局方式（自適應，瀑布流等），瀏覽器開發者工具中的DOMCSS部分，常用優化技巧（如壓縮，css sprite雪碧圖等）。此部分中，js、JQuery的能力也應該具備了，此處忽略。
3、前端入行增強版
可實現：能切出的圖都能跨瀏覽器實現，中小規模整站能夠較為標準的完成
基礎：能夠查閱、理解規範（大多為英文，可配合各種大部頭動物書幫助理解），對不常用的知識及細節也具備一定運用的能力（比如絕對定位與浮動的異同，z-index的各種鬼，文檔流，較為全面的理解各類HTML標籤及其語義，對HTML+CSS的知識面大多已經覆蓋），開發者工具使用更加廣泛（如對網路、資源等信息有一定的理解）；最好對Bootstrap、Modernizr等框架的設計方案有一定理解，以具備自主寫出更多通用組件（如自己的css reset）等，即對瀏覽器布局方案與瀏覽器兼容等有更深入全面的理解。本階段開始注重2/8定律中的8。
至於那些大神已經可以利用這些基礎出神入化的完成自己想做的並指導與規範他人了。。。。
《CSS權威指南》這本書我當年也很是迷信，覺得動物書都是聖經，其實現在看來這本書不過是很詳細介紹了各個屬性用法。所以我覺得成為前端高手和熟讀《CSS權威指南》之間並沒有多少必然聯繫。
我心中的前端高手的CSS水平應該是敢於拍板自己的解決方案就是最優的。不同類型的產品，不同規模的產品，都有自己的最優方案，我的任務就是找到並實現。
最後，我現在正在努力。
閉著眼睛寫的代碼居然支持IE6的時候
我可能走的路是倒過來的。上來寫js 而且寫的也很溜。反倒css感覺很噁心。我想的傳統cs客戶端布局方式。根據xy坐標排布
對我來說 兼容是個問題！！
純 html + css
1.做一個tab切換
2.做一個評分五星 可以動態顯示幾星
作為一名正在學習的前端新人，來一句。就是你看到的任何界面都能寫出來，當然，是靜態頁面。
① 能對著已經設計好的網頁用Html和Css寫出一模一樣的效果圖；
② 寫的代碼程序適合引擎搜索習慣和辨認格式；也就是利於蜘蛛來爬；
能夠完全做到以上兩點，那麼你的基礎功就算是夯實了。
我剛畢業的時候也是別人都用table， 我自學了div+css，然後跳過各種不兼容，全部瀏覽器都自動適用， 感覺自己特牛。
後面結婚生小孩耽誤四年，再找工作發現全部都變了，ie6是測底不要管了，
可是手機端的各種版本也是多到你想死，我滴心真的是累醉了，現在三十歲還在努力學h5謀生，要哭暈在廁所了。
html+js（es+dom+bom）+css。包括html5新特性還有css3。pc瀏覽器兼容性。自適應網頁。還有懂一門框架這算基礎
推薦閱讀：