標籤：對齊 水平 多行 保留 class 地方 支援 現象 填充
現在來說相對定位：如果想為元素設定層模型中的相對定位，需要設定position:relaive（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中便宜位置。相對定位完成的過程是首先按static(float)方式產生一個元素（並且元素像層一樣浮動了起來），然後相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，位移前的位置保留不動。那麼，什麼叫“位移前的位置保留不動呢？”就是div元素相對於以前的位置產生位移，但是div元素以前的位置還保留著，所以在div元素裡面的標籤內的東西是不會偏離的。說簡單點就是原來div裡面比如有一段文字，文字是不會動的，只是動div。第三種是固定定位：fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的座標是視圖（螢幕內的網頁視窗）本身。由於視圖本身是固定的，它不會隨瀏覽器視窗的捲軸滾動而變化，除非你在螢幕中行動瀏覽器視窗的螢幕位置，或改變瀏覽器視窗的顯示大小，因此固定定位的元素會始終位於瀏覽器視窗內視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed;屬性功能相同。這個官方意思說的太複雜，要我說就是你們看的某些網站上面有一些什麼蒲亭啦等等賭博類型廣告在左右側，你還無法關閉的那種東西。明白了嘛？/斜眼笑學了絕對定義的方法：使用position:absolute可以實現被設定元素相對於瀏覽器（body）設定定位以後，有沒有想過可不可以相對於其他元素進行定位呢？答案是肯定的。但是使用position:relative來幫忙，但是必須要遵循幾個規範：1、參照定位的元素必須是相對定位元素的前輩元素：<div id="box1"><!--參照定位的元素--> <div id="box2">相對參照元素進行定位</div><!==相對定位元素--></div>從上面可以看出box1是box2的父元素（父元素當然是前輩元素了）2、參照定位的元素必須加入position:relative;#box1{ width:200px; height:200px; position:relative;}3、定位元素加入position:absolute，便可以使用top、bottom、left、right進行位移定位了。#box2{ position:absolute; top:20px; left:30px;}這樣box2就可以相對於父元素box1定位了（這裡注意參照物就可以不是瀏覽器了而可以自由設定了。）這裡一定要記住前後呼應，子項目要參照父元素的標準，所以父元素是參照物，一定要加position:relative;子項目中要加position:absolute;然後容易錯的地方就是寫html的時候，沒有把子項目放在父元素中去，那麼就不能稱之為父元素和子項目了。然後我們來接著上面的說一下簡寫，這樣做有個好處，就是縮減頻寬，減少資源佔用。盒子模型中記得是什麼樣的嗎？上(top)右(right)下(bottom)左(left)如：margin:10px 15px 12px 14px;/*上設定為10px 右設定為15px 下設定為12px 左設定為14px*/通常有下面三種縮寫方法：1、如果top、right、bottom、left值相同，如：margin:10px 10px 10px 10px;可以縮寫為：margin:10px;2、如果top和bottom相同，right和left相同，如：margin:10px 20px 10px 20px;可以縮寫為：10px 20px;3、如果left和right相同，如：margin:10px 20px 30px 20px;可以縮寫為：margin:10px 20px 30px;注意：padding、border的縮寫方法和margin是一致的。再注意一點啊：padding（拍腚）的意思是裡面的內容到邊框的距離又稱之為填充物！margin（媽個鷹）是在外面的！是包含整個的！border（包的）就是邊框！包起來的！然後說顏色值縮寫。這個嘛。。。找w3cschool慢慢查。。。我這個真不好寫。接著說字型縮寫，網頁中的字型css樣式代碼也有他自己的縮寫方式，具體百度。然後說長度值，這裡要總結一下，常用到的px（像素）、em、%百分比，要注意其實這三中單位都是相對單位。1、像素像素為什麼是相對單位呢？因為像素指的是顯示器上的小點（css規範中假設"90px=1英寸"）實際情況是瀏覽器會使用顯示器的實際像素值有關，在目前大多數的設計者都傾向於使用像素(px)作為單位2、em就是本元素給定字型的font-size值，如果元素的font-size為14px，那麼1em=14px；如果font-size為18px，那麼1em=18px。如下：p{font-size=12px;text-indent:2em;}這行代碼就是可以實現段落首行縮排24px（也就是兩個字型大小的距離）注意一個情況：當font-size設定單位為em時，此時計算的標準以p的父元素的font-size為基礎。如：html:<p>以這個<span>例子</span>為例。</p>css:p{font-size:14px}span{font-size:0.8em;}結果span中的字型“例子”字型大小就為11.2px(14*0.8=11.2px)3、百分比p{font-size:12px;line-height:130%}設定行高（行間距）為字型的130%（12*1.3=15.6px）我們實際工作中常會遇到需要設定水平置中的情境，比如為了美觀，文章的標題一般都是水平置中顯示的。這裡我們又得分兩種情況：行內元素還是塊狀元素，塊狀元素裡面又分為定寬塊狀元素以及不定寬塊狀元素。我們來瞭解一下行內元素怎麼進行水平置中？如果被設定元素為文本、圖片等行內元素時，水平置中是通過給父元素設定一行代碼:text-algin:center來實現的。但是當被設定元素為塊狀元素時用：text-align:center就不起作用啦，這時也分兩種情況：定寬塊狀元素和不定寬塊狀元素。頂寬塊狀元素的情況是滿足頂寬和塊狀兩個條件的元素是可以通過設定"左右margin"值為"auto"來實現置中的。如：html:<body><div>我是頂寬塊狀元素，要水平置中。</div></body>css:<style>div{ border:1px solid red;/*為了顯示置中效果，設定div邊框*/ width:200px;/*定寬*/ margin:20px auto/*margin-left與margin-right設定為auto*/}</style>也可以寫成：margin-left:auto;margin-right:auto;注意：元素的"上下margin"是可以隨意設定的。在實際工作中我們會遇到需要為"不定寬度的塊狀元素"設定置中，比如網頁上的分頁導航，因為分頁的數量是不確定的，所以我們不能通過設定寬度來顯示它的彈性（不定塊狀元素：塊狀元素的寬度width不固定）不定寬度的塊狀元素有三種方法置中（這三種方法目前使用都比較多）：1、加入table標籤2、設定display:inline方法與第一種類似，顯示類型設為行內元素，進行不定寬元素的屬性設定3、設定position:relative和left:50%：利用相對定位的方式，將元素向左位移50%即達到置中的目的。先講一下第一種，為什麼選擇方法--加入table標籤？是利用table標籤的長度自適應性--即不定義其長度也不預設父元素body長度（table其長度根據其文本長度決定）因此可以看做一個定寬度快元素，然後再利用定寬度塊狀置中的margin方法，使其水平置中。第一步：為需要設定的置中的元素外面加入一個table標籤（包括<tbody>、<tr>、<td>）第二步：為這個table設定左右margin置中（這個和定寬塊狀元素方法一樣）第二種方法是改變元素的display類型為行內元素，利用其屬性直接設定。改變區塊層級元素的display為inline類型（設定為行內元素顯示）然後使用text-align:center來實現置中效果。html:<body><div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul></body>css:.container{ text-align:center;}/*margin:0;padding:0（消除文本與div邊框之間的間隙）*/.container ul{ list-style:none; margin:0; padding:0; display:inline;}.container li{ margin-right:8px; display:inline;}這種方法相比第一種方法的優勢是不用增加無語義標籤，但也存在著一些問題：它將塊狀元素的display類型改為inline，變成了行內元素，所以少了一些功能，比如設定長度值。除了插入table以及改變元素的display類型，可以使不定寬塊狀元素水平置中之外還有第三種方法，設定浮動和相對定位來實現。通過給弗雷元素設定float，然後給父元素設定position:relative和left:50%子項目設定position:relative和left:-50%來實現水平置中。我們可以這樣理解：假想ul層（下面例子的div層）的浮層中間有條平分線將ul層的父層（div層）平均分為兩份，ul層的css代碼是將ul層的最左端與ul層的父層（div層）的平分線對齊；而li層的css代碼則是將li層的平分線與ul層的最左端（也是div層的平分線）對齊，從而實現li層的置中。代碼如下：html:<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div></body>css:<style>.container{ float:left; position:relative; left:50%}.container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%;}.container li{float:left;display:inline;margin-right:8px;}</style>我們在實際工作中也會遇到需要設定垂直置中的情境，比如很多保值和文章標題左右一側時，常常會設定為垂直置中，為了使用者體驗性好。然後這裡又得分為兩種情況：父元素高度確定的單行文本以及父元素高度確定的多行文本。父元素高度確定的單行文本的豎直置中的方法是通過設定父元素的height和line-height高度一致來實現的。（height:該元素的高度，line-height:顧名思義，行高，又稱行間距，指在文本中，行與行之間的基準間的距離。）line-height與font-size的計算值之差，在css中稱為"行間距"。分為兩半，分別加到一個文本行內容的頂部和底部。這種文字行高與塊高一致帶來一個弊端，當文字內容的長度大於塊的寬時，就有內容脫離了塊。如：<div class=""container> hi,baby!</div>css:<style>.container{ height:100px; line-height:100px; background:#999;}</style>父元素高度確定的多行文本、圖片等的豎直置中的方法有兩種：方法一：使用插入table（包括tbody、tr、td）標籤，同時設定vertical-align:middlecss中有一個用於豎直置中的屬性vertical-align，在父元素設定此樣式時，會對inline-block類型的子項目都有用。如：html:<body><table><tbody><tr><td class="wrap"><div> <p>看我是否置中</p></div></td></tr></tbody></table></body>css:table td{height:50px;background:#ccc}因為td標籤預設情況下就預設設定了vertical-align為middle，所以我們不需要顯式的設定了。除了table標籤還有一種，我就不細說了，因為相容性比較差。做前端最重要的一點就是相容性的問題。ie6，ie7不支援的東西就拉倒了。最後說一點，隱性改變display類型。有一個有趣的現象就是當元素（不論之前是什麼類型的元素，display:none除外）設定一下2個語句之一：1、position:absolute 2、float:left或float:right簡單點來說，只要html代碼中出現以上兩句之一，元素的display顯示類型就會自動變為以display:inline0-block（塊狀元素）的方式顯示，當然就可以設定元素的width和height了，且預設寬度不佔滿父元素。如下，都知道a標籤是行內元素，所以設定它的width是沒有效果的，但是設定為position:absolute（絕對位置）以後就可以了。html:<div class="container"> <a href="#" title="">進入</a></div>css:<style>.container a{ position:absolute; width:200px; background:#ccc;}</style>如果想不起來display:line-block是什麼的可以回頭看看"元素分類-內聯塊狀元素"到這裡，css的一些基礎方面知識就說的差不多了。希望各位記住一點，一定要端正自己的態度，態度決定高度。一定不能眼高手低，不然會跟我一樣吃了很多很多虧才好不容易繞回來。css基礎和心得（四）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
