盒模型基础知识实践,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:
实例
.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选择器,对页面进行简单布局。