집 > 기사 > 웹 프론트엔드 > CSS에서 콘텐츠를 숨기는 방법

CSS에서 콘텐츠를 숨기는 방법

藏色散人원래의: 2021-04-02 14:20:103057검색

CSS에서 콘텐츠를 숨기는 방법: 1. "text-indent:-9999px;"를 사용합니다. 2. "line-height:0;"을 사용합니다. 3. "display:none"을 사용합니다. " ;5. "포지션"을 통해 콘텐츠를 숨깁니다.

CSS에서 콘텐츠를 숨기는 방법

이 문서의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터

CSS에서 텍스트 콘텐츠를 숨기는 6가지 방법

웹 프런트 엔드 개발자로서 HTML의 의미를 이해하기 위해 , 콘텐츠 모듈을 추가해야 하는 경우가 많습니다. 페이지를 더욱 의미 있게 만들기 위해 제목을 추가하고, CSS 없이 돌아다니지 않고도 페이지 정보를 쉽게 흡수할 수 있는 그림 버튼을 추가하는 경우가 많습니다. 일반적으로 더 나은 시각적 효과를 전달하기 위해 종종 교체합니다. 글꼴 및 이전 프런트엔드 개발에서는 를 사용하여(또는 심지어 비어 있음) html의 콘텐츠를 직접 제공하지 않았기 때문에 이 블록의 콘텐츠가 무엇인지 알 수 없습니다. CSS에 로드

주제부터 시작합니다. 일반적으로 글꼴을 오프셋하는 방법은 다음과 같습니다.

1. text-indent:-9999px를 사용합니다.

하지만 블록 수준 요소 블록에만 적용됩니다. 그리고 우리는 종종 글꼴의 a를 오프셋하려고 하므로 문제가 발생합니다. text-indent:-9999px를 사용하는 것이 더 편하지만 a가 블록으로 변환되면 그 뒤에 있는 요소가 다음으로 푸시되는 경우가 많습니다. line.이 a 뒤에 a 버튼이 오면 군중이 그 뒤에 나타나도록 float를 사용해야 합니다. 2. line-height: 0;

코드는 다음과 같습니다.

font-size:0;
overflow:hidden;

는 배경을 완벽하게 "숨길" 수 있습니다. 위 글꼴은

IE6.0, 7.0, 8.0 및 Firefox 3.010에서 테스트를 거쳐 통과되었습니다.

셋째, 가장 편리한 점은 추가하는 것입니다. 범위를 설정하고 display:none을 지정하면 이런 식으로 버그가 발생하지 않습니다.

안타깝게도 태그가 하나 더 있습니다. 루프에서 사용하면 html의 바이트가 더 많아집니다. 이는 단일 버튼에 권장됩니다.

입력 값을 숨기는 방법이 조금 어렵습니다

블록과 텍스트 들여쓰기만 사용하여 숨기기 시뮬레이션을 "오프셋"할 수 있습니다

display:block;
font-size:0;
line-height:0;
text-indent:-9999px;

ie6.0, 7.0, firefox 3.010에서 테스트하여 통과

4 .display:none: 컨테이너 자체를 포함한 모든 것을 사라지게 할 수 있습니다. 간단하고 효과적이지만 두 가지 익숙한 결함이 있습니다. 즉, 검색 엔진에 친숙하지 않고 화면 판독기에서 무시됩니다.

5. Overflow:hidden:

이것이 더 합리적이고 제가 가장 좋아하는 방법입니다.

인용 내용은 다음과 같습니다.

코드는 다음과 같습니다.

.texthidden{
display:block;/*统一转化为块级元素*/
overflow:hidden;
width:0;
height:0;
}

6. positon :absolute:

절대 위치 지정을 사용하여 가시성이 없지만 여전히 물리적 공간을 차지하므로 텍스트를 숨기는 목적에 어긋납니다.

다음은 인용된 내용입니다. :

코드는 다음과 같습니다:

.texthidden{
positon:absolute;
margin-top:-9999px;
margin-left:-9999px;
}

참고: 나중에 세 가지 방법으로 숨겨진 텍스트 효과를 얻을 수도 있지만 권장되지 않습니다.

CSS에서 콘텐츠를 숨기는 방법

관련 기사