所谓的默认宽度，就是不设置width属性时，元素所呈现出来的宽度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .box { /* 设置了高度没有设置宽度 */ height: 100px; background-color: red; } </style> </head> <body> <div class="box"></div> </body> </html>
效果图：
如果我们设置了margin值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } body { background-color: black; } .box { /* 设置了高度没有设置宽度 */ height: 200px; margin: 100px; background-color: red; } </style> </head> <body> <div class="box"> </div> </body> </html>
效果图：
我们设置padding试一试
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } body { background-color: black; } .box { /* 设置了高度没有设置宽度 */ height: 200px; padding: 0 100px; background-color: red; font-size: 20px; } </style> </head> <body> <div class="box"> 11111111111111111111111111111111111111111111 </div> </body> </html>
我们发现内容区被撑开了
小结一下：
总宽度 = 父的 content — 自身的左右margin
内容区的宽度 = 父的 content — 自身的左右margin — 自身的左右 border — 自身的左右padding
感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家！
