CSS에는 세 가지 숨기기 명령이 있습니다. 1. 위치를 차지하지 않고 모든 콘텐츠를 숨기려면 "display:none"을 사용하세요. 2. 위치를 차지하지 않고 콘텐츠를 숨기려면 "visibility:hidden"을 사용하세요. "overflow: Hidden"은 오버플로 내용을 숨깁니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.
CSS에서 콘텐츠를 숨기기 위한 3가지 방법 및 속성 값
웹 페이지를 만들 때 콘텐츠를 숨기는 것도 비교적 일반적인 방법입니다. 그 기능에는 일반적으로 텍스트/이미지 숨기기, 링크 숨기기, 숨기기 기능이 포함됩니다. -콘텐츠 범위, 팝업 레이어 숨기기, 스크롤 막대 숨기기, 정렬 오류 및 플로팅 지우기 등 위에서 언급한 콘텐츠를 숨기려면 CSS를 사용하세요.
1. 모든 콘텐츠를 숨기려면 display:none을 사용하세요.
display:none은 코드와 같은 웹페이지의 모든 콘텐츠를 표시하지 않게 할 수 있습니다. 텍스트, 링크, 그림 및 P 레이어는 콘텐츠를 숨기는 데 권장되는 방법입니다.
<p style="display:none;">我不占地儿，你看不见我；</p>
| value | description |
|---|---|
| none | 이 요소는 표시되지 않습니다. |
| block | 이 요소는 이 요소 앞뒤에 줄 바꿈이 있는 블록 수준 요소로 표시됩니다. |
| 인라인 | 기본값. 이 요소는 요소 앞이나 뒤에 줄 바꿈이 없는 인라인 요소로 표시됩니다. |
| run-in | 이 요소는 상황에 따라 블록 수준 요소 또는 인라인 요소로 표시됩니다. |
| inherit | 은 표시 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다. |
2. 콘텐츠를 숨기려면 visible:hidden을 사용하세요
visibility:hidden과 display:none은 거의 동일한 콘텐츠를 숨길 수 있지만 유일한 차이점은 콘텐츠를 숨기더라도 숨겨진 콘텐츠는 그대로 유지된다는 점입니다. space, 콘텐츠를 숨기지만 공간을 유지하는 이 위치는 웹 페이지에서 공백으로 나타납니다.
<p style="visibility:hidden;">我占了地儿，你也看不见我；</p>
| 값 | 설명 |
|---|---|
| visible | 기본값입니다. 요소가 표시됩니다. |
| hidden | 요소는 보이지 않습니다. |
| collapse | 테이블 요소에 사용되는 경우 이 값은 행이나 열을 삭제하지만 테이블의 레이아웃에는 영향을 주지 않습니다. 행이나 열이 차지하는 공간을 다른 콘텐츠에 사용할 수 있습니다. 이 값이 다른 요소에 사용되면 "숨김"으로 렌더링됩니다. |
| inherit | 은 가시성 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다. |
3. 오버플로 내용을 숨기려면 Overflow:hidden을 사용하세요.
overflow:hidden 이 방법을 사용하면 고정된 영역 밖의 콘텐츠를 숨길 수 있으며 표시 영역을 효과적으로 제어할 수 있습니다. 하지만 사용할 때는 너비와 높이를 정의해야 합니다. 그렇지 않으면 유효하지 않습니다
<p style="width:120px; height:20px; overflow:hidden;">我占的地儿太多了你就看不见我的尾巴了。。。。。</p>
오버플로 사용법에는 Overflow-x:hidden 및 Overflow-y:hidden이라는 분기가 있습니다. x는 가로 범위, y는 세로 범위입니다. 이 두 속성은 스크롤 막대를 숨겨야 할 때 자주 사용됩니다.
| 값 | 설명 |
|---|---|
| visible | 기본값입니다. 콘텐츠는 잘리지 않고 요소 상자 외부에 렌더링됩니다. |
| hidden | 콘텐츠가 잘리고 나머지 콘텐츠는 표시되지 않습니다. |
| scroll | 콘텐츠는 잘리지만 나머지 콘텐츠를 볼 수 있도록 브라우저에 스크롤 막대가 표시됩니다. |
| auto | 콘텐츠가 잘리면 브라우저에 스크롤 막대가 표시되어 나머지 콘텐츠를 볼 수 있습니다. |
| inherit | 은 오버플로 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다. |
[추천: "css 비디오 튜토리얼"]
위 내용은 CSS에 숨겨진 명령은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!