12가지 멋진 CSS 기술을 공유하세요

다음 고급 CSS 기술

• 메뉴에 테두리를 적용/적용 취소하려면 :not()을 사용하세요

• 본문에 줄 높이 추가

• 모든 것이 수직으로 중앙에 위치합니다

• 쉼표로 구분된 목록

• 항목을 선택하려면 음수 n번째 하위를 사용하세요.

• 아이콘에는 SVG

• 사용 표시 텍스트 최적화

• 순수 CSS 슬라이더의 경우 max-height

• 를 사용하세요. 상속 상자 크기

• 테이블균일한 셀 너비

• Flexbox를 사용하여 여백

• 에 대한 다양한 해킹을 제거하세요. 빈 링크에 속성 선택기 사용

메뉴에 테두리를 적용/적용 취소하려면 :not()을 사용하세요

먼저 각 메뉴 항목에 테두리를 추가하세요

아아아아

...그리고 마지막 요소를 제거합니다...

//* 테두리 제거 */

/* add border */
.nav li {
  border-right: 1px solid #666;
}

...:not() 의사 클래스를 직접 사용하여 요소를 적용할 수 있습니다:

.nav li:last-child {
  border-right: none;
}

이렇게 하면 코드가 깔끔하고 읽기 쉽고 이해하기 쉽습니다.

물론, 새 요소에 형제 요소가 있는 경우 범용 형제 선택기(~)를 사용할 수도 있습니다.

..nav li:first-child ~ li {

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

본문에 줄 높이 추가

각

, 등에 line-height를 개별적으로 추가할 필요는 없습니다. 본문에 추가하세요:

  border-left: 1px solid #666;
}

이렇게 하면 텍스트 요소가 body 에서 쉽게 상속될 수 있습니다.

모든 것이 수직으로 중앙에 위치합니다

모든 요소를 ​​수직으로 중앙에 배치하는 것은 매우 쉽습니다.

body {
  line-height: 1;
}

보세요, 아주 간단하지 않나요?

참고: IE11의 Flexbox에 주의하세요.

쉼표로 구분된 목록

HTML 목록 항목을 쉼표로 구분된 실제 목록처럼 보이게 만듭니다.

html, body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

마지막 목록 항목에는 :not() 의사 클래스를 사용하세요.

항목을 선택하려면 음의 n번째 하위 항목을 사용하세요

CSS에서 음수 n번째 자식을 사용하여 항목 1부터 항목 n까지 선택합니다.

아아아아

그렇게 쉽습니다.

아이콘에는 SVG

사용 아이콘에 SVG를 사용하지 않을 이유가 없습니다.

ul > li:not(:last-child)::after {
  content: ",";
}

SVG는 모든 해상도 유형에 대해 우수한 확장성을 가지며 IE9로 돌아가는 모든 브라우저를 지원합니다. 이렇게 하면 .png, .jpg 또는 .gif 파일을 피할 수 있습니다.

표시 텍스트 최적화

글꼴이 모든 기기에서 최적으로 표시되지 않는 경우가 있으므로 기기 브라우저의 도움을 받으세요.

li {
  display: none;
}

/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
  display: block;
}

참고: OptimizeLegibility를 책임감 있게 사용하십시오. 또한 IE/Edge에는 텍스트 렌더링이 지원되지 않습니다.

순수 CSS 슬라이더에는 최대 높이

를 사용하세요. CSS 전용 슬라이더를 구현하려면 최대 높이 및 오버플로 숨기기를 사용하세요.

.logo {
  background: url("logo.svg");
}

상자 크기 상속

상자 크기 조정이 html을 상속받도록 합니다:

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

이를 통해 다른 동작을 활용하는 플러그인이나 기타 구성 요소에서 상자 크기를 더 쉽게 변경할 수 있습니다.

표 셀의 너비가 동일합니다

테이블은 작업하기 번거로우므로 table-layout을 사용하세요. 셀 너비가 동일하도록 고정:

.slider ul {
  max-height: 0;
  overlow: hidden;
}

.slider:hover ul {
  max-height: 1000px;
  transition: .3s ease;
}

Flexbox로 마진을 없애는 다양한 방법

열 구분 기호를 사용해야 하는 경우 flexbox의 space-between 속성(

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

)을 통해 n번째, 첫 번째, 마지막 자식 해킹을 제거할 수 있습니다. 이제 목록 구분 기호가 균등한 간격으로 표시됩니다.

빈 링크에는 속성 선택기를 사용하세요

요소에 텍스트 값이 없지만 href 속성에 링크가 있는 경우 링크 표시:

.calendar {
  table-layout: fixed;
}

매우 편리합니다.

지원

이러한 고급 기술은 현재 버전의 Chrome, Firefox, Safari, Edge는 물론 IE11에서도 효과적으로 작동합니다.

위 내용은 12가지 멋진 CSS 기술을 공유하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!