css：九宫格布局的五种方法（grid布局、flex布局、table布局、float浮动定位、inline-block+letter-spacing属性）

牛奶面包吖

已于 2023-04-20 20:19:18 修改

阅读量7k

点赞数 3

分类专栏： css 文章标签： css 前端 css3

于 2023-04-20 20:18:11 首次发布

本文链接：https://blog.csdn.net/qq_50487248/article/details/130272780

版权

本文介绍了使用CSS实现九宫格布局的五种方法：1) grid布局，通过grid-template-columns和grid-template-rows设置列宽和行高；2) flex布局，计算每个li的宽高并设置margin；3) float浮动定位，设置固定宽高和margin，利用overflow隐藏浮动；4) inline-block结合letter-spacing属性，调整字符间距实现布局；5) table布局，将父元素设为table样式，设置单元格边距。

摘要由CSDN通过智能技术生成

要实现的九宫格效果图如下：
九宫格布局效果图
公共样式：

 div{
   
      width: 300px;
      height: 300px;
  }
    ul{
   
      padding: 0;
      width: 100%;
      height: 100%;
  }
   li{
       
      list-style: none;
      text-align: center;
      line-height: 100px;
      margin: 3px;
      background-color: #243F49;
      color: white;
      border: 1px solid white;
      font-weight: bolder;
  }
<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>