所谓的默认宽度，就是不设置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
感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家！
