CSS3 그리드 분석

不言원래의: 2018-06-21 17:45:401415검색

이 기사에서는 HTML 및 CSS를 사용하여 그리드 작업을 더 쉽게 만드는 몇 가지 새로운 CSS3 속성을 살펴보겠습니다. 하지만 먼저 HTML과 CSS 그리드의 역사를 조금 살펴보고 이전에는 왜 그렇게 어려웠는지 이해해 보겠습니다. 1. 그리드의 간략한 역사

옛날에는 레이아웃이 엉망이었습니다. 테이블과 프레임은 다중 열 레이아웃을 생성하는 기본 도구입니다. 그들이 일을 끝내는 동안(실제로는 꽤 서툴러요).

오늘을 목표로 삼으세요. HTML과 CSS는 매우 복잡해졌으며 웹 디자인의 인기와 정교함이 나날이 증가하고 있습니다. 우리가 사용했던 이전 레이아웃 방법은 확실히 사라졌습니다. 그러나 기존 문제가 표면화되었습니다: 다중 열 레이아웃.

상황을 더 복잡하게 만들기 위해 페이지 너비는 더 이상 정적이지 않습니다. 반응성이 대세이므로 백분율 기반 열 너비를 선호하는 경향이 있습니다. 고정된 960픽셀 너비를 기반으로 하는 간단한 그리드는 더 이상 작동하지 않습니다. 유동적인 그리드가 필요합니다.

CSS2 사양에서 열을 풀기 위해 부동 소수점을 사용하는 방법에 문제가 있습니다. 상위 요소가 레이아웃을 손상시키는 것을 방지하려면 Clearfix를 추가해야 합니다. 이 방법을 통해 상위 요소의 높이 붕괴 문제가 수정됩니다(플로팅 요소는 표준 흐름에서 벗어나 상위 요소는 플로팅 리소스가 존재하지 않는다고 생각하게 됩니다). 우리는 대부분 이 접근 방식을 받아들이지만 여전히 많은 사람들이 이를 해킹으로 간주합니다.

인라인박스를 통한 방법은 덜 일반적이지만 여전히 존재합니다. 인라인 요소는 한 줄에 유지되며 자연스러운 순서로 유지됩니다. 행이 가득 차면 후속 요소는 자연스럽게 다음 행으로 접혀집니다. 그러나 텍스트처럼 동작하기 때문에 텍스트처럼 동작합니다. 이는 HTML 요소 사이에 공백 요소(공백, 탭, 줄 바꿈 등)를 피해야 함을 의미합니다. 인라인 블록은 이를 위해 설계되지 않았으며 잘 작동하지 않습니다.

이 두 가지 방법 중 플로팅 방법이 더 안정적입니다. 그렇기 때문에 더욱 인기가 많고 1위를 차지합니다. 그러나 여러 열을 만든 후에는 패딩 거리가 필요하기 때문에 콘텐츠를 다시 압축해야 한다는 사실을 알게 되었습니다. 이는 마지막 질문으로 이어집니다. 박스 모델이란 무엇입니까? 간단히 말해서 요소의 실제 크기에는 높이/너비 + 패딩 + 측면 너비가 포함됩니다. 외부 테두리는 상자를 더 크게 만들지 않고 단지 상자 자체와 다른 요소 사이에 공간을 추가할 뿐입니다. 따라서 너비를 25%로 설정하면 상자의 실제 너비는 그보다 훨씬 더 커지며, 이는 한 행에 4개 요소를 넣을 공간이 충분하지 않음을 의미합니다.

이 귀찮은 문제에는 음수 여백, 중첩 요소 등 다양한 해결책이 있습니다. 그게 제가 아는 전부입니다. 모두 추가 CSS 또는 DOM 요소가 필요하며 해킹으로 간주됩니다. 현실을 직시하자면, CSS2에서는 그리드를 해결할 수 있는 좋은 방법이 없습니다.

그러나 오늘날 CSS3는 훌륭한 지원을 제공하며 사양에는 특히 그리드를 위한 몇 가지 새로운 기능이 추가되었습니다. 이러한 특징은 무엇입니까? 어떻게 사용하나요? 살펴 보겠습니다.

2. box-sizing: border-box

해결된 문제 중 하나는 확장된 상자 모델의 특성입니다. 이 문제는 box-sizing 값을 border-box로 설정하여 해결할 수 있습니다. 콘텐츠의 너비를 줄임으로써 측면과 패딩 사이의 거리도 너비 속성으로 계산됩니다.

HTML

<p class="row">
  <p class="column">Col one</p>
  <p class="column">Col two</p>
  <p class="column">Col three</p>
  <p class="column">Col four</p>
</p>

CSS

.row:after {
  clear: both;
  content: &#39;&#39;;
  display: block;
}
.column {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  min-height: 8em;
  overflow: hidden;
  padding: 2em;
  width: 25%;
}
.column:nth-child(1) { background-color: #9df5ba; }
.column:nth-child(2) { background-color: #9df5d7; }
.column:nth-child(3) { background-color: #9df5f5; }
.column:nth-child(4) { background-color: #9dd7f5; }

Effects

이 방법은 훌륭하지만 여전히 부동 소수점을 사용해야 하고 부동 소수점을 지워야 합니다. 또한 패딩은 요소의 공간으로만 사용할 수 있으며 여백은 더 이상 역할을 하지 않습니다. 이는 빠른 요소 사이에 실제 공간이 없고 오히려 그 내용이 있음을 의미합니다. 이는 많은 디자인에 매우 유용하지만 여전히 작은 실수처럼 느껴집니다.
1.Firefox 1

2.Chrome 1

3.IE 8

4.Opera 7

5.Safari 3

3. width: calc(퍼센트 – 거리)

또 다른 좋은 옵션은 calc( ) 기능. 이를 통해 JavaScript에 의존하지 않고도 요소의 실제 너비를 다양한 단위로 계산할 수 있습니다!

HTML

<p class="row">
  <p class="column">Col one</p>
  <p class="column">Col two</p>
  <p class="column">Col three</p>
  <p class="column">Col four</p>
</p>

CSS

.row { margin-left: -1em; }</p> <p>.row:after {
 clear: both;
 content: &#39;&#39;;
 display: block;
}
.column {
 float: left;
 margin-left: 1em;
 min-height: 8em;
 padding: 1em;
 width: -webkit-calc(25% - 3em);
 width: -moz-calc(25% - 3em);
 width: calc(25% - 3em);
}
.column:nth-child(1) { background-color: #9df5ba; }
.column:nth-child(2) { background-color: #9df5d7; }
.column:nth-child(3) { background-color: #9df5f5; }
.column:nth-child(4) { background-color: #9dd7f5; }

효과:

실제 크기를 다시 계산하는 기능은 훌륭한 옵션이지만 불행하게도 여전히 부동 소수점이 필요하며 열의 컨테이너도 가장자리 거리 밖에서 음수여야 합니다. . Ditto는 훌륭한 선택이지만 여전히 다소 결함이 있습니다.
1.Firefox 4

2.Chrome 19

3.IE 9

4.Opera ?

5.Safari 6(약간 버그가 있는 것으로 보임)

4. 접이식 레이아웃 상자에는 특정 구성 동작이 있습니다. - 테이블과 비슷해요. 이것이 사실입니까? 네 맞습니다. 내용에 따라 디스플레이가 변경되므로 테이블의 동작은 실제로 매우 좋습니다. 그러나 테이블 레이아웃은 더 이상 사용되지 않으므로 테이블 태그는 옵션이 아닙니다.
처음에는 접이식 상자가 조금 복잡해 보였습니다. 특히 저처럼 영어를 잘 못하는 사람에게는 이해하기 어려운 속성이 많습니다. 운 좋게도 Chris Coyier는 제가 언급해야 할 접이식 상자에 대한 훌륭한 가이드를 작성했습니다.
HTML

<p class="row">
  <p class="column">Col one</p>
  <p class="column">Col two</p>
  <p class="column">Col three</p>
  <p class="column">Col four</p>
</p>

CSS

.row {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -webkit-justify-content: space-between;</p>
<p>    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.column {
    margin: 0.5em;
    min-height: 8em;
    padding: 1em;
    width: 25%;
}
.column:nth-child(1) { background-color: #9df5ba; }
.column:nth-child(2) { background-color: #9df5d7; }
.column:nth-child(3) { background-color: #9df5f5; }
.column:nth-child(4) { background-color: #9dd7f5; }

효과:

CSS3은 많은 새로운 기능을 제공하고 일부 기존 문제를 수정하지만, 제 생각에는 플렉스 박스 레이아웃이 CSS로 유연한 그리드를 만드는 유일한 비 해킹 방법입니다. 그러나 불행하게도 브라우저 지원은 평범합니다. 그럼에도 불구하고 다른 방법은 프레젠테이션을 풍부하게 하여 개선되었으며 브라우저 지원도 뛰어납니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

CSS3 그리드 분석

관련 기사