CSS는 지나치게 복잡한 언어가 아닙니다. 그러나 수년간 CSS를 작성해도 여전히 새로운 것을 발견했을 것입니다. 결코 사용하지 않은 속성, 결코 고려하지 않은 가치 또는 전혀 몰랐던 사양 세부 사항.
내 연구에서, 나는 항상 새로운 작은 tidbits를 발견 했으므로이 게시물에서 그들 중 일부를 공유 할 것이라고 생각했습니다. 분명히,이 게시물의 모든 것이 즉각적인 실용적인 가치를 가질 수는 없지만 나중에 사용하기 위해 이러한 중 일부를 정신적으로 제출할 수 있습니다.
1. 컬러 속성은 단지 텍스트
이 속성은 요소 텍스트의 전경 색을 설명합니다. 콘텐츠. 또한 잠재적 인 간접 값을 제공하는 데 사용됩니다크롬에서는 붕괴 또는 숨겨지면 차이가 없습니다 (이 버그 보고서 및 주석 참조) .… 색 값을 받아들이는 다른 속성에 대해
2. 가시성 속성은 "붕괴"로 설정할 수 있습니다
나는‘전경’으로 자격이있는 다른 것을 생각할 수 없지만, 그렇다면 의견에 알려주십시오.
.당신은 아마도 가시성 속성을 수백 번 사용했을 것입니다. 가장 일반적으로 사용되는 값은 표시 (모든 요소의 기본값)와 숨겨져 있는데, 이는 요소가 마치 마치 마치 마치 마치 공간을 점유 할 수있게하면서 요소가 사라지게합니다 (디스플레이 : 없음). 가시성 속성에 대한 세 번째 및 드물게 사용되지 않은 값은 붕괴됩니다. 이것은 테이블 행, 테이블 행 그룹, 테이블 열 및 테이블 열 그룹을 제외한 모든 요소에 숨겨진 것과 동일한 방식으로 작동합니다. 이러한 테이블 기반 요소의 경우, 붕괴 값은 디스플레이와 유사하게 작동해야합니다. 없어서 붕괴 된 행/열이 차지하는 공간이 다른 컨텐츠에 의해 점유 될 수 있도록. 불행히도, 브라우저가 붕괴를 처리하는 방식은 일관성이 없습니다. 다음 데모를 시도하십시오 : Codepen에서 Sitepoint (@SitePoint)에 의한 펜 시야 : 붕괴. CSS- 트릭 Almanac은 브라우저 불일치로 인해 이것을 사용하지 말라고 조언합니다. 내 관찰에서 :
끊임없이,이 값은 아마도 거의 사용되지 않을 것입니다. 그러나 그것은 존재하지 않으므로, 이전에 알지 못했다면 더 이상한 방식으로 당신은 지금 더 똑똑하다고 생각합니다.
.
.
.
이 속성은 이제 3 개의 속성을 나타냅니다 : 텍스트-디코레이션 라인, 텍스트-디코레이션 컬러 및 텍스트 설명 스타일.
8. Border-Width 속성은 키워드 값을 수락합니다
정확히 지구 산산이가 아니며 새로운 것은 아니지만 표준 길이 값 (예 : 5PX 또는 1EM) 외에도 테두리 width 속성은 세 가지 키워드 값을 수용합니다 : 중간, 얇고 두껍게.
실제로 .
.
예, CSS를 사용하여 애니메이션을 만들 수 있습니다. CSS의 '애니메이션'속성을 사용하면 거의 모든 속성을 애니메이션 할 수 있습니다. 지속 시간, 타이밍 기능, 지연, 반복 수, 방향, 채우기 모드 및 애니메이션 상태를 제어 할 수 있습니다. 이것은 웹 사이트에서 사용자 경험을 향상시키기위한 강력한 도구가 될 수 있습니다. CSS의 '상속'값은 부동산이 상위 요소에서 해당 값을 상속해야 함을 지정하는 데 사용됩니다. 이것은 요소에 대한 일관성을 보장하거나 중복성을 줄임으로써 CSS 코드를 단순화하려는 상황에 유용 할 수 있습니다. '플로트'속성은 CSS의 어떻게 작동합니까? CSS의 'Viewport'는 웹 페이지의 사용자의 가시 영역을 나타냅니다. CSS의‘VW’(뷰포트 너비) 및‘VH’(뷰포트 높이) 장치를 뷰포트에 비해 크기 요소로 사용할 수 있습니다. 이것은 다른 화면 크기에 적응하는 반응 형 디자인을 만드는 데 특히 유용 할 수 있습니다. 에서만 작동합니다
Background-Clip에 대해 말하면 이전에 클립을 본 것 같습니다. 이렇게 보인다 :
Codepen에서 sitepoint (@sitepoint)의 펜 sifju를 참조하십시오
<span>background: [background-color] [background-image] [background-repeat]
</span> [background-attachment] [background-position] <span>/ [ background-size]
</span> [background-origin] [background-clip]<span>;</span>
Codepen에서 sitepoint (@sitepoint)의 펜 Qlnpm을 참조하십시오
<span><span>.example</span> {
</span> <span>background: aquamarine <span>url(img.png)</span>
</span> no-repeat
scroll
center center <span>/ 50%
</span> content-box content-box<span>;
</span><span>}</span>
<span>background: [background-color] [background-image] [background-repeat]
</span> [background-attachment] [background-position] <span>/ [ background-size]
</span> [background-origin] [background-clip]<span>;</span>
<span>background: [background-color] [background-image] [background-repeat]
</span> [background-attachment] [background-position] <span>/ [ background-size]
</span> [background-origin] [background-clip]<span>;</span>
CSS를 사용하여 애니메이션을 만들 수 있습니까? CSS의 'Z-INDEX'속성은 요소의 스택 순서를 제어하는 데 사용됩니다. 'z-index'값이 높은 요소는 'z-index'값이 낮은 요소 위에 나타납니다. 이것은 복잡한 레이아웃과 같은 겹치는 요소를 다룰 때 또는 모달 또는 드롭 다운 메뉴를 만들 때 특히 유용 할 수 있습니다.
CSS를 사용하여 입력 양식 입력을 스타일링하는 데 사용할 수 있습니까? CSS의 '박스 크기'속성이란 무엇입니까?
CSS의 '상자 크기'속성은 요소의 총 폭과 높이가 계산되는 방식을 제어하는 데 사용됩니다. 기본적으로 요소의 너비와 높이에는 패딩과 경계가 포함되지 않습니다. 그러나 '박스 크기'속성을 '국경 박스'로 설정하면 너비와 높이 계산의 패딩 및 경계를 포함 할 수 있습니다. CSS의 '플로트'속성은 왼쪽 또는 오른쪽으로 요소를 밀어서 다른 요소를 감싸도록하는 데 사용됩니다. 이것은 이미지 주위에 텍스트 랩을 만들거나 멀티 컬럼 레이아웃을 만드는 데 유용 할 수 있습니다.
CSS의 '뷰포트'는 무엇입니까? 예, CSS를 사용하여 그라디언트를 생성 할 수 있습니다. CSS의‘선형 그라디언트’및‘방사형 그레이드’함수를 사용하면 두 개 이상의 색상 사이에서 부드러운 전환을 생성 할 수 있습니다. 이것은 웹 사이트의 미학을 향상시키기위한 강력한 도구가 될 수 있습니다.
CSS의 '의사 요소'는 무엇입니까?
위 내용은 거의 알려지지 않은 CSS 사실의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
