第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

手撕紅黑樹 · 更新于 2020-10-20

改進版

1. 前言

笨方法的缺陷就是要算出每個盒子應該應用的邊框，而且在寫法上也很麻煩，要為每個盒子定義不同的邊框。并且計算出來的結果只適用于九宮格，如果換成四宮格或者十二宮格的話又要為每個盒子重新定義一下邊框的樣式了。
那么有沒有一種方法是給子元素一個統(tǒng)一的樣式就可以做到一樣的樣式呢？答案必須是肯定的！

2. 不那么笨的方法

不知道同學們有沒有想過，下面這種邊框的樣式幾乎是每個盒子的邊框都不太一樣：
圖片描述
所以寫起來會很麻煩，那什么形狀的邊框能做到只給所有的子盒子都定義一樣的邊框樣式就可以的呢？答案就是：
圖片描述
但是仔細一看經(jīng)不起推敲?。赫麄€九宮格最右邊和最下邊的邊框都沒有了！其實只要咱們在父元素上再加上右側和下側的邊框即可：
圖片描述
而且并不一定非得是這個方向的，別的方向也可以實現(xiàn)啊，比如醬嬸兒的：
圖片描述
醬嬸兒的：
圖片描述
還有醬嬸兒的：
圖片描述
將他們都合并到一起去就會變成醬嬸兒的：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 在這里用link標簽引入中文漸變色 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
  <style>
    /* 清除默認樣式 */
    * { padding: 0; margin: 0; }

    /* 全屏顯示 */
    html, body, ul { height: 100% }

    /* 父元素 */
    ul {
      /* 清除默認樣式 */
      list-style: none;

      /* 顯示為網(wǎng)格布局 */
      display: grid;

      /* 均分成三行三列 */
      grid: repeat(3, 1fr) / repeat(3, 1fr);

      /* 給個合適的間距 */
      gap: 20px;

      /* 添加右下方內邊距 */
      padding-right: 20px;
      padding-bottom: 20px;

      /* 設置盒模型 */
      box-sizing: border-box;

      /* 兩像素的右下角邊框 */
      border-right: 2px solid black;
      border-bottom: 2px solid black;

      /* 調用動畫 */
      animation: clear-gap 5s ease-out infinite alternate
    }

    /* 子元素 */
    li {
      /* 兩像素的左上角邊框 */
      border-top: 2px solid black;
      border-left: 2px solid black;
    }

    /* 定義動畫 */
    @keyframes clear-gap {
      to { gap: 0; padding: 0 }
    }
  </style>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結果：

3. 小結

那么這種方案就是最優(yōu)解了嗎？下一小節(jié)我們來看一道經(jīng)典面試題是如何通過九宮格來考驗面試者的CSS功底的，然后再看看正確答案是怎么解決九宮格的邊框問題的。