目录
-
标准盒子模型
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 去除标签自带的边距 */ *{ margin: 0; padding: 0; } body{ background-color: palegoldenrod; } div{ height: 30px; background-color: red; } img{ /* 设置大小 默认是500 * 710*/ width: 100px; height: 142px; /* 背景颜色 */ background-color: plum; /* 内边距: 标签内容与标签之间的间隙 */ padding: 20px; } </style> </head> <body> <div></div> <!-- 演示标准盒子模型 --> <img src="../img/动漫.jpg" /> </body> </html> -
怪异盒子模型
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; background-color: palegoldenrod; } img{ /* 将其设置成怪异盒子模型 */ /* 使用场景需求： 不管发生什么变化，标签看起来的大小就是我设置宽高的大小 */ box-sizing: border-box; background-color: plum; /* 设置宽高 */ width: 150px; height: 213px; /* 设置内边距 */ padding: 20px; } </style> </head> <body> <img src="../img/动漫.jpg" /> </body> </html>
82
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
