學了html和css，但是自己做靜態網頁布局的能力很差不知道怎麼提升？

01-14

感覺很多東西知識，知道這個東西到時具體很多東西不理解，比如用一個a標籤包住一個img標籤，然後添給img設置寬高後加入一張圖片，那麼此時a標籤的大小是由img決定了嗎？

超級大量的練習，然後你就會發現類似這樣的非常多的問題，逐步了解規範和渲染機制，你就會明白這一切效果的原因。經過超大量的練習，你最後會發現遇到某個效果莫名其妙的就寫出來了。當時我做外包就切了幾十個網站。。。

分清什麼是知識，什麼是能力，樓主說的「學了html和css」，那個是知識，後面，樓主自己也說了「能力」。知識可以通過書本學習，而能力是練出來了，so， @於江水說的對，多練吧

使用谷歌瀏覽器+F12，可以驗證你遇到的疑問。

下圖，很明顯 A 標籤是一個行內元素，不會被裡面的圖片撐開（如果裡面包含了 h1~6等塊元素標籤，就會被撐開），它的高度是16px，為什麼呢，因為這是我在谷歌瀏覽器里打開的，默認文本大小是16px，下圖：

看，把font-size改成12px，高度就變成12px了。

當你把 A 標籤變成 塊元素 時，才會被裡面的圖片撐開，這時你又會發現一個問題：圖片高度明明是300px，為什麼 A 標籤的高度會變成303px呢？

又有一個瀏覽器默認的文本行高了，把行高改小後，就跟原來的圖片一樣高了。

（這個問題我也是為了回答這個問題才發現的，答主我也是在學習的路上）

很多東西不明白，就改一改，到瀏覽器一看，一目了然。看一看，你又會發現更多你不知道的東西。以上。

@水秋玄後來遇到的問題，啊，是個坑（壞笑

一點背景知識，你隨便找個西文 typography glossary 的圖（比如這裡：Glossary），圖上會給你畫一條叫 baseline 的線。所有字母，除 descender 部分，都是照著這條線對齊。瀏覽器的排版，默認會把圖片照著 baseline 對齊，所以下面多出來的一點空間相當於文字的 descender。

你可以給圖片添加一條

vertical-align: bottom;

來蓋掉這條默認規則。效果見 Edit fiddle - JSFiddle

靜態網頁布局沒什麼好搞的，高興上 Material Design Lite，不高興上 Bootstrap，人家都幫你搞好了，照著人家的 demo 寫就好。

或者你就是想看看 CSS 布局，看這個：Learn CSS Layout

建議詳細讀下CSS2.1標準，以下內容是在阿里實習期間，主管給的團隊分享任務，選了CSS2.1標準這個方向，經過兩周多細緻研讀，對CSS傳統布局的粗糙理解，隨意而寫，多有疏漏，湊合著看。

CSS2.0/2.1傳統布局圍繞display/position/float三個屬性

理解CSS傳統布局首先要有『普通流』和『脫離普通流』的概念。

普通流遵循塊元素從上到下，行內/行內塊元素從左到右布局(direction默認模式下)。

display所有屬性都屬於『普通流』，父元素靠子元素撐起，其高度靠子元素高度遞歸計算得到，所以『普通流』中子元素繼承沒有明確指定高度的父元素會導致計算死循環(父依賴子，子繼承父)，通常有人不管父元素有沒有高度，子元素就去100%繼承，是對這塊理解不夠深刻。

題主問的img屬於『普通流』中的內聯格式化上下文的布局規則，行內布局遵循baseline對齊規則，而且由於代碼格式化編輯會導致HTML標籤間充斥著空白字元，例如空格、tab、回車、換行等，這些空白字元會受字體渲染具有一定寬度，因此行內元素不僅距下有一定距離，行內元素之間也有一定的間距，而這些間距的大小受font-size和line-height影響。

『普通流』塊元素之間的布局，又會導致相鄰（上下相鄰兄弟，相鄰父子）元素外邊距摺疊計算(margin collapse)。

因此，普通流的布局無非是『壘磚塊，蓋房子』。

而position非static會形成層疊上下文，供absolute/fixed元素定位參考，非標準（低版本IE），對層疊上下文有不同定義，例如對無明確指定z-index只指定position非static屬性的元素也形成層疊上下文，會導致一些BUG。

float非none會『脫離普通流』，浮動到包含容器的左右邊界，造成文字環繞，標準里稱之為『浮動會擠掉普通流中行框的寬度』，BFC可解決此類問題。

而float由於『脫離普通流』，會導致父元素高度『塌陷』，因此需要『閉合浮動』。

又由於float具有『擠掉普通流中行框的寬度』這一特性，非常適合做多列自適應布局，當然，新標準的flex和grid更合適。

CSS標準中會有很多『上下文』的概念，元素屬於某個上下文，就要遵循『上下文』中定義的規則。

例如

層疊上下文中，可以通過z-index指定元素的層疊順序。

塊級格式化上下文（BFC）中元素要遵循外邊距摺疊計算的規則。

內聯格式化上下文（IFC）中元素要遵循從左到右，baseline對齊，的計算等規則。

而表格也有其上下文，包含BFC、IFC以及一些自己的自動計算規則等等。

所有的這些，標準里都有清晰而詳細的描述，花個一兩周，認真鑽研下CSS2.1標準的8、9、10章，相信你對傳統布局會有全新的認識。當然，前提是要有一定基礎。

多實踐，遇到類似的問題自己動手試試，這樣印象更深一點。學了html和css，只是了解了知識點，要熟練靈活的運用還需要多加練習，多看一下別人的網站，是怎麼實現的，自己也可以進行模仿實現，然後進行總結，多次練習可以幫助更好的理解學到的知識。

我之前跟你一樣，感覺學的多，但是輸出不了。後來我就感覺到學習方法有問題。我們只進不出。你可以去慕課網，有三個教程。（Ps 其中有一個網站全部實站，你不用先了解js 與jq 你就看他怎麼寫靜態HTML css 的他們會一步步教你怎麼怎麼做，然後你就可以學以致用。做了這三個後，就可以自己去找網站，然後不會了就f 12 看那個網站的前端人員怎麼做的，他是怎麼定位，以及浮動的。（個人推薦，做一個電商，一個H5 我比較喜歡圖多的網站，電商看著太冗餘。不過還是必須要靠電商練手的）另外不要在單純的把切圖認為是從ps 裡邊導出圖片。對於我們前端來說切圖就是將圖放在網上，也就是還原設計稿。當然，這只是我們的開始，接下來還有js 以及各個框架庫。不過真的很有意思，現在微信小程序也出了，對於我們前端也算是一種新的機遇吧，加油。這裡是雞湯，有什麼不懂的，可以私信我。

學得多，做得少。多練，最好找一個小的項目（比如為自己寫一個靜態博客頁面）練習的過程中會更好的理解學習到的知識。

不請自來。我也是過來人。唯一可以提升的方式只有多敲代碼。別無他法。當初也是都知道了這些標籤是幹什麼用的。但要真正寫一個網頁根本不知道該如何下手。後來經過大量練習。仿站。對這些就自然而然掌握了。所以說。這是每個初學者都會遇到的問題。請不要感到灰心。努力總會成功。祝福你！

做大量的練習，多看一些經典的書籍，嘗試去模仿一些頁面。

現在JS能實現的一些功能，CSS也可以實現呀。

大量的練習，總結，然後寫成博文，

這樣進步會很大

本人一直干編程的，奈何公司人事不穩定，唯一的美工撤出陣地了，無奈還得我扛起大旗，半路出家臨時學的網頁布局，半個月就學會了，形成生產力。

我的經驗就是大量的練習，從大的板塊布局開始，然後在往小的寫。遇到的每一個問題研究透他，弄懂原因和解決辦法，很快就能做實際的項目。

多練習就知道了，行內元素沒有height的，所以不會被img撐開可以自己嘗試著仿京東淘寶什麼的網站，單純靜態頁面就行。想不到怎麼布局可以F22看看別人是怎麼寫的參考下再按照自己的理解寫。仿一輪下來很多自己以前不知道的概念都會理解的了

html和css雖然可能連語言都不是，但是遇到各種問題遊刃有餘還真需要一定的時間，多練習，多模範，多看書…

有沒有好點的網站可以練習靜態頁面啊？求大神告知。

同新手開始學，有興趣加好友一起學。

樓主也是剛剛學這個嗎，很巧我最近把html+css看完，感覺懂一點，

興趣很重要吧，

同時給你自己定製一個目標，

做個什麼網頁出來，

比如，做一個和QQ導航差不多的頁面

以後html5 css3。。。。。以後那就看你努力啦

學習設計~

沒什麼好的辦法，多謝多練習，可以模仿bat的網站，熟能生巧

多練習，如果沒有實際的工作項目區練習的話，就一定要自己多一點自律性找網站去練習。

最好是主流的門戶網站，這種網站效果比較多，兼容性也很不錯，完整練習一個網站的話，下次寫頁面布局的時候會發現流暢了不少。

當然啦，還是實際工作項目最能鍛煉能力，因為有壓力嘛，壓力會促進你儘快儘力的解決各種bug。

我開始做編程現在做前端，聽過最多的前輩的話就是多練習，這句話聽起來很煩但是不可否認是真理呦~哈哈哈

希望你將來成為一名優秀的前端工程師呦~

槍神是怎麼練出來知道嗎？對子彈喂出來的。學前端也一樣，需要各種實戰項目來寫，來做，才能得心應手。當然，總結和悟性也很重要的。