a
b
빈 요소와 비어 있지 않은 요소를 다르게 처리하기를 희망하므로 두 가지가 있습니다."/> a
b
빈 요소와 비어 있지 않은 요소를 다르게 처리하기를 희망하므로 두 가지가 있습니다.">

 >  기사  >  웹 프론트엔드  >  CSS를 사용한 고급 레이아웃 기술

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

巴扎黑
巴扎黑원래의
2017-03-14 11:36:101584검색

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

:empty
를 사용하여 빈 요소 구별

兼容性:不支持 IE8

데모
위 목록이 있다고 가정합니다.
b62caee2527db9e0884616776ccbf4efab62caee2527db9e0884616776ccbf4efb94b3e26ee717c64999d7867364b1b4a3
b62caee2527db9e0884616776ccbf4ef94b3e26ee717c64999d7867364b1b4a3
우리는 비어 있는 요소와 비어 있지 않은 요소를 처리하기를 희망합니다. 요소가 다른 경우 두 가지 옵션이 있습니다.
빈 요소를 선택하려면

: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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:CSS 상속 분석다음 기사:CSS 상속 분석