CSS를 사용한 고급 레이아웃 기술

IE8이 점차 단계에서 물러나면서 많은 고급 CSS 기능이 브라우저에서 기본적으로 지원되었으며 배우지 않으면 쓸모 없게 될 것입니다.

:empty

를 사용하여 빈 요소 구별

兼容性：不支持 IE8

데모
위 목록이 있다고 가정합니다.

a

b

우리는 비어 있는 요소와 비어 있지 않은 요소를 처리하기를 희망합니다. 요소가 다른 경우 두 가지 옵션이 있습니다.
빈 요소를 선택하려면

:empty

를 사용하세요.
.item:empty {
display: none;
}
또는

:not(:empty)

를 사용하세요.

비어 있지 않은 요소 선택:
.item:not(:empty) {
border: 1px solid #ccc;
/* ... */
}

예를 들어

:*-Of-Type

를 사용하여 요소를 선택하세요

兼容性：不支持 IE8

.
첫 번째 p 단락을 굵게 표시:
p:first-of-type {
font-weight:bold;
}
추가 마지막 img에 대한 테두리:
img:last-of-type {
테두리: 10px solid #ccc;
}
연결되지 않은 블록 인용에 스타일 추가:

blockquote:only-of-type {
border-left: 5px solid #ccc;
padding-left: 2em;
}
홀수 열의 p 문단이 먼저 빨간색으로 죽도록 합니다.

p:nth-of-type(even) {
color: red;
}
또한,

:nth-of-type

에는 다른 유형의 매개변수도 있을 수 있습니다:

/* 짝수*/
:nth-of-type(even)

/* 세 번째만*/
:nth-of-type(3)

/* 매 3번째*/
:nth-of-type(3n)

/* 매 4번째 더하기 3, 즉 3, 7, 11, ... */
:n번째 유형(4n+3)

흐름 레이아웃에

calc

사용

兼容性：不支持 IE8

데모
왼쪽, 중앙 및 오른쪽의 흐름 레이아웃:

nav {
위치: 고정;
왼쪽: 0;
상단: 0;
너비: 5rem;
높이: 100%;
}
옆 {
위치: 고정;
오른쪽 : 0;
상단: 0;
너비: 20rem;
높이: 100%;
}

메인 {
왼쪽 여백: 5rem;
width: calc(100% - 25rem);
}

vw

및

vh

를 사용하여 전체 화면 스크롤 효과 만들기

兼容性：不支持 IE8

Demo

vw

및

vh

는 viewport에 상대적이므로 콘텐츠 및 레이아웃에 따라 변경되지 않습니다. 변경 시 변경 .

섹션 {
너비: 100vw;
높이: 100vh;

디스플레이: flex;
align-items: center;
그냥ify-content: center;
text-align: center;

background-size:cover;
background-repeat : 반복 없음;
배경 첨부: 고정;
}

섹션:n번째 유형(1) {
배경 이미지: url('https://unsplash.it/1024/683?image=1068');
}
섹션:nth-of-type(2 ) {
배경 이미지: url('https://unsplash.it/1024/683?image=1073');
}
section:nth-of-type(3) {
배경 이미지: url('https://unsplash.it/1024/683?image=1047');
}
section:nth-of-type(4) {
배경 이미지 : url('https://unsplash.it/1024/683?image=1032');
}

body {
margin: 0;
}
p {
색상: #fff;
글꼴 크기: 100px;
글꼴 계열: 고정 폭;
}

用

unset

做 CSS Reset

兼容性：不支持 IE

Demo

body {
color: red;
}
button {
color: white;
border: 1px solid #ccc;
}

/* 取消 section 中 button 的 color 设置 */
section button {
color: unset;
}

用

column

做响应式的列布局

兼容性：不支持 IE9

Demo

nav {
 column-count: 4;
 column-width: 150px;
 column-gap: 3rem;
 column-rule: 1px dashed #ccc;
 column-fill: auto;
}

h2 {
 column-span: all;
}
(完)

위 내용은 CSS를 사용한 고급 레이아웃 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!