例如，如果你想要將頁(yè)面整體向左移動(dòng)10像素，你可以使用以下CSS代碼css body marginleft 10px 負(fù)值表示向左移動(dòng) * 或者，你也可以使用`transform`屬性來(lái)實(shí)現(xiàn)相同的效果css body transform translateX 負(fù)值表示向左移動(dòng) * 這兩種方法都可以達(dá)到將頁(yè)面整體向左移動(dòng)的目的使。

1新建html文件2創(chuàng)建兩個(gè)div，并賦予id3為兩個(gè)div設(shè)置寬高和背景，并設(shè)置左右浮動(dòng)4預(yù)覽效果如圖5創(chuàng)建第三個(gè)div6為第三個(gè)div設(shè)置寬高和背景7預(yù)覽效果如圖注意事項(xiàng)隨著HTML的成長(zhǎng)，為了滿(mǎn)足頁(yè)面設(shè)計(jì)者的要求，HTML添加了很多顯示功能但是隨著這些功能的增加，HTML變的越。

使用relative定位時(shí)，元素將保持在它原本的位置，然后通過(guò)leftrighttopbottom屬性進(jìn)行偏移例如，要讓一個(gè)id為mybox的元素向左偏移20像素向上偏移20像素，可以這樣設(shè)置CSS代碼#myboxpositionrelativeleft20pxtop20px 這樣，mybox元素就會(huì)相對(duì)于其原始位置移動(dòng)，但仍然占據(jù)原來(lái)的空間。

使用 float 屬性可以將元素向左或向右移動(dòng)，從而使其他元素圍繞它排列通常，float 主要用于圖像布局，使文本能夠環(huán)繞圖像顯示例如，一個(gè)寬度為200px高度為200px的 div 元素，通過(guò)設(shè)置 float 屬性為 left，可以使多個(gè)這樣的 div 元素在同一行并排顯示，效果如同下面的代碼所示css div width。

如果把所有三個(gè)框都向左移動(dòng)，那么框 1 向左浮動(dòng)直到碰到包含框，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框如下圖所示，如果包含框太窄，無(wú)法容納水平排列的三個(gè)浮動(dòng)元素，那么其它浮動(dòng)塊向下移動(dòng)，直到有足夠的空間如果浮動(dòng)元素的高度不同，那么當(dāng)它們向下移動(dòng)時(shí)可能被其它浮動(dòng)元素“卡住”CSS。

我們需要先了解下positionrelative屬性，它是指leftrighttopbottom等中的偏移位置我們可以讓ul為positionrelativeleft50%，再讓li向左浮動(dòng)，再讓positionrelativeright50%或者left50%，那么li就會(huì)向中間浮動(dòng)一樣居中了不相信的可把下面的CSS定義結(jié)合上邊的代碼拷貝到HTML測(cè)試view。

首先，relative屬性使元素相對(duì)于其原始位置偏移如在代碼示例中，如果給#sub1設(shè)置position relative，它會(huì)根據(jù)top， left等屬性相對(duì)于自身位置進(jìn)行偏移，而不影響#sub2的位置sub1的偏移基于其margin的左上側(cè)absolute屬性則有所不同，元素會(huì)脫離文檔流，根據(jù)最近的具有position屬性的祖先元素可能是。

left50% marginleft512px zindex1這三個(gè)定義在foot中，目的是使foot在瀏覽器中水平居中顯示原理對(duì)齊瀏覽器的中心點(diǎn)與foot的中心點(diǎn)，這樣就使得foot在瀏覽器中水平居中了left50% 使foot距離瀏覽器左邊50%，即一半marginleft512px 使foot向左移動(dòng)512像素。

你是想把div緊貼中間區(qū)域吧，然后你再你的22寸顯示器上設(shè)置了一個(gè)固定的right，而fixed是距離瀏覽器邊緣的，你要是把你的22寸的瀏覽器改下窗口大小，一樣會(huì)出問(wèn)題，你需要做的是用js計(jì)算出距離瀏覽器邊緣的距離，然后用js設(shè)置left或者right值，當(dāng)瀏覽器觸發(fā)resize方法的時(shí)候重新計(jì)算。

我話少，直接上代碼，html代碼比較亂，主要為了產(chǎn)生垂直滾動(dòng)條，看js就Ok了，jqueryjs自行下載，就不提供了，soeasy！其實(shí)說(shuō)白了就是控制這個(gè)p的垂直滾動(dòng)條的偏移，這里回到頂部，所以就設(shè)置成0順帶著也把頁(yè)面的垂直滾動(dòng)條也移到了最頂端CSS+DIV做滑動(dòng)門(mén)菜單，和TAB式選項(xiàng)卡菜單，要詳細(xì)步驟你。

absolute則是偏移其有relative屬性或者fixed屬性的父元素XX距離，沒(méi)有則相對(duì)于窗口偏移例子1 這樣圖片就可以相對(duì)于，父元素div左偏移20px ，頂部偏移20px如果div沒(méi)有relative屬性，則相對(duì)窗口body偏移20px。

在CSS中，“position relative”是設(shè)置定位類(lèi)型為相對(duì)定位，它可以配合“top”“bottom”“l(fā)eft”“right”這4個(gè)偏移量來(lái)實(shí)現(xiàn)相對(duì)它所屬父元素的相對(duì)定位position屬性規(guī)定元素的定位類(lèi)型，這個(gè)屬性定義建立元素布局所用的定位機(jī)制任何元素都可以定位，不過(guò)絕對(duì)或固定元素會(huì)生成一個(gè)塊級(jí)框，而不論。

top距離頂部的距離left距離左側(cè)的距離css的left和top屬性指的是距最近的一個(gè)position屬性為relative或者absolute的父級(jí)元素的左邊或上邊的距離，所以當(dāng)要設(shè)置css的top和left的屬性時(shí)，一定要確保定義position為absolute或者relative如果父級(jí)屬性未設(shè)置position則默認(rèn)為bodyleft和top的使用必須伴隨。

marginleft 10px`，元素可以向左偏移這種技巧在實(shí)現(xiàn)特殊布局時(shí)非常實(shí)用總之，理解并靈活運(yùn)用margin和padding，能夠讓你的網(wǎng)頁(yè)設(shè)計(jì)更加精細(xì)，增強(qiáng)頁(yè)面的視覺(jué)效果和用戶(hù)體驗(yàn)無(wú)論是控制元素間的間距，還是調(diào)整內(nèi)容與邊框的關(guān)系，都是提升頁(yè)面布局美觀度的關(guān)鍵步驟通過(guò)CSS，你可以輕松實(shí)現(xiàn)這些目標(biāo)。

對(duì)于尺子的寬度，需要考慮兩側(cè)的偏移，因此為屏幕寬度加上尺子的總寬度數(shù)字標(biāo)簽部分的計(jì)算更復(fù)雜，需要確保顯示時(shí)的精度若希望顯示中刻度的數(shù)字，將代碼中的10改為5，即可動(dòng)態(tài)調(diào)整尺子的長(zhǎng)度和顯示范圍為了實(shí)現(xiàn)尺子組件的交互體驗(yàn)和性能優(yōu)化，需要考慮滑動(dòng)時(shí)的慣性和越界后的橡皮筋特效通過(guò)CSS的過(guò)渡。

right 屬性規(guī)定元素的右邊緣該屬性定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移注釋如果 quotpositionquot 屬性的值為 quotstaticquot，那么設(shè)置 quotrightquot 屬性不會(huì)產(chǎn)生任何效果內(nèi)容來(lái)至w3c的css參考手冊(cè)元素的position屬性默認(rèn)值是static，可以修改position為absolute。