대부분의 사람들 은 CSS 속성 display 와 visibility 를 헷 갈 리 기 쉽다.그들 은 다 르 지 않 은 것 처럼 보이 지만 사실은 그들의 차이 가 매우 크다.visibility 속성 은 요소 가 표시 되 는 지 숨 어 있 는 지 확인 하 는 데 사 용 됩 니 다.이것 은 visibility="visible|hidden"으로 표시 합 니 다.(visible 은 표시 되 고 hidden 은 숨겨 져 있 음 을 표시 합 니 다.)visibility 가'hidden'으로 설정 되 었 을 때 요 소 는 숨겨 졌 지만 원래 있 던 위 치 를 차지 합 니 다.예:function toggleVisibility(me){if(me.style.visibility==="hidden"){me.style.visibility="visible";}else { me.style.visibility="hidden"; } }
첫 번 째 줄 의 텍스트 는"hidden"과"visible"속성 을 촉발 합 니 다.두 번 째 줄 의 변 화 를 주의 하 십시오.
visibility 는 요소 의 위 치 를 유지 하기 때문에 첫 줄 은 보이 지 않 지만 위 치 는 그대로 있 습 니 다.두 번 째 줄 의 내용 은 상하 로 이동 하지 않 습 니 다.
[Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]요소 가 숨겨 지면 다른 이 벤트 를 받 을 수 없 음 을 알 수 있 습 니 다.따라서 첫 번 째 코드 에서"hidden"으로 설정 되 었 을 때 이 벤트 를 받 을 수 없 기 때문에 첫 번 째 텍스트 를 마우스 로 눌 러 표시 할 수 없습니다.다른 한편,display 속성 은 조금 다르다.visibility 속성 은 요 소 를 숨 기지 만 요소 의 유동 위 치 를 유지 하 며,display 는 실제 적 으로 요소 의 유동 특징 을 설정 합 니 다.display 가 block(블록)으로 설정 되 었 을 때 용기 의 모든 요 소 는 하나의 단독 블록 으로 여 겨 집 니 다.
요소 처럼 그 점 에서 페이지 에 들 어 갑 니 다.(실제로의 display:block 을 설정 하여
처럼 작업 할 수 있 습 니 다.display 를 inline 으로 설정 하면 행동 이 요소 inline 과 같 습 니 다.일반적인 블록 요소 라 도
와 같은 출력 흐름 으로 조 합 됩 니 다.다음은 내 실례 의 코드 와 효과:function toggleDisplay(me){if(me.style.display=="block"){me.style.display="inline";alert("텍스트 는 현재"inline"입 니 다.);}else { if (me.style.display=="inline"){ me.style.display="none"; alert("텍스트 는 현재'none'입 니 다.3 초 후에 자동 으로 다시 표 시 됩 니 다.")window.setTimeout("blueText.style.display='block';",3000,"JavaScript"); } else { me.style.display="block"; alert("텍스트 는 현재:"Block");}}
는파란색텍스트 에서 클릭 하여 효 과 를 봅 니 다.
[Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]마지막 으로 display 가 설정 되 었 습 니 다.none.이때 요 소 는 실제로 페이지 에서 이동 되 고 아래 에 있 는 요 소 는 자동 으로 따라 채 워 집 니 다.(이 때 display:none 적용 하기;의 요 소 는 사라 지 는 것 과 같 고 visibility:hidden;숨기다display 속성 은 각각 block,inline,none 값 과 visibility:hidden 을 사용 합 니 다.의 상황 디 버 깅 예제:
display 속성 은 각각 block,inline,none 값 및 visibility:hidden 을 사용 합 니 다.의 상황 디 버 깅
This is a SPANin a sentence.
요 소 를 block 으로 설정 하면 이 요소 뒤에 줄 이 바 뀝 니 다.
원 소 를 inline 으로 설정 하면 원 소 를 줄 바 꾸 는 것 을 제거 합 니 다.
요 소 를 none 으로 설정 하여 이 요소 의 내용 을 숨 깁 니 다.
[Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]동시에 display:inline 에 대하 여;float:left;이들 의 차 이 는 이 글 을 참조 할 수 있다.(display 는 상 태 를 나타 내 는 것 을 말한다.inline 은 내 연 을 나타 내 는데 특징 은 앞의 내 연 요소 에 바짝 붙 어 있 는 것 이다.보통 기본 적 인 내 연 요 소 는 span,a,em,strong 등 이 있다.한편,float 는 유동 을 나타 낸다.float:left 는 블록 급 요 소 를 대상 으로 하 는 유동 형식 으로 서로 다른 형식의 두 가지 상태 이다.)http://www.andymao.com/andy/post/42.html http://bbs.blueidea.com/thread-2596793-1-1.html float &inlinespan 은 내 연/inline 요소 로 너비 할당 은 효과 가 없습니다.span 은 내 연/inline 요소 로 너비 에 100 px+float:right 를 부여 합 니 다.너비 가 있 음 을 볼 수 있 습 니 다.
이 li 는 내 연/inline 으로 정의 되 며,설정 폭 은 효과 가 없습니다
test
test
이 li 는 내 연/inline+float:left 로 정의 되 어 있 습 니 다.폭 설정 효과 가 있 습 니 다.display:none CSS1 대상 을 감추다....과 visibility 속성의 hidden 값 이 다 르 기 때문에 숨겨 진 대상 에 게 물리 적 공간 을 유지 하지 않 습 니 다. visibility:hidden 대상 숨 기기,그리고 display 속성 이 다 릅 니 다.이 속성 은 숨겨 진 대상 이 차지 하 는 물리 적 공간 을 유지 합 니 다.그러나 visibility:hidden 을 사 용 했 기 때문에 늘 어 난 내용 은 바로 그림 이 함 유 된 DIV 입 니 다.display:none 으로 바 꾸 면 정상 입 니 다.방금 까지 고도 설정 의 문제 라 고 의 심 했 는데 이렇게 간단 한 내용 일 줄 은 몰 랐 습 니 다.결국 이렇게 많은 시간 과 정력 을 들 였 습 니 다.아이고...
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
