<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
html,body{
margin: 0;
}
div{
width: 200px;
height: 100px;
background-color: chartreuse;
border: 1px black solid;
padding :10px;
margin:10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
在我们上面是直接写了border,在里面直接定义了三种属性,宽度1px,黑边框,实线
实际上我们可以分开设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
html,body{
margin: 0;
}
div{
width: 200px;
height: 100px;
background-color: chartreuse;
border-width: 10px;
border-color:darkred;
border-style: solid;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
当我们在padding里统一设置的时候,如果只设置一个就是四个方向都是一样的宽度,如果设置了两个就是第一个是上和下第二个是左和右的宽度,如果是3个第一个是上,第二个是左右,第四个是下,如果是四个就是上右下左的顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
html,body{
margin: 0;
}
#d1{
width: 200px;
height: 100px;
background-color: blue;
/*padding-top: 30px;
padding-right: 20px;
padding-bottom:10px;
padding-left: 5px; */
padding:10px 20px 30px ;
}
#d2{
width: 200px;
height: 100px;
background-color:crimson;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
html,body{
margin: 0;
}
#d1{
width: 200px;
height: 100px;
background-color: blue;
/*padding-top: 30px;
padding-right: 20px;
padding-bottom:10px;
padding-left: 5px;
padding:10px 20px 30px ;*/
margin: 50px 40px 30px 20px;
}
#d2{
width: 200px;
height: 100px;
background-color:crimson;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</body>
</html>