外邊距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.divF{
font-size: 40px;
color: red;
}
/*同名或者同類型的選擇器
同名的選擇器樣式都會(huì)被添加寓搬,出現(xiàn)重復(fù)的樣式的時(shí)候后面會(huì)覆蓋前面的樣式*/
.divF{
font-size: 100px;
}
.divFF{
color:white;
background-color: greenyellow;
}
/*p{
background-color: red;
color: blue;
}
*{
font-size: 55px;
color: greenyellow;
}*/
/*不同類型的選擇器同時(shí)出現(xiàn)的時(shí)候鉴分,如果有樣式的沖突锄奢,則按權(quán)值來計(jì)算優(yōu)先級(jí)
1程奠、* 0
2、標(biāo)簽選擇器 1
3懂拾、類選擇器 10
4攘须、id選擇器 100
5胰耗、style行間樣式 1000
6、隔躲!important 10000
6摩梧、后代選擇器 看里面的組成*/
div p{
color: blue;
}
#first p{
color: red;
}
</style>
</head>
<body>
<!--<div class="divF divFF">我是一個(gè)div</div>-->
<!--<p>AKL</p>-->
<div id="first">
<p class="pp">p1</p>
</div>
<div id="second">
<p class="pp">p2</p>
</div>
<div>
<div>
<div>
<div>
<p>p3</p>
</div>
</div>
</div>
</div>
</body>
</html>
內(nèi)邊距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.redDiv{
/*padding 內(nèi)邊距,不會(huì)改變?cè)乇旧淼奈恢貌湓剑瑫?huì)改變?cè)乇旧淼拇笮≌媳荆瑫?huì)改變?cè)貎?nèi)容的位置*/
width: 300px;
height: 300px;
background-color: red;
/*padding-left: 30px;*/
padding-top:10px;
/*padding可以有復(fù)合寫法,寫法同margin*/
}
.blueDiv{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="redDiv">
<!--<div class="blueDiv"></div>-->
</div>
</body>
</html>
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者