外邊距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.divF{
font-size: 40px;
color: red;
}
/*同名或者同類型的選擇器
同名的選擇器樣式都會被添加，出現(xiàn)重復(fù)的樣式的時候后面會覆蓋前面的樣式*/
.divF{
font-size: 100px;
}
.divFF{
color:white;
background-color: greenyellow;
}
/*p{
background-color: red;
color: blue;
}
*{
font-size: 55px;
color: greenyellow;
}*/
/*不同類型的選擇器同時出現(xiàn)的時候，如果有樣式的沖突，則按權(quán)值來計算優(yōu)先級
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">我是一個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)邊距，不會改變元素本身的位置，會改變元素本身的大小，會改變元素內(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)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
