Collection
Collection
盒模型基础知识实践，padding与简写，css调用等。
<!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"> <link rel="stylesheet" href="static/css/style02.css"> <title>盒模型</title> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
css：
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
.box1 {
width: 200px;
height: 300px;
background-color: beige;
/* 内边距，上右下左 */
/* padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px; */
padding: 20px 30px 40px 50px;
/* border-top-style: solid;
border-top-color: blue; */
border-bottom: 20px solid blue;
}
.box2 {
height: inherit;
background-color: brown;
}点击 "运行实例" 按钮查看在线实例
使用了calss选择器，对页面进行简单布局。