DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局基本知識 >> css left right top bottom
css left right top bottom
編輯:布局基本知識     

 

DIV CSS left right top bottom定位

這四個CSS屬性樣式用於定位對象盒子,必須定義position屬性值為absolute或者relative此取值方可生效。

一、語法結構

Left、right、top、bottom後跟數字+html單位。

示范結構

div{left:20px}
div{right:20px}
div{top:20px}
div{bottom:20px}

Left 靠左距離多少
Right 靠右邊距離多少
Top 距離頂部距離多少
Bottom距離下邊距離多少

二、使用條件

通常單獨使用left、right、top、bottom均無效,需要在使用絕對定位CSS position樣式才能生效。

一般left和right在一個樣式是只能使用其一,不能left和right都設置,要麼使用left就不使用right,要麼使用right就不使用left,如果left和right均使用將會出現兼容問題,一個對象設置了靠左left多少距離,自然右邊距離自然就有了所以無需設置左邊。

相同道理,top和bottom對一個對象只能使用其一,不然會出現邏輯兼容問題。譬如一個人讓你往左走,一個人讓你往右走,同時發出往左往右走這個時候你也不好判斷往那邊走。

三、絕對定位中使用

一般left、right、top、bottom使用於配合position定位對象位置。大家可以進入CSS position教程篇了解學習這些樣式屬性。

擴展閱讀:
Position:absolute
Position:relative

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved