CSS Layout – Box Model

​x
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
  <h1>盒模型</h1>
  <div class="box-model">1. 大小固定的Div</div>
  <div class="box-model2">2. 设置了margin的Div</div>
  <div class="box-model3">3. 设置margin:auto的Div （水平居中）</div>
  <div class="box-model4">4. 设置了padding的Div （内边距撑大了Div）</div>
  <div class="box-model5">5. 设置了border-width的Div （边框撑大了Div）</div>
</body>
</html>

HTML

xxxxxxxxxx
 
.box-model{
  width: 500px;
  height: 50px;
  border: solid 3px red;
}
​
.box-model2{
  width: 500px;
  height: 50px;
  margin: 50px;
  border: solid 3px red;
}
​
.box-model3{
  width: 500px;
  height: 50px;
  margin: 50px auto;
  border: solid 3px red;
}
​
.box-model4{
  width: 500px;
  padding: 50px;
  border: solid 3px red;
}
​
.box-model5{
  width: 500px;
  padding: 50px;
  border: solid 30px red;
}

CSS