css等分布局-盒模型

最新推荐文章于 2023-04-07 10:53:27 发布

二哈汪汪叫

最新推荐文章于 2023-04-07 10:53:27 发布

阅读量561

点赞数

文章标签： css

本文链接：https://blog.csdn.net/wei1273356078/article/details/107524557

版权

先上效果图，小伙伴们可以先想想自己怎么做才能使用css做成等分的效果
在这里插入图片描述

先看代码，理解 css属性box-sizing 也可以直接看下面对盒模型的总结

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .box {
      width: 1000px;
      margin: 0 auto;
    }
    .box>ul {
      font-size: 0;
      padding: 10px 10px;
      background-color: antiquewhite;  /* 为了可以看到效果 */
    }
    .box>ul>li {
      box-sizing: border-box;  /* 重要 */
      width: 20%;
      padding: 0 10px;
      border: 2px solid transparent;
      display: inline-block;
    }
    .box>ul>li>div {
      box-sizing: border-box;
      width: 100%;
      height: 100px;
      background-color: aqua; /* 为了可以看到效果 */
    }
  </style>
</head>
<body>
  <div class="box">
    <ul>
      <li><div></div></li>
      <li><div></div></li>
      <li><div></div></li>
      <li><div></div></li>
      <li><div></div></li>
    </ul>
  </div>
</body>
</html>