①background-position 圖檔位移
應用場景，在實際的生産環境中咱們在網頁上看到的小圖檔不是一個一個的零散的小圖檔的，咱們隻是看到了大圖檔的一部分。比如一個大圖檔，我隻讓他顯示一部分并不全部顯示怎麼做？
可以這麼想：
有一個視窗，你在視窗的一邊，隻能通過視窗來看外面，你不能動，我們可以通過移動這個視窗來讓你看到不同的場景，當然你看到的大小和視窗的大小有關！
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.chuangkou{
/*定義一個圖檔*/
background-image: url('content_images.jpg');
/*定義一個視窗,指定長和寬*/
height: 80px;
width:100px;
/*設定圖檔不重複*/
background-repeat:no-repeat;
background-position: 3px 10px ;
}
</style>
<body>
<div class="chuangkou">
</div>
</body>
</html>
顯示結果:
<a href="http://s2.51cto.com/wyfs02/M02/86/81/wKioL1fBVSnQQ8UCAABVGjNYMQE468.png" target="_blank"></a>
原本圖檔為:
<a href="http://s1.51cto.com/wyfs02/M00/86/81/wKioL1fBVW7jtSK7AACQxsmx3JY102.jpg" target="_blank"></a>
綜合對比，上面的确實隻顯示了圖檔的部分内容，即視窗大小設定後，移動圖檔位置，隻顯示要顯示的部分。
②内外邊距
内邊距，代碼如下：
<div style="background-color: green;height: 200px;">
<div style="margin-left:auto;
margin-right:auto;
background-color:blue;
height:50px;
width:50px;">
</div>
</div>
運作結果如下:
<a href="http://s4.51cto.com/wyfs02/M02/86/87/wKiom1fCrdHxhMbbAABN0XJUlVM990.png" target="_blank"></a>
調整外邊距:
在上面的代碼增加代碼"padding-top: 20p",
<div style="background-color: green;height: 200px;padding-top: 20p;">
重新整理頁面如下:
<a href="http://s2.51cto.com/wyfs02/M00/86/87/wKiom1fCrwrTGa1bAABlwcVQe7g602.png" target="_blank"></a>
同樣還有padding-right,pading-left,padding-bottom,樣式效果分别如下:
<a href="http://s4.51cto.com/wyfs02/M00/86/86/wKioL1fCsIuStDgFAABQGSUNUlU059.png" target="_blank"></a>
<a href="http://s5.51cto.com/wyfs02/M00/86/87/wKiom1fCsPKSP7y2AABTnPzlcck575.png" target="_blank"></a>
<a href="http://s2.51cto.com/wyfs02/M01/86/87/wKiom1fCsnjSZa-oAABd1D_nRpI854.png" target="_blank"></a>
以上表示藍色方塊相對綠色方塊的位置放生變化，實際是在綠色方塊代碼上做的調整，驗證了padding屬性是調整方塊（此處是調整綠色方塊）自身的大小。
下面通過調整藍色方塊代碼進一步示範調整結果:
height:40px;
width:200px;
padding-top: 20px;">
此時在藍色方塊代碼中添加"padding-top: 20px;"代碼
添加padding屬性之前:
<a href="http://s4.51cto.com/wyfs02/M01/86/87/wKioL1fCtGGCD4RTAABNSam_GaM893.png" target="_blank"></a>
相對于增加padding屬性之前，經過對比綠色方塊大小不變，藍色方塊高度變大。
同樣依次将padding-top改為padding-left、padding-right、padding-bottom進行對比，效果依次如下:
<a href="http://s3.51cto.com/wyfs02/M02/86/87/wKiom1fCtfGwAmCIAABQh0JwNfw385.png" target="_blank"></a>
<a href="http://s4.51cto.com/wyfs02/M02/86/87/wKiom1fCtjrAbQixAABPQwc3lag838.png" target="_blank"></a>
還有另外一種屬性margin，其效果是外部方塊大小調整，即外邊距大小的調整，margin有margin-top、margin-right、margin-left、margin-bottom幾種屬性，這裡仍然是以該代碼為例，對外方塊大小調整進行示範,原始代碼如下:
width:200px;">
添加margin屬性之前顯示如下:
<a href="http://s2.51cto.com/wyfs02/M02/86/87/wKiom1fCt-aBzf8LAABXuOsntO0780.png" target="_blank"></a>
添加margin-top:20px;
<div style="background-color: green;height: 200px;margin-top:20px">
顯示如下:
<a href="http://s3.51cto.com/wyfs02/M00/86/87/wKioL1fCuPDCXI0sAABVqnIqy2U729.png" target="_blank"></a>
接下來依次為margin-left、margin-right、margin-bottom示範效果:
<a href="http://s4.51cto.com/wyfs02/M00/86/87/wKiom1fCuYizojDLAABZLBsJVcI455.png" target="_blank"></a>
<a href="http://s5.51cto.com/wyfs02/M00/86/87/wKioL1fCufyCk9sAAABcmCuEchA269.png" target="_blank"></a>
<a href="http://s4.51cto.com/wyfs02/M02/86/87/wKioL1fCuwLRDNqVAABMz_6VuRw531.png" target="_blank"></a>
從以上示範結果發現，margin-left、margin-right、margin-top效果很明顯，而margin-bottom效果不是很明顯，但是從以上的結果可以發現margin屬性是藍色方塊外部的綠方塊大小進行調整。
經過面的示範，可以得出結論:
padding：自身增加，即自身尺寸大小調整；換句話說就是調整内邊距，改變自己的内部邊距；
padding-top、padding-left、padding-right、padding-bottom
margin： 外部增加，即離邊框越來越遠，即外邊距；換句話說就是改變自己與外部其他标簽的邊距；
margin-top、margin-left、margin-right、margin-bottom
注意:對于padding和margin值的設定方式，以padding為例，如果設定了padding:20px,則表示padding所在的标簽下，上下左右的值都為20px，即:padding:20px等價于:
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
如果設定了pading:10px 20px;則等價于:
padding-top:10px;
padding-bottom:10px;
padding值設定生效方式為:上右下左
如果設定了一個值，則上下左右的值都是一樣，如果設定了兩個值，則第一個值是對應上和右，第二個值則對應下和左
該方式合适margin和border，另外如果想某個标簽水準居中，可以使用margin:0 auto;
②位置标簽position的屬性,即定位。
1、fixed，固定浏覽器視窗的位置，相對于整個浏覽器視窗而固定的某個标簽的位置。
<a style="position:fixed;left:60px;top:60px;">傳回頂部</a>
<div style="height:2000px;background-color: #ddd;"></div>
<a style="position:fixed;right:60px;bottom:60px;">傳回頂部</a>
運作效果:
<a href="http://s1.51cto.com/wyfs02/M00/86/8F/wKiom1fD3n-TKxYPAACDgbSMD68716.png" target="_blank"></a>
2、絕對(absolute)和相對(relative)位置
當位置position的值absolute和relative要一起用才會生效，一般情況下relative要放在外層标簽，而absolute則放在記憶體标簽上，示例代碼如下:
<div id="content" style="height: 2000px;background-color: #dddddd;">
<div style="position:relative;background-color: beige;width:300px;margin: 0 auto;height:300px;">
<!--外層标簽---->
<h1>Python學習</h1>
<a style="position:absolute;right:0;bottom:0px;">css樣式測試</a>
<!--内層标簽----->
</div>
顯示效果如下:
<a href="http://s4.51cto.com/wyfs02/M00/86/8F/wKioL1fD5mLjwos5AACYA6FCV2E079.png" target="_blank"></a>
③float屬性
正常情況下定義兩個div标簽顯示結果如下:
<div style="background-color: red;">
<div>1111111111</div>
<div>2222222222</div>
</div>
顯示結果如下:
<div style="float:left">1111111111</div>
<div style="float:left">2222222222</div>
<a href="http://s1.51cto.com/wyfs02/M02/86/91/wKiom1fD_-2TT1c1AABtxyj2f_s843.png" target="_blank"></a>
從上述效果發現，雖然兩個div标簽中的結果都出現在一行顯示，但是背景顔色沒有了，這裡可以通過如下兩個方式解決:
a、在第二個div标簽後面添加一個div标簽，具體内容如下:
<div style="clear:both"></div>
<a href="http://s3.51cto.com/wyfs02/M01/86/91/wKioL1fEAeLR0pwbAABgb481lIQ457.png" target="_blank"></a>
b、或者在父标簽中添加一個高度，即:
<div style="background-color: red;height: 30px;">
<a href="http://s5.51cto.com/wyfs02/M02/86/91/wKioL1fEAf_iEtWoAABYql2wvY8021.png" target="_blank"></a>
這樣就解決了背景不顯示的問題。
④overflow
平時我們如果固定了背景的高度，然後背景框裡有一些内容，但是内容超出了固定背景框的高度，如下圖所示:
<a href="http://s1.51cto.com/wyfs02/M01/86/91/wKioL1fEBG3jWcIqAAB00QjvDLc116.png" target="_blank"></a>
代碼為:
<div style="height:100px;background-color: darkorange;">
python之路</br>
</div>
如出現這種情況肯定不是我們想要的，那麼如何解決呢？一般的解決的最好方法是能讓背景框随着内容量的多少進行自由擴充或者收縮，這裡可以用樣式overflow:auto，或者overflow:hidden
<div style="overflow:auto;height:100px;background-color: darkorange;">
顯示結果為:
<a href="http://s5.51cto.com/wyfs02/M02/86/91/wKioL1fEBm_BX6SsAACFbQZ0ILQ669.png" target="_blank"></a>
或者:
<div style="overflow:hidden;height:100px;background-color: darkorange;">
<a href="http://s5.51cto.com/wyfs02/M00/86/91/wKioL1fEBpKAXEl1AABzfXrPsVE391.png" target="_blank"></a>
⑤opacity屬性，透明度
針對一些背景頁面設定透明度，針對chrome浏覽器設定透明度可以用opacity:0.5;這樣的方法設定，還有其他浏覽器設定方式為:
filter:alpha(opacity=50);
-moz-opacity:0.5
opacity:0.5
<div style="height:100px;background-color:darkgray;opacity:0.3;">
python之路
<a href="http://s2.51cto.com/wyfs02/M01/86/92/wKiom1fEC_Dx4ly9AABixwYYAgQ056.png" target="_blank"></a>
⑥z-index屬性
用來設定浏覽器中頁面的層級
代碼如下:
<li>Python 之路學習</li>
<div style="height:200px;"></div>
<input type="button" value="送出資料">
<div style="z-index: 1;opacity: 0.5;position: fixed;left:0;right: 0;top: 0;bottom: 0;background-color: black;"></div>
<div style="z-index: 2;position: fixed;left: 50%;top: 50%;margin-left: -150px;margin-top: -50px;"></div>
<div style="background-color: white;width: 300px;height: 100px;">
<input />
背景布局示例代碼:
<style>
body{
margin: 0 auto;
.pg-header{
height:48px;
background-color:rgb(51,122,183);
.pg-body .menu {
background-color: #dddddd;
position: absolute;
top: 50px;
left: 0;
bottom: 0;
width: 200px;
overflow: auto;
.pg-body .content{
background-color: darkslategray;
right: 0;
left: 210px;
</style>
<div class="pg-header"></div>
<div class="pg-body">
<div class="menu">
<a>菜單</a>
<p>測試菜單</p>
</div>
<div class="content">
内容布局内容布局内容布局内容布局
<div style="height:1000px;">
<h1 style="color: red;">測試内容</h1>
</div>
本文轉自027ryan 51CTO部落格，原文連結：http://blog.51cto.com/ucode/1843568，如需轉載請自行聯系原作者
![TestLink導出用例轉換工具(XML2Excel)[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)