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>