前端技术——html——盒子模型

最新推荐文章于 2022-11-23 20:54:38 发布

涛涛英语学不进去

最新推荐文章于 2022-11-23 20:54:38 发布

阅读量221

点赞数

分类专栏：前端文章标签：盒子模型

本文链接：https://blog.csdn.net/niTaoTaoa/article/details/103212207

版权

前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      border: 1px solid red;
    }
    .div1{
      width: 100px;
      height:100px ;
      /*margin是直接设置四周的外边距
      margin: 50px;*/

    }
    .div2{
      width: 200px;
      height: 200px;
      /*设置外边框 外边距会影响大小*/
      padding: 50px;
      /*设置盒子的属性，让width和height就是盒子最终的大小*/
      box-sizing: border-box;
    }
      /*   .是类选择器  */
      .div3{
        float: left;
      }
      .div4{
        float: left;
      }
      .div5{
        float: right;
      }
  </style>
</head>
<body>
<div class="div2">
  <div class="div1">
  </div>
</div>

<div class="div3">aaa</div>
<div class="div4">bbb</div>
<div class="div5">ccc</div>
</body>

</html>