DIV+css排版問題技巧總結---v客學院技術分享

            DIV+css排版問題技巧總結

一．排版思路

一、從上到下，從左到右，從大到小。

二、首先肯定排版分區，排除色塊分佈，而後再從簡單的部分開始。

三、在某一塊內將HTML部分寫好，再加上ID或CLASS，利用CSS控制。

四、善於利用參考手冊，根據參考手冊的分類進行查找。

 

二．經常使用大類：

 

 

 

三．注意元素樣式的優先級

（1）肯定你指定的是哪一個元素，若是兩個樣式指定的不是同一類元素，並不會發生衝突，即不會有優先級的考慮

（2）在指向同類元素時，沒有後代選擇器的狀況下，id>class>標籤>*

（3）在指向同類元素時，後代選擇器和普通選擇器比較，首先比較後代彙總最早的那個選擇器，若最外層的老大類型相同，後代選擇器更詳細，則會遵循後代選擇器。若類型不相同，則按照（2）判斷其優先級。

如：#center p > #pid

.center p < #pid

（4）同爲後代選擇器，則一級一級的比較，直到能判斷出不一樣類型的優先級爲止。

#center p < #center #pid

 

四．內外邊距，以及盒子模型

 

 

火狐上看，黃色的爲外邊距，深灰色的爲邊框，紫色的爲內邊距，藍色的爲元素內容

利用F12對代碼進行調試，能夠點擊頁面的元素，查看HTML代碼和CSS樣式

 

 

當頁面元素不方便點擊時，也能夠點擊代碼部分，查看所在的位置和樣式

 

有一些經常使用標籤，是自帶內外邊距的。如：body/ul/p/h1-h6。要用到這些標籤的時候，注意觀察內外邊距，通常在一開始就設置爲0.

body,p,ul,h1{margin:0px;padding:0px;}

 

五．切圖

切圖的過程當中，注意調整大小，選擇切片工具，利用alt+鼠標滾輪調整圖片縮放比例，保證邊緣的貼合。Alt+ctrl+shift+s保存切好的圖片，注意右上角的保存格式。

 

六．浮動問題

在HTML中，有不少標籤是默認佔滿全行的，即便規定了寬度，這一行的後面也不會再放東西了。（行內元素）

若是須要兩個DIV並排排列，須要給這兩個DIV都加上浮動，而且在下一個元素將浮動清除。

若是沒有及時清除浮動，可能會形成以後的元素X軸跟在以前某個浮動的元素後面，形成元素的位置混亂。

浮動爲：float:left/right

清除浮動：clear:left/right/both

 

七．內邊距使用時出現的問題，元素位移時出現的問題

當一個元素添加了內邊距，會擴大元素所佔的位置。如：一個元素爲100*100，設置了內邊距padding:10px後，它佔的位置爲120*120；一個元素寬度爲100%，加了內邊距後，會將其整個寬度在100%的基礎上再加一段，形成頁面寬度過大。

 

 

同理，當把這個元素再往右移動若干像素後，總寬度也會隨之發生改變。在實現後，及時檢查，是否出現了大小不正常，寬度不正常，莫名其妙的滾動條等狀況。

 

八．行高

在調整文字的上下居中時，利用line-height屬性，而不是一味的加上內邊距。

處理文字時，儘可能使用文字類的屬性。

 

九．Div圖片居中

當DIV1裏面有一個圖片，須要控制圖片在DIV1內居中時。

（1）在圖片外嵌套一個DIV2，讓DIV2在DIV1內居中。

 

 

 

（2）給DIV1加一個屬性，text-align:center；

 

 

 

十．僞類

各類標籤都有僞類的屬性，爲

選擇器:僞類名

如：a:link {color: #FF0000} /* 未訪問的連接 */

a:visited {color: #00FF00} /* 已訪問的連接 */

a:hover {color: #FF00FF} /* 鼠標移動到連接上 */

a:active {color: #0000FF} /* 選定的連接 */

 

 

十一．改變a標籤的尺寸

必須給a標籤加上display:block的屬性.

改變a標籤的文字顏色和下劃線，屬性必須定義在a標籤，制定外面嵌套或者裏面嵌套別的標籤都不行。

 

 

十二．加邊框

加邊框時，須要注意到隔壁元素的距離，也許你加粗了邊框，可是因爲空間不夠，被其餘元素擋住了。

 

 

十三．頁面分區

注意頁面分區的結構和層次。避免出現標籤的嵌套失誤。從大到小來分，肯定每個區域的位置。

如：有人將#center_left_four放到了#center_right的裏面，卻是整個頁碼就跑到右邊去了。

 

 

十四．表單元素邊框

按鈕類，輸入框類等，會有自帶的邊框，通常咱們不保留其邊框(border:none)，設置本身的樣式。

 

（php開發,web前端，ui設計，vr開發專業培訓機構，v客學院版權全部，轉載請註明出路，謝謝！！！）