样式

  1. 横向居中

    justify-content: center;
    
  2. 居中

    // 垂直居中
    display: flex;
    align-content: center;
    // 水平居中
    text-align: center;
    
  3. 边框

    border-bottom: 1px solid #e9e9e9;//下边框:粗细、样式、颜色
    border-right: 1px solid #e9e9e9;//右边框:粗细、样式、颜色
    
  4. div排列:设置对齐方式

    <div class="f_box" style="height: 157px;width: 33.3%;float: left;">11111111111</div>
    <div class="f_box" style="height: 157px;width: 33.3%;float: left;">2</div>
    <div class="f_box" style="height: 157px;width: 33.3%;float: left;">3</div>
    <div class="f_box" style="height: 157px;width: 33.3%;float: left;">4</div>
    <div class="f_box" style="height: 157px;width: 33.3%;float: left;">5</div>
    <div class="f_box" style="height: 157px;width: 33.3%;float: left;">6</div>
    <div class="f_box" style="height: 157px;width: 33.3%;float: left;">7</div>
    <div class="f_box" style="height: 157px;width: 33.3%;float: left;">8</div>
    <div class="f_box" style="height: 157px;width: 33.3%;float: left;">9</div>
    
    .f_box {
    border-bottom: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;
    }
    

  5. 边距

    margin-left: 3%;//距离左侧边距
    
  6. 换行问题

    white-space: nowrap;//该行文本不进行换行
    text-overflow: ellipsis;//超出部分用“...”省略
    
  7. 背景色

    background-color:#7B7B7B;
    
  8. 边框

    // dev边框样式:dashed虚线 solid实线
    border:1px solid #000;
    
  9. 横线

    border-bottom: 1px solid #e4e7ed;