<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
*{
margin: 0;
padding: 0;
}
div:first-child{
width: 100px;
height: 100px;
/*background-color: red;*/
border: 1px solid red;
padding: 10px;
/*margin: 10px;*/ /*上下左右*/
/*margin: 10px 20px;*/ /*上下 左右*/
/*margin: 10px 20px 15px;*/ /*上 左右 下*/
/*margin: 10px 20px 30px 40px;*/ /*上 右 下 左*/
}
div:nth-child(2){
width: 100px;
height: 100px;
background-color: red;
}
div:last-child{
width: 100px;
height: 100px;
border: 1px solid red;
padding: 10px;
/*box-sizing: border-box;*/
box-sizing: content-box;
}
</style>
</head>
<body>
<div>hello</div>
<div>hello</div>
<div>hello</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
*{
margin: 0;
padding: 0;
}
div:first-child{
width: 100px;
height: 100px;
/*background-color: red;*/
border: 1px solid red;
padding: 10px;
/*margin: 10px;*/ /*上下左右*/
/*margin: 10px 20px;*/ /*上下 左右*/
/*margin: 10px 20px 15px;*/ /*上 左右 下*/
/*margin: 10px 20px 30px 40px;*/ /*上 右 下 左*/
}
div:nth-child(2){
width: 100px;
height: 100px;
background-color: red;
}
div:last-child{
width: 100px;
height: 100px;
border: 1px solid red;
padding: 10px;
/*box-sizing: border-box;*/
box-sizing: content-box;
}
</style>
</head>
<body>
<div>hello</div>
<div>hello</div>
<div>hello</div>
</body>
</html>