CSS-盒子模型

来源：互联网发布：mysql免安装版怎么使用编辑：程序博客网时间：2024/05/20 23:37

<!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>

阅读全文

0 0