總結css中常見的四個定位屬性（leftrighttopbottom）

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定位背景圖片的常用方法總結

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com