레이아웃 비밀 무기 #1 : CSS 테이블 속성

css

속성 : 레이아웃 문제를 해결하기위한 강력한 도구 display: table 코어 포인트 :

CSS의 속성은 강력하고 여러 레이아웃 문제를 해결할 수 있으며 모든 현대식 브라우저와 호환됩니다. 이를 통해 HTML 요소가 테이블 요소와 같이 작동하여 복잡한 레이아웃 및 정렬 문제에 대한 일반적인 솔루션을 제공합니다. CSS

특성을 사용하여 윤곽 상자, 간단한 구식 레이아웃 및 컨텐츠 오케스트레이션이있는 적응 형 레이아웃을 만드는 데 사용될 수 있습니다. 반응 형 디자인에 특히 유용하여 요소가 사용자의 화면 크기에 따라 크기를 조정하고 위치시킬 수 있습니다.

CSS
• 속성에는 많은 장점이 있지만 몇 가지 제한 사항도 있습니다. 다른 디스플레이 속성에 비해 복잡한 레이아웃을 생성하는 데 유연성이 적고 및 table와 같은 특정 CSS 속성에서는 잘 작동하지 않습니다. 그러나 많은 경우에,
속성을 ​​사용하는 장점은 그 단점보다 더 큽니다.
• table
• 현재, Flexbox는 레이아웃 구성을위한 인기있는 새로운 기술 일 수 있습니다. 가용 공간에 적응할 수있는 Flexbox의 놀라운 능력으로 인해 많은 사람들이 그 가능성을 기대했습니다. 그러나 모든 레이아웃 문제를 해결하지는 않으며 이전 브라우저와의 호환성과 관련된 몇 가지 문제가 있습니다. Flexbox에는 현재 일반적인 폴리 필 (이전 브라우저를위한 폴백 솔루션)이 없습니다. 2009 년 IE 버전의 IE에 대한 폴리 필드 만 알고 있습니다. 많은 경우에, 나는 종종 간과되는 CSS table 디스플레이 속성을 사용하면 더 간단한 솔루션을 찾을 수 있음을 발견했습니다. 이러한 CSS 속성은 모든 관련 브라우저 (IE6 및 IE7을 제외하고)에 의해 널리 지원되며 일부 주요 및 사소한 레이아웃 어려움을 우아하게 해결할 수 있습니다. float 이 기술에 완전히 익숙하지 않은 경우, div의 position 속성을 ​​변경하면 테이블이나 테이블 요소처럼 행동 할 수 있습니다. table 기다려, 테이블을 사용하여 레이아웃? 이것이 좋지 않습니까?
21 세기 초에 가장 인기있는 웹 디자인 주제 중 하나는 HTML 테이블 코드를 레이아웃 도구로 사용하는 것에 대한 논쟁이었습니다. 그것은 핵이고 여전히 나쁜 연습입니다.

대신, 우리는 여기에서 완벽하게 이해되는 HTML을 사용합니다 (예 : div, 섹션, 헤더 등). 이것이 바로 CSS가 설계된 것이므로 해킹이나 패치라고 생각하지 마십시오. 그렇지 않습니다.

usage

다음 예제에서 상단의 버튼을 클릭하면 3 개의 색깔 된 div의

속성을 ​​table에서

로 변경할 수 있습니다. [Codepen Sample Link- 실제 CodePen Link로 교체] 당신은

속성없이 div가 수평으로 배열되는 방법을 알 수 있으며, 일부 일반적인 테이블 규칙 ()에도 액세스 할 수 있습니다. display 간격이 필요한 경우 클래식 CSS

속성은 테이블 셀에 영향을 미치지 않습니다. 이 규칙을 사용하려면 Codepen에서 댓글 줄을 찾을 수 있습니다. margin 이 기술은 다른 방법으로 해결하기 어려운 많은 문제를 해결하는 데 매우 유용합니다. border-spacing 나는

디스플레이 속성이 매우 가치있는 세 가지 간단한 사례를 선택했습니다.

그러나 먼저 그들을 보자 : <..> 디스플레이 속성 로 표시됩니다 테이블, 인라인-테이블 Table-Column col Table-Column-Group colgroup Table-row-Group tbody Table-Header-Group thead Table-Footer-Group tfoot 테이블-로우 tr 테이블 세포 td 테이블-캡션 캡션 테이블>

양식 및 CSS에 대한 진정으로 포괄적 인 안내서를 보려면 CSS 트릭을 확인하십시오. 케이스 1. 컨투어 박스 나는 이것이 내가 다루는 가장 일반적인 문제 중 하나라고 생각합니다. 내용이 알려지지 않은 일부 부유 상자가 있으며 모두 같은 높이를 갖도록해야합니다.

Flexbox 가이 문제를 쉽게 해결할 수 있지만 테이블 규칙도 수행 할 수 있다는 것을 알고 있습니다.

단순히 ) 속성을 컨테이너에 그리고 속성을 ​​내부 상자에 적용하십시오.

속성을 ​​삭제하려고합니다 (그렇지 않으면

속성이 적용되지 않음).

html :

<:> css :

[Codepen Sample Link- 실제 CodePen Link로 교체] 케이스 2. 단순한 구식 레이아웃

이것은 다소 오래된 예이지만 최근처럼 내가했던 것처럼 그것을 다루어야 할 수도 있다고 생각합니다. display: table 몇 달 전, 나는 다음 체계와 매우 유사한 그래픽 레이아웃을 받았습니다. IE8과 호환되어야하며이를 수행하는 가장 좋은 방법은 CSS 테이블 규칙을 사용하는 것입니다. [Codepen Sample Link- 실제 CodePen Link로 교체] 사례 3. 콘텐츠 오케스트레이션 함수 table-row가있는 적응 형 레이아웃 이전 예제는 새로운 주제로 이어집니다. CSS 테이블 규칙을 사용하여 적응 형 레이아웃을 구축 할 수 있습니까? display: table-cell 이것은 가능할뿐만 아니라 일부 컨텐츠 오케스트레이션 작업을 수행 할 수도 있습니다. float 우리는 두 개의 div의 속성을 table-cell에서 로 바꾸는 방법을 수직에서 수평으로 변경하는 방법을 보았습니다.

또한 속성이있는 요소는 테이블 레이아웃의 상단에 배치됩니다. 다시,

요소는 바닥에 배치됩니다. 이는 반응 레이아웃을 재구성 할 때 예기치 않게 유용 할 수 있습니다.

아래 펜에서 제목 요소는 창이 크기가 커지면 내비게이션 요소와 위치를 바꾸고

<code class="language-html"><div id="wrapper">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div></code>

속성을 ​​로 변경합니다.

html :

<code class="language-css">#wrapper {
    display: table;
}
#wrapper div {
    display: table-cell;
}</code>

<:> css :

및

div도 비슷한 동작을 가지고 있습니다.

이것은 레이아웃 계획입니다 : 왼쪽의 기본 모바일 버전, 오른쪽의 데스크탑 버전 :

이것은 실행중인 데모입니다 : [Codepen Sample Link- 실제 CodePen Link로 교체] 이 주장에 대한 자세한 내용은 다음을 볼 수 있습니다.

를 사용한 CSS 스태킹 CSS 레이아웃의 "

결론 CSS

디스플레이 속성은 크기 및 레이아웃 문제에 대한 과소 평가되고 귀중한 솔루션입니다.

개인적으로 복잡한 레이아웃을 구축하기 위해 사용하지는 않지만 레이아웃 부분과 관련된 많은 문제를 확실히 해결합니다.

CSS에 대한 FAQS 속성 (CSS

에 대한 자주 묻는 질문은 여기에 추가해야합니다. 내용은 원본 텍스트와 비슷하지만 문구를 복제하지 않도록 조정해야합니다.)

. 위의 모든 CodePen 링크는 실제 CodePen 링크로 교체해야합니다. 코드펜에 직접 액세스하고 만들 수 없습니다. table

위 내용은 레이아웃 비밀 무기 #1 : CSS 테이블 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!