|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 設置的寬高是內容的寬高 padding作用相當于填充物,能改變內容到標簽邊緣的距離 如果加上了padding,還想保證標簽尺寸不變,需要相應的減小內容的尺寸,保證平衡 背景顏色包含了內容,padding和border border也會增加寬度,所以想保證尺寸不變,需要內容減去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可以賦一個,兩個,三個,四個值 * 賦值順序是順時針(上,右,下,左) */ /*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>這個文字要垂直居中</div>--> <!--<div id="big"> <div id="small"></div> </div>--> <!-- 當內容變成了標簽,要通過父級設置padding,來改自己的位置,子級標簽頁是父級標簽的內容 --> <!-- margin --> <div id="div1">1</div> <div id="div2">2</div> </body> </html> <!-- 盒模型: 四部分:內容,填充padding,border,margin(外邊距) 盒子所占的寬度 = margin-left + 左border + padding-left + width + padding-right + 右border + margin-right 背景顏色:內容 + padding + border 標簽設置的width和height指的是內容的寬高
使用場景: 當調整父子關系位置時,最好是位置父級的padding 當調整統(tǒng)計關系位置時,最好設置其中的margin --> |
|
|
來自： 才子傲 > 《HTML學習總結》
