各位讀者大家好，我是自學代碼的小張，在這裡與大家分享自學經驗和一些建議，專攻html，div+css，javascript，jquery，ajax，java，php，還有一其它的一些前端框架。小張也是自學，有不足的地方還望大家不吝賜教~~感謝支持！
在html中有兩種方式布局<table>表格和<div>，個人劇的使用表格布局可以避免bug產生，並且表格布局相對來說要容易一些，只是布局方式比較繁瑣，用戶在加載時如果嵌套表格過多會造成加載過慢的現象，容易影響用戶體驗。<div>布局呈現的效果多，可以與表格搭配使用，重點是在布局過程中注意<div>的特性，還有定位問題，剛開始使用它的時候，怎麼也避免不了一些錯位，定位上的bug。問題1：<div>的特性，默認佔一整行，在布局過成功不可忽視的特性，需要配合浮動float來配合使用問題2：使用float屬性可以讓多個<div>強制到一行，取消了它獨自享有一行的特性。例如 一個外層div嵌套了兩個div#div{width:100px;height:100px;}#div1{width:10px;height:10px;}#div2{width:10px;height:10px;}那麼他的呈現形勢是這樣的，
因為有佔正行的特性，這時候我們給兩個小div加上float屬性}#div1{width:10px;height:10px;float:left;}#div2{width:10px;height:10px;float:left;}就會呈現出這樣的效果，
right有浮動同理再就是如果兩個浮動中的div寬度總和超出了父級div的寬度，那麼後者浮動的會自動浮動到下一行，
因為這一行裝不下問題3:<div>的position屬性，控制div的定位有三種常用的屬性，絕對定位，相對定位，根據瀏覽器定位絕對定位 position：absolute; 對於body而言 效果優先於普通的margin寫法#div{width:100px;height:100px;position:absolute;left:100px;}那麼這個div接下來回根據body向右邊移動100像素。還有top，right，bottom同理相對定位 position：relative; 相對於當前位置移動了了幾個像素，當前位置div1嵌套在div中，那麼移動div1的位置就不是根據body了，而是在div中移動。漂浮 position ：fixed; 相對於瀏覽器顯示頁面而言的的定位，此屬性設置好了一後，會永遠定在此位置，有滾動條也是如此。
問題4：div塌陷
先說一下什麼是div塌陷
父級div中嵌套了一個子div，然後子div設置了margin-top：10px，那麼父級div也會被帶跑10px，這就是塌陷。
解決方法：父級div設置overflow: hidden;超出隱藏即可。
最後：頁面布局之後，為了適應不同解析度的用戶使用，防止解析度變換造成的錯位等問題，可以在每一個大的內容div外邊套一個div高度不設置，寬度為100%，這樣就算裡面的div高寬設死了也不會發生太大的錯位。