①background-position 圖片位移
應用場景，在實際的生產環境中咱們在網頁上看到的小圖片不是一個一個的零散的小圖片的，咱們只是看到了大圖片的一部分。比如一個大圖片，我只讓他顯示一部分并不全部顯示怎么做？
可以這么想：
有一個窗口，你在窗口的一邊，只能通過窗口來看外面，你不能動，我們可以通過移動這個窗口來讓你看到不同的場景，當然你看到的大小和窗口的大小有關！
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.chuangkou{
/*定義一個圖片*/
background-p_w_picpath: url('content_p_w_picpaths.jpg');
/*定義一個窗口,指定長和寬*/
height: 80px;
width:100px;
/*設置圖片不重復*/
background-repeat:no-repeat;
background-position: 3px 10px ;
}
</style>
<body>
<div class="chuangkou">
</div>
</body>
</html>
顯示結果:
原本圖片為:
綜合對比，上面的確實只顯示了圖片的部分內容，即窗口大小設置后，移動圖片位置，只顯示要顯示的部分。
②內外邊距
內邊距，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div >
<div >
</div>
</div>
</body>
</html>
運行結果如下:
調整外邊距:
在上面的代碼增加代碼"padding-top: 20p",
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div >
<div >
</div>
</div>
</body>
</html>
刷新頁面如下:
同樣還有padding-right,pading-left,padding-bottom,樣式效果分別如下:
以上表示藍色方塊相對綠色方塊的位置放生變化，實際是在綠色方塊代碼上做的調整，驗證了padding屬性是調整方塊（此處是調整綠色方塊）自身的大小。
下面通過調整藍色方塊代碼進一步演示調整結果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div >
<div >
</div>
</div>
</body>
</html>
此時在藍色方塊代碼中添加"padding-top: 20px;"代碼
添加padding屬性之前:
添加padding屬性之后:
相對于增加padding屬性之前，經過對比綠色方塊大小不變，藍色方塊高度變大。
同樣依次將padding-top改為padding-left、padding-right、padding-bottom進行對比，效果依次如下:
從以上各種情況的演示效果可以看出padding屬性是對方塊自身大小的調整。
還有另外一種屬性margin，其效果是外部方塊大小調整，即外邊距大小的調整，margin有margin-top、margin-right、margin-left、margin-bottom幾種屬性，這里仍然是以該代碼為例，對外方塊大小調整進行演示,原始代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div >
<div >
</div>
</div>
</body>
</html>
添加margin屬性之前顯示如下:
添加margin-top:20px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div >
<div >
</div>
</div>
</body>
</html>
顯示如下:
接下來依次為margin-left、margin-right、margin-bottom演示效果:
從以上演示結果發現，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-right:20px;
padding-bottom:10px;
padding-left:20px;
padding值設置生效方式為:上右下左
如果設置了一個值，則上下左右的值都是一樣，如果設置了兩個值，則第一個值是對應上和右，第二個值則對應下和左
該方式合適margin和border，另外如果想某個標簽水平居中，可以使用margin:0 auto;
②位置標簽position的屬性,即定位。
1、fixed，固定瀏覽器窗口的位置，相對于整個瀏覽器窗口而固定的某個標簽的位置。
<body>
<a >返回頂部</a>
<div ></div>
<a >返回頂部</a>
</body>
運行效果:
2、絕對(absolute)和相對(relative)位置
當位置position的值absolute和relative要一起用才會生效，一般情況下relative要放在外層標簽，而absolute則放在內存標簽上，示例代碼如下:
<body>
<div id="content" >
<div color:rgb(255,0,0);">position:relative;background-color: beige;width:300px;margin: 0 auto;height:300px;">
<!--外層標簽---->
<h2>Python學習</h2>
<a color:rgb(255,0,0);">position:absolute;right:0;bottom:0px;">css樣式測試</a>
<!--內層標簽----->
</div>
</div>
</body>
顯示效果如下:
③float屬性
正常情況下定義兩個div標簽顯示結果如下:
<body>
<div >
<div>1111111111</div>
<div>2222222222</div>
</div>
顯示結果如下:
如果想兩個div標簽中的內容都在一行顯示，我們可以運用float屬性來定義，對上面代碼記性改進:
<body>
<div >
<div >1111111111</div>
<div >2222222222</div>
</div>
</body>
從上述效果發現，雖然兩個div標簽中的結果都出現在一行顯示，但是背景顏色沒有了，這里可以通過如下兩個方式解決:
a、在第二個div標簽后面添加一個div標簽，具體內容如下:
<body>
<div >
<div >1111111111</div>
<div >2222222222</div>
<div ></div>
</div>
</body>
顯示結果如下:
b、或者在父標簽中添加一個高度，即:
<body>
<div >
<div >1111111111</div>
<div >2222222222</div>
</div>
</body>
顯示結果如下:
這樣就解決了背景不顯示的問題。
④overflow
平時我們如果固定了背景的高度，然后背景框里有一些內容，但是內容超出了固定背景框的高度，如下圖所示:
代碼為:
<body>
<div >
python之路</br>
python之路</br>
python之路</br>
python之路</br>
python之路</br>
python之路</br>
python之路</br>
python之路</br>
python之路</br>
python之路</br>
python之路</br>
</div>
如出現這種情況肯定不是我們想要的，那么如何解決呢？一般的解決的最好方法是能讓背景框隨著內容量的多少進行自由擴展或者收縮，這里可以用樣式overflow:auto，或者overflow:hidden
<body>
<div color:rgb(255,0,0);">overflow:auto;height:100px;background-color: darkorange;">
python之路</br>
python之路</br>
python之路</br>
python之路</br>
python之路</br>
python之路</br>
python之路</br>
python之路</br>
python之路</br>
python之路</br>
python之路</br>
</div>
顯示結果為:
或者:
<body>
<div color:rgb(255,0,0);">overflow:hidden;height:100px;background-color: darkorange;">
python之路</br>
python之路</br>
python之路</br>
python之路</br>
python之路</br>
python之路</br>
python之路</br>
python之路</br>
python之路</br>
python之路</br>
python之路</br>
</div>
顯示效果如下:
⑤opacity屬性，透明度
針對一些背景頁面設置透明度，針對chrome瀏覽器設置透明度可以用opacity:0.5;這樣的方法設置，還有其他瀏覽器設置方式為:
filter:alpha(opacity=50);
-moz-opacity:0.5
opacity:0.5
<body>
<div >
python之路
python之路
python之路
</div>
</body>
顯示結果為:
⑥z-index屬性
用來設置瀏覽器中頁面的層級
代碼如下:
<body>
<li>Python 之路學習</li>
<div ></div>
<input type="button" value="提交數據">
<div ></div>
<div ></div>
<div >
<input />
<input />
<input />
<input />
</div>
</body>
后臺布局示例代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<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;
position: absolute;
right: 0;
top: 50px;
bottom: 0;
left: 210px;
overflow: auto;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-body">
<div class="menu">
<a>菜單</a>
<a>菜單</a>
<a>菜單</a>
<a>菜單</a>
<a>菜單</a>
<a>菜單</a>
<p>測試菜單</p>
<p>測試菜單</p>
<p>測試菜單</p>
<p>測試菜單</p>
<p>測試菜單</p>
<p>測試菜單</p>
<p>測試菜單</p>
<p>測試菜單</p>
<p>測試菜單</p>
<p>測試菜單</p>
<p>測試菜單</p>
<p>測試菜單</p>
<p>測試菜單</p>
<p>測試菜單</p>
<a>菜單</a>
<a>菜單</a>
<a>菜單</a>
<p>測試菜單</p>
<p>測試菜單</p>
<p>測試菜單</p>
<p>測試菜單</p>
<p>測試菜單</p>
<a>菜單</a>
<a>菜單</a>
<a>菜單</a>
<p>測試菜單</p>
<p>測試菜單</p>
<p>測試菜單</p>
<p>測試菜單</p>
<p>測試菜單</p>
<a>菜單</a>
<a>菜單</a>
<a>菜單</a>
<p>測試菜單</p>
<p>測試菜單</p>
<p>測試菜單</p>
<p>測試菜單</p>
<p>測試菜單</p>
</div>
<div class="content">
內容布局內容布局內容布局內容布局
<div >
<h2 >測試內容</h2>
</div>
</div>
</div>
</body>
</html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
