CSS：田字格

時間 2019-11-13

標籤 css 欄目 CSS 简体版

原文原文鏈接

問題描述：寫一個田字格，每一邊的邊距都爲1px，當點擊每個小格子時，它周圍的框顏色都發生變化

解決方法：

將四個元素浮動在同一行，在清除第三個元素的浮動[clear：left; 清除浮動是影響自身，讓本身在某個方向上沒有以前浮動元素（清除以前的元素對本身的影響），因此第三個元素會掉下來，而第三，四個元素是浮動的因此會在一行；]//或者用位移）
再使用位移(transform:translate())或者定位（position:relative;）將多餘的1px的邊款合併；
最後當點擊某個元素時，將z-index{定位的元素才能設z-index}設爲》0的數，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>field</title>
    <style type="text/css">
        .field {
            width: 100px;
            height: 100px;
            border: 1px solid #ff00ff;
        }
        .field2{
            transform: translate(101px,-102px);
        }
        .field3{
            transform: translateY(-103px);
        }
        .field4{
            transform: translate(101px,-205px);
        }
        .field:hover{
            position: relative;
            z-index: 1;
            border-color: aquamarine;
        }
      /*  .field {
            width: 100px;
            height: 100px;
            border: 1px solid #ff00ff;
            float: left;
        }
        .field2{
            position: relative;
            left: -1px;
        }
        .field3{
           clear: both;
            position: relative;
            top: -1px;
        }
        .field4{
            position: relative;
            left: -1px;
            top: -1px;
        }
        .field:hover{
            border-color: greenyellow;
            position: relative;
            z-index: 1;
        }
            */
    </style>
</head>
<body>
<div class="field field1"></div>
<div class="field field2"></div>
<div class="field field3"></div>
<div class="field field4"></div>

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。