|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 設(shè)置的寬高是內(nèi)容的寬高 padding作用相當(dāng)于填充物,能改變內(nèi)容到標(biāo)簽邊緣的距離 如果加上了padding,還想保證標(biāo)簽尺寸不變,需要相應(yīng)的減小內(nèi)容的尺寸,保證平衡 背景顏色包含了內(nèi)容,padding和border border也會增加寬度,所以想保證尺寸不變,需要內(nèi)容減去border的寬度 --> <style type="text/css"> /*div{ width: 182px; height: 172px; background-color: pink; text-align: center; line-height: 200px; padding-top: 20px; padding-left: 10px; border: 4px solid black; border: 4px dashed black; }*/ /*div{ width: 194px; height: 194px; background-color: yellow; color:aqua; text-align: center; line-height: 194px; border: 3px solid black; }*/ /* * padding可以賦一個(gè),兩個(gè),三個(gè),四個(gè)值 * 賦值順序是順時(shí)針(上,右,下,左) */ /*div{ width: 100px; height: 100px; background-color: red; padding: 20px 30px 40px 50px; }*/
/*#big{ width: 300px; height: 300px; background-color: greenyellow; padding-top: 100px; padding-left: 100px; } #small{ width: 200px; height: 200px; background-color: blue;
}*/
#div1{ width: 200px; height: 200px; background-color: greenyellow; }
#div2{ width: 200px; height: 200px; background-color: red; margin-top: 100px; }
</style> </head> <body> <!--<div>我是div</div>--> <!--<div>這個(gè)文字要垂直居中</div>--> <!--<div id="big"> <div id="small"></div> </div>--> <!-- 當(dāng)內(nèi)容變成了標(biāo)簽,要通過父級設(shè)置padding,來改自己的位置,子級標(biāo)簽頁是父級標(biāo)簽的內(nèi)容 --> <!-- margin --> <div id="div1">1</div> <div id="div2">2</div> </body> </html> <!-- 盒模型: 四部分:內(nèi)容,填充padding,border,margin(外邊距) 盒子所占的寬度 = margin-left + 左border + padding-left + width + padding-right + 右border + margin-right 背景顏色:內(nèi)容 + padding + border 標(biāo)簽設(shè)置的width和height指的是內(nèi)容的寬高
使用場景: 當(dāng)調(diào)整父子關(guān)系位置時(shí),最好是位置父級的padding 當(dāng)調(diào)整統(tǒng)計(jì)關(guān)系位置時(shí),最好設(shè)置其中的margin --> |
|
|
