a
IE8이 점차 단계에서 물러나면서 많은 고급 CSS 기능이 브라우저에서 기본적으로 지원되었으며 배우지 않으면 쓸모 없게 될 것입니다.
:empty를 사용하여 빈 요소 구별
兼容性:不支持 IE8
데모
위 목록이 있다고 가정합니다.
b62caee2527db9e0884616776ccbf4efa
: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 중국어 웹사이트의 기타 관련 기사를 참조하세요!