溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
①background-position 圖片位移
應(yīng)用場景，在實(shí)際的生產(chǎn)環(huán)境中咱們在網(wǎng)頁上看到的小圖片不是一個(gè)一個(gè)的零散的小圖片的，咱們只是看到了大圖片的一部分。比如一個(gè)大圖片，我只讓他顯示一部分并不全部顯示怎么做？
可以這么想：
有一個(gè)窗口，你在窗口的一邊，只能通過窗口來看外面，你不能動(dòng)，我們可以通過移動(dòng)這個(gè)窗口來讓你看到不同的場景，當(dāng)然你看到的大小和窗口的大小有關(guān)！
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.chuangkou{
/*定義一個(gè)圖片*/
background-p_w_picpath: url('content_p_w_picpaths.jpg');
/*定義一個(gè)窗口,指定長和寬*/
height: 80px;
width:100px;
/*設(shè)置圖片不重復(fù)*/
background-repeat:no-repeat;
background-position: 3px 10px ;
}
</style>
<body>
<div class="chuangkou">
</div>
</body>
</html>
顯示結(jié)果:
原本圖片為:
綜合對比，上面的確實(shí)只顯示了圖片的部分內(nèi)容，即窗口大小設(shè)置后，移動(dòng)圖片位置，只顯示要顯示的部分。
②內(nèi)外邊距
內(nèi)邊距，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div >
<div >
</div>
</div>
</body>
</html>
運(yùn)行結(jié)果如下:
調(diào)整外邊距:
在上面的代碼增加代碼"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,樣式效果分別如下:
以上表示藍(lán)色方塊相對綠色方塊的位置放生變化，實(shí)際是在綠色方塊代碼上做的調(diào)整，驗(yàn)證了padding屬性是調(diào)整方塊（此處是調(diào)整綠色方塊）自身的大小。
下面通過調(diào)整藍(lán)色方塊代碼進(jìn)一步演示調(diào)整結(jié)果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div >
<div >
</div>
</div>
</body>
</html>
此時(shí)在藍(lán)色方塊代碼中添加"padding-top: 20px;"代碼
添加padding屬性之前:
添加padding屬性之后:
相對于增加padding屬性之前，經(jīng)過對比綠色方塊大小不變，藍(lán)色方塊高度變大。
同樣依次將padding-top改為padding-left、padding-right、padding-bottom進(jìn)行對比，效果依次如下:
從以上各種情況的演示效果可以看出padding屬性是對方塊自身大小的調(diào)整。
還有另外一種屬性margin，其效果是外部方塊大小調(diào)整，即外邊距大小的調(diào)整，margin有margin-top、margin-right、margin-left、margin-bottom幾種屬性，這里仍然是以該代碼為例，對外方塊大小調(diào)整進(jìn)行演示,原始代碼如下:
<!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演示效果:
從以上演示結(jié)果發(fā)現(xiàn)，margin-left、margin-right、margin-top效果很明顯，而margin-bottom效果不是很明顯，但是從以上的結(jié)果可以發(fā)現(xiàn)margin屬性是藍(lán)色方塊外部的綠方塊大小進(jìn)行調(diào)整。
經(jīng)過面的演示，可以得出結(jié)論:
padding：自身增加，即自身尺寸大小調(diào)整；換句話說就是調(diào)整內(nèi)邊距，改變自己的內(nèi)部邊距；
padding-top、padding-left、padding-right、padding-bottom
margin： 外部增加，即離邊框越來越遠(yuǎn)，即外邊距；換句話說就是改變自己與外部其他標(biāo)簽的邊距；
margin-top、margin-left、margin-right、margin-bottom
注意:對于padding和margin值的設(shè)置方式，以padding為例，如果設(shè)置了padding:20px,則表示padding所在的標(biāo)簽下，上下左右的值都為20px，即:padding:20px等價(jià)于:
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
如果設(shè)置了pading:10px 20px;則等價(jià)于:
padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;
padding值設(shè)置生效方式為:上右下左
如果設(shè)置了一個(gè)值，則上下左右的值都是一樣，如果設(shè)置了兩個(gè)值，則第一個(gè)值是對應(yīng)上和右，第二個(gè)值則對應(yīng)下和左
該方式合適margin和border，另外如果想某個(gè)標(biāo)簽水平居中，可以使用margin:0 auto;
②位置標(biāo)簽position的屬性,即定位。
1、fixed，固定瀏覽器窗口的位置，相對于整個(gè)瀏覽器窗口而固定的某個(gè)標(biāo)簽的位置。
<body>
<a >返回頂部</a>
<div ></div>
<a >返回頂部</a>
</body>
運(yùn)行效果:
2、絕對(absolute)和相對(relative)位置
當(dāng)位置position的值absolute和relative要一起用才會(huì)生效，一般情況下relative要放在外層標(biāo)簽，而absolute則放在內(nèi)存標(biāo)簽上，示例代碼如下:
<body>
<div id="content" >
<div color:rgb(255,0,0);">position:relative;background-color: beige;width:300px;margin: 0 auto;height:300px;">
<!--外層標(biāo)簽---->
<h2>Python學(xué)習(xí)</h2>
<a color:rgb(255,0,0);">position:absolute;right:0;bottom:0px;">css樣式測試</a>
<!--內(nèi)層標(biāo)簽----->
</div>
</div>
</body>
顯示效果如下:
③float屬性
正常情況下定義兩個(gè)div標(biāo)簽顯示結(jié)果如下:
<body>
<div >
<div>1111111111</div>
<div>2222222222</div>
</div>
顯示結(jié)果如下:
如果想兩個(gè)div標(biāo)簽中的內(nèi)容都在一行顯示，我們可以運(yùn)用float屬性來定義，對上面代碼記性改進(jìn):
<body>
<div >
<div >1111111111</div>
<div >2222222222</div>
</div>
</body>
從上述效果發(fā)現(xiàn)，雖然兩個(gè)div標(biāo)簽中的結(jié)果都出現(xiàn)在一行顯示，但是背景顏色沒有了，這里可以通過如下兩個(gè)方式解決:
a、在第二個(gè)div標(biāo)簽后面添加一個(gè)div標(biāo)簽，具體內(nèi)容如下:
<body>
<div >
<div >1111111111</div>
<div >2222222222</div>
<div ></div>
</div>
</body>
顯示結(jié)果如下:
b、或者在父標(biāo)簽中添加一個(gè)高度，即:
<body>
<div >
<div >1111111111</div>
<div >2222222222</div>
</div>
</body>
顯示結(jié)果如下:
這樣就解決了背景不顯示的問題。
④overflow
平時(shí)我們?nèi)绻潭吮尘暗母叨龋缓蟊尘翱蚶镉幸恍﹥?nèi)容，但是內(nèi)容超出了固定背景框的高度，如下圖所示:
代碼為:
<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>
如出現(xiàn)這種情況肯定不是我們想要的，那么如何解決呢？一般的解決的最好方法是能讓背景框隨著內(nèi)容量的多少進(jìn)行自由擴(kuò)展或者收縮，這里可以用樣式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>
顯示結(jié)果為:
或者:
<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屬性，透明度
針對一些背景頁面設(shè)置透明度，針對chrome瀏覽器設(shè)置透明度可以用opacity:0.5;這樣的方法設(shè)置，還有其他瀏覽器設(shè)置方式為:
filter:alpha(opacity=50);
-moz-opacity:0.5
opacity:0.5
<body>
<div >
python之路
python之路
python之路
</div>
</body>
顯示結(jié)果為:
⑥z-index屬性
用來設(shè)置瀏覽器中頁面的層級
代碼如下:
<body>
<li>Python 之路學(xué)習(xí)</li>
<div ></div>
<input type="button" value="提交數(shù)據(jù)">
<div ></div>
<div ></div>
<div >
<input />
<input />
<input />
<input />
</div>
</body>
后臺(tái)布局示例代碼:
<!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">
內(nèi)容布局內(nèi)容布局內(nèi)容布局內(nèi)容布局
<div >
<h2 >測試內(nèi)容</h2>
</div>
</div>
</div>
</body>
</html>
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
