|
<!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 当调整统计关系位置时,最好设置其中的margin --> |
|
|
来自： 才子傲 > 《HTML学习总结》
