網頁使用div+css排版的一些小技巧

現在網站技術已經非常成熟了，基本上90%的網頁已經完全拋棄了table排版布局，但一些新手使用div+css還可能存在這樣那樣的問題，我們以下介紹一些div+css的使用小方法。

第一：網頁版塊水平居中
css中使用*{padding:0px;margin:0px;｝定義整體居中，然后在標簽的屬性中使用 style="margin:auto;"。

第二：內容居中：設置標簽的style屬性，text-align:left內容靠左對齊，text-align:right右對齊，text-align:center居中對齊。

第三：設置邊框需要注意
一般在設置一個區域塊四邊線為1時，如果你的div塊寬度設置的是500,那你加上border: 1px solid #CBDDE1;這個寬度以后會根據瀏覽器不同而出現兩種情況，一種是還是500，另一種是502，這樣的話就可能造成你的總體寬度不夠導致版塊錯位，這也是一些網頁經常會在不同瀏覽器顯示的效果不同的原因，正確的做法是做一個div寬度設置成500,然后在其中嵌套一個div，把這個加上加上border: 1px solid #CBDDE1;，代碼如下：

【div style="width:500px;border: 1px solid #CBDDE1;"】 內容  【/div】
改成
【div style="width:500px;"】

【div style="border: 1px solid #CBDDE1;"】
 內容區
【/div】

【/div】

注：復制測試的時候請把【】換成<和>

第四：div使用float:left浮動屬性會出現他的父div內容塊大小不會自動改變，這種情況只要在使用float以后加上clear:both就可以解決。

第五：單行內容在div垂直居中，設置一個div高度為50,那只需要再設置一個行高50就可以，例： style="height:50px; line-height:50px;"

第六：設置整體的布局浮動塊的時候不同瀏覽器也有可能會造成錯位，一般在網頁上需要劃分左右列的時候可以在使用float:left屬性中加上display:inline;。

.......

一般使用div+css排版的時候會出現各種問題，只要制作人員心平去和的去思考總會解決的，有解決不了的可以聯系我們技術人員尋求幫助。

新聞標題：網頁使用div+css排版的一些小技巧
網站地址：http://m.kartarina.com/news35/115235.html

成都網站建設公司_創新互聯，為您提供品牌網站設計、網站設計公司、小程序開發、網站導航、搜索引擎優化、定制網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯