网页排版布局的三种方法

下面是我常用的网页排版布局的方法，以供大家参考使用

1.栅格系统，如ant design，可以进行24等分 ,bootstrap 可以进行12等分，优点，使用方便，使用方法见官网，缺点，例如5等分，不是很好弄

2.自己写CSS内容，例如5等分可以定义一个类，写成

.col-wdf-5 {
        width: 20%;
        float: left;
        position: relative;
        height: 3.2rem;
        padding: 0 0.2rem 0.5rem;
        }

3.使用table表格的tr/td，通过表格的宽度和列数控制

// 表格部分
<tr>
   <td style="width: 80px;text-align: center;"> XXX</td>
   <td style="width: 180px;text-align: center;">  XXX  </td>
    <td style="width: 80px;text-align: center;"> XXX</td>
   <td style="width: 180px;text-align: center;">  XXX  </td>
</tr>
<tr>
   <td style="width: 80px;text-align: center;"> XXX</td>
   <td style="width: 180px;text-align: center;">  XXX  </td>
    <td style="width: 80px;text-align: center;"> XXX</td>
   <td style="width: 180px;text-align: center;">  XXX  </td>
</tr>

// 搭配style样式部分
<style>
table,
th,
td {
    /* text-align: center; */

    border-bottom: 1px solid black;
    font-size: 18px;
    font-family: '微软雅黑';
    color: black;
}
</style>