CSS에서 9제곱 그리드를 구현하는 방법은 무엇입니까? CSS로 구공게를 구현하는 네 가지 방법 소개-CSS 튜토리얼-php.cn

CSS에서 9제곱 그리드를 구현하는 방법은 무엇입니까? CSS로 구공게를 구현하는 네 가지 방법 소개

不言

풀어 주다： 2018-10-27 16:27:33

앞으로

6504명이 탐색했습니다.

이 글의 내용은 CSS에서 9각형 그리드를 구현하는 방법에 관한 것입니다. CSS에서 Jiugongge를 구현하는 네 가지 방법에 대한 소개는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

효과 달성

효과는 다음과 같습니다. 9각형 격자에서 작은 사각형을 클릭하면 테두리가 빨간색으로 변합니다.

CSS에서 9제곱 그리드를 구현하는 방법은 무엇입니까? CSS로 구공게를 구현하는 네 가지 방법 소개

구현 방법

이 효과를 얻기 위해 총 4가지 방법을 요약해 봤습니다. 처음 세 가지 방법은 비슷하지만 네 번째 테이블 레이아웃만 더 특별합니다. 아래에는 각 레이아웃 방법과 관련된 스타일 및 DOM 구조의 소스 코드를 직접 제공합니다.

1. 플로트 레이아웃

<style>
    .float{
      margin: 50px; //为了和页面中的其他块拉开距离
      height: 300px;
      width: 300px;
    }
    .float > li{
      box-sizing: border-box;
      float:left;
      width: 100px;
      height: 100px;
      margin-left: -4px;
      margin-top: -4px;
      line-height: 100px;
      text-align: center;
      list-style: none;
      border:4px solid #ccc;
    }
    .float > li:hover{
      border-color: red;
      position: relative;
    }
  </style>

로그인 후 복사

플로트 레이아웃으로 이 9제곱 그리드를 구현하는 데 있어서 핵심은 li에 margin-left:-4px;margin-top:-4px; 이 음수 여백을 설정하지 않고도 블록 사이의 경계가 겹치는 효과를 볼 수 있습니다. 전체 CSS에서 가장 중요한 부분은 li 하위 항목에 대해 position:relative를 설정하는 호버 스타일이라고 생각합니다. 이 위치의 본질은 요소를 기준으로 설정한 후 문서 흐름에서 분리되는 동시에 계단식 수준이 일반 문서 흐름보다 높고 해당 내용이 일반 문서에서 다루어진다는 것입니다. 그러면 해당 테두리가 표시되고 인접한 요소의 테두리는 차단됩니다. 이 설정은 정말 필수입니다. 다음 두 가지 방법은 이 방법과 유사하므로 자세한 설명은 생략하겠습니다.

2. Flex 레이아웃

<style>
.flex{
      display: flex;
      width: 300px;
      /*height: 300px;*/
      margin: 50px;
      flex-wrap: wrap;
      /*align-content: flex-start;      */
      box-sizing: border-box;           
    }
    .flex > li{
      box-sizing: border-box;
      height: 100px;
      width: 100px;
      margin-left: -4px;
      margin-top: -4px;
      line-height: 100px;
      text-align: center;
      list-style: none;
      border: 4px solid #ccc;
    }

    .flex > li:hover{
      border-color:red;
      position: relative;
      /*z-index:2;*/
    }
</style>

로그인 후 복사

1
2
3
4
flex
6
7
8
9

플렉스 레이아웃을 사용할 때 주의해야 할 점은 상위 컨테이너 ul.flex의 높이를 설정하면 여백의 음수 값이 설정된다는 것입니다. 세로 방향의 하위 항목이 실패하게 되는데, 구체적인 이유는 모르겠습니다. 높이를 설정하고 수직 여백 값을 적용하려면 ul.flex에 algin-content:flex-start 속성을 추가하면 됩니다. 구체적으로 왜 이런 일이 발생하는지 잘 모르겠습니다. 이해하는 사람이 댓글 영역에서 지침을 제공할 수 있기를 바랍니다. 이 플렉스 레이아웃에서는 마우스 오버 중에 z-index:2를 추가하여 오버레이 수준을 향상시킬 수도 있습니다.

3. 그리드 레이아웃

<style>
.grid{
      margin: 50px;
      height: 300px;
      width: 300px;
      display: grid;
      grid-template-rows: 100px  100px 100px;
      grid-template-columns: 100px 100px 100px;
      box-sizing: border-box;
    }
    .grid > li{
      margin-top: -4px;
      margin-left: -4px;
      box-sizing: border-box;
      list-style: none;
      line-height: 100px;
      text-align: center;
      border: 4px solid #ccc;
    }
    .grid > li:hover{
      border-color: red;
      position: relative;
      /*z-index:2;*/
    }
</style>

로그인 후 복사

1
2
3
4
grid
6
7
8
9

여기서 주의할 점은 li 하위 항목의 너비와 높이를 설정하지 않는다는 것입니다. 이 그리드 레이아웃에서는 마우스 오버 중에 z-index:2를 추가하여 오버레이 수준을 높일 수도 있습니다.

4. 테이블 레이아웃

<style>
    .table{
      margin-top: 100px;
      width: 300px;
      height: 300px;
      text-align: center;
      border: 4px solid #ccc;
      border-collapse: collapse;
      box-sizing: border-box;
    }
    .table td{
      /*height: 100px;*/
      width: 100px;
      vertical-align: middle;
      border: 4px solid #ccc;
      text-align: center;
      box-sizing: border-box;
      line-height: 100px;
    }
    .table td:hover{
      border-color: red;      
      position: absolute;
      width: 94px;
      height: 100px;
      margin-top: -4px;
      margin-left: -4px;
      box-sizing: content-box;
    }
  </style>

로그인 후 복사