CSS-盒子模型

最新推荐文章于 2022-08-28 15:25:52 发布

z_Ever1

最新推荐文章于 2022-08-28 15:25:52 发布

阅读量198

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/z_Ever1/article/details/78353480

版权

CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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