總結css中常見的四個定位屬性（left right top bottom）

DIV CSS left right top bottom定位這四個CSS屬性樣式用於定位對象盒子，必須定義position屬性值為absolute或者relative。

Left 當前元素的左側與父元素左側(就是原來預設位置)的距離值。

Right 當前元素的右側與父元素右側的距離值。

Top 當前對象頂部距離原位置頂部距離多少。

Bottom 當前對象底部距離原位置距離多少。

一. CSS中left屬性

1. CSS中left屬性詳細介紹

定義和用法

left 屬性規定元素的左邊緣。該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的位移。

注釋：如果 "position" 屬性的值為 "static"，那麼設定 "left" 屬性不會產生任何效果。

2. 詳細介紹CSS之三欄布局的執行個體（圖）

通過float left 和相對width實現

絕對位置，通過absolute 定位使其脫離文檔流，可以自適應定義三欄寬度

使用自身浮動，float left 和float right

3. div中offsetLeft與style.left的區別

clientX 事件屬性返回當事件被觸發時滑鼠指標向對於瀏覽器頁面（或客戶區）的水平座標。
客戶區指的是當前視窗。
如果父p的position定義為relative,子p的position定義為absolute，那麼子p的style.left的值是相對於父p的值，這同offsetLeft是相同的

4. div的float:left與span標籤

區別在於，p?是一個塊級(block-level)元素，它包圍的元素會自動換行。而span僅僅是一個行內元素(inline element)，在它的前後不會換行。沒有結構上的意義，純粹是應用樣式，當其他行內元素都不合適時，就可以使用元素。需要注意的是，標記可以包含於標記之中，成為他的子項目，而反過來則不成立

二. CSS中right屬性

1. CSS border-right-style屬性設定元素的右邊框樣式

CSS border-right-style屬性設定元素的右邊框樣式

邊框的樣式指的是邊框的線條屬性，指的是邊框採用的是實線效果、短線效果還是其它的線條效果。

border-right-style屬性設定的是某一元素的右邊框的樣式。

2. margin-right 不起作用？_html/css_WEB-ITnose

瀏覽器預設從左往右渲染元素，在沒有超出父容器的寬度的前提下 如果子容器的寬度能夠被容納 設定margin-right是沒有用的

3. css margin-left和margin-right使用方法總結

一般在css樣式中，使用margin屬性來設定外邊距。如果只需要一邊的外邊距，可以使用單邊外邊距屬性為元素單邊上的外邊距設定值。使用 margin-left 屬性設定元素的左外邊距。使用margin-right 屬性設定元素的右外邊距。它們的預設值都為0。在具體的實際使用中可以設定具體的單位值，也可以設定為百分比的形式。本文就來總結一下 margin-left 和 margin-right 的使用方式。

三. CSS中bottom屬性

1. 使用CSS實現Footer置底的五種方式介紹

頁尾置底（Sticky footer）就是讓網頁的footer部分始終在瀏覽器視窗的底部。

當網頁內容足夠長以至超出瀏覽器可視高度時，頁尾會隨著內容被推到網頁底部；但如果網頁內容不夠長，置底的頁尾就會保持在瀏覽器視窗底部。

2. css border-bottom（指定下邊線的樣式、寬度及顏色）

border-bottom屬性用於指定下邊線的樣式、寬度及顏色，值之間用半形空格間隔，沒有先後順序。

關於border-bottom屬性的樣式的值，具體可參照邊線的樣式。邊線的寬度的值，具體可參照邊線的寬度

3. IE6下margin-bottom設定負數被隱藏的問題_html/css_WEB-ITnose

可是在IE6中當前選項卡的底邊框不會蓋住父級元素的底邊框，網上說父級元素要出發haslaytout，試了都不行，最後在選項卡元素中同時設定 margin-bottom:-1px; position:relative; 這樣才解決問題。

這裡要注意的是：選項卡元素的高度必須必父級元素高度大1px。

四. CSS中top屬性

1. css margin-top使用中經常遇到的問題總結

在css樣式中，margin-top 屬性設定元素的上外邊距。它可以允許使用負值。預設定義固定的上外邊距的值是 0。所有主流瀏覽器都支援 margin-top 屬性。通過本文我們來具體的說一說在前端頁面中使用margin-top 屬性經常遇到的一些問題，如設定後影響到了父元素怎麼辦？使用了margin-top 屬性沒有起作用該如何解決？等等

2. 探究CSS中border-top屬性的使用

這節關於CSS border-top屬性用法學習起來就會輕鬆一些，border-top 簡寫屬性把上邊框的所有屬性設定到一個聲明中。

本文向大家描述一下CSS border-top屬性的用法，border-top 簡寫屬性把上邊框的所有屬性設定到一個聲明中，相信本文介紹一定會讓你有所收穫的

3. CSS3 border-top-left-radius屬性

主要是向 div 元素的四個角添加圓角邊框：

注意： border-top-left-radius屬性的兩個長度或百分比值定義了橢圓的四分之一外邊框的邊緣角落的形狀。第一個值是水平半徑，第二個是垂直半徑。省略第二個值，它是從第一個複製。如果任一長度為零，角落裡是方的，不圓潤。水平半徑的百分比是指邊界框的寬度，而垂直半徑的百分比是指邊界框的高度。

定位屬性（left right top bottom）的相關問答：

1. css - 滑鼠右鍵顯示的彈窗absolute， left跟top為滑鼠點擊的clientX、Y ，在ie中bottom為auto

2. css - 關於offsetLeft和offsetTop

3. css - 在iphone瀏覽器中，當input type 為 date時，text-align:right 屬性不生效

4. html - 請教margin-top問題

【相關推薦】：

1. 彈指間學會CSS視頻教程

2. 一個css，求解釋；不懂left：900em和left：auto_html/css_WEB-ITnos

3. 利用CSS定位背景圖片的常用方法總結