줌 속성에 대한 자세한 설명-CSS 튜토리얼-php.cn

줌 속성에 대한 자세한 설명

藏色散人

풀어 주다： 2023-01-03 09:26:16

원래의

7517명이 탐색했습니다.

줌 속성은 개체의 확대/축소 비율을 설정하거나 검색하는 것 외에도 IE의 haslayout 속성, 부동 소수점 지우기, 여백 겹침 지우기 등을 트리거할 수도 있습니다.

줌 속성에 대한 자세한 설명

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

CSS의 확대/축소 속성

Zoom은 개체의 확대/축소 비율을 설정하거나 검색하는 것 외에도 IE의 haslayout 속성, 명확한 부동 소수점, 명확한 여백 겹침 등을 트리거할 수 있습니다. 그러나 Firefox 브라우저는 확대/축소 속성을 지원하지 않지만 웹킷 커널 브라우저에서도 확대/축소 속성을 지원할 수 있다는 점은 주목할 가치가 있습니다.

(1) IE 이외의 브라우저에서 확대/축소의 역할을 살펴보겠습니다. 아래 예시를 보세요. Google Chrome에서 접속했습니다. 이 예시에서는 확대/축소의 역할이 원본의 2배로 확대되는 것입니다. 크기 ( 독자가 스스로 축소를 시도할 수 있습니다.)

1.zoom: 1

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
<style>  
    div{  
        width: 100px;  
        height: 100px;  
        border: 3px solid red;   
        zoom: 1;  
}  
</style>  
    </head>  
    <body>  
        <div>hello</div>  
    </body>  
<html>

로그인 후 복사

일 때 위 코드의 결과는 그림과 같습니다:

줌 속성에 대한 자세한 설명

[추천 학습: CSS 비디오 튜토리얼]

2.zoom: 2 즉, 원본의 2배로 확대:

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
<style>  
    div{  
        width: 100px;  
        height: 100px;  
        border: 3px solid red;   
        zoom: 2;  
}  
</style>  
    </head>  
    <body>  
        <div>hello</div>  
    </body>  
<html>

로그인 후 복사

결과 스크린샷은 다음과 같습니다.

줌 속성에 대한 자세한 설명

참고: Zoom은 IE 이외의 브라우저에서 확대 또는 축소를 지원하는 것으로 나타납니다. , 그러나 이 속성은 비표준 CSS 속성이므로 일반적으로 IE가 아닌 브라우저에서 사용됩니다. 브라우저는 div의 크기 조정 효과를 얻기 위해 확대/축소를 사용하지 않습니다. 이제 크기를 확대하거나 축소하려는 경우 다음을 수행할 수 있습니다. CSS3 변환 속성을 직접 사용하세요.

(2) IE가 아닌 브라우저에서 확대/축소 성능을 살펴본 후 IE 브라우저에서 이 속성의 역할을 살펴봐야 합니다.

확대/축소 사용 방법:

zoom : normal | number

로그인 후 복사

normal: 기본값. 객체의 실제 크기를 사용합니다.

number : % | 부호 없는 부동 소수점 실수. 부동 소수점 실제 값이 1.0이거나 백분율이 100%인 경우 이는 이 속성의 일반 값과 같습니다. 백분율. 예: 확대/축소:1, 확대/축소:120%. 이 속성은 IE에서만 작동하므로 실제 목적은 거의 사용되지 않습니다. IE6 브라우저는 객체의 확대/축소 비율을 나타내기 위해 Zoom:1을 실행하지만 여기서는

overflow:hidden;과 _zoom:1을 함께 사용하여 테두리의 내부 부동을 지웁니다.

같은 방법을 사용하여 IE 브라우저에서 여백 속성의 중복 문제를 해결할 수도 있습니다. 이는 IE에서 확대/축소 속성의 두 번째 역할을 가져옵니다. 이는 IE6, IE7 및 7과

호환됩니다. IE8 브라우저에서는 종종 몇 가지 문제가 발생하는데, 이는 다음 기능이 있는 Zoom:1을 사용하여 해결할 수 있습니다.

(2) IE 브라우저의 haslayout을 트리거하여 IE에서 플로팅 및 마진 겹침과 같은 일부 문제를 해결합니다.

예를 들어 이 사이트에서는 DIV를 사용하여 행 1개와 열 2개를 표시합니다. HTML 코드:

.border{ 
border:1px solid #CCC; 
padding:2px; 
overflow:hidden; 
_zoom:1; 
}

로그인 후 복사

CSS 코드:

<div class="h_mainbox">   
<h2>推荐文章</h2>   
<ul class="mainlist">   
<li><a href="#" style="color:#0000FF" target="_blank">CSS库吧</a></li>   
<li><a href="#" style="color:#0000FF" target="_blank">原创< /a></li>   
</ul>   
</div>

로그인 후 복사

. 메인 목록의 Zoom:1은 IE6, IE7, IE8에서 정상적으로 표시될 수 있습니다.

(3) 다음은 IE 브라우저에서 Zoom 속성의 일반적인 기능을 요약한 것입니다. 향후 이 속성을 사용할 때 도움이 되기를 바랍니다.

1 페이지 라벨이 닫혀 있는지 확인하세요.

이것을 과소평가하지 마세요. 어쩌면 엉망일 수도 있습니다. 이틀 동안 해결하지 못한 CSS BUG 문제는 바로 이것에서 비롯됩니다. 결국 페이지 템플릿은 일반적으로 개발자가 중첩하므로 이러한 문제가 쉽게 발생할 수 있습니다.

빠른 팁: Dreamweaver를 사용하여 파일을 열어 확인할 수 있습니다. 일반적으로 닫힌 태그가 없으면 노란색 배경으로 강조 표시됩니다.

　2. 스타일 제거 방법

일부 복잡한 페이지에서는 N개의 외부 링크 CSS 파일을 로드한 다음 CSS 파일을 하나씩 삭제하고 BUG에 의해 트리거된 특정 CSS 파일을 찾아서 잠금 범위를 좁힐 수 있습니다.

　방금 잠긴 문제가 있는 CSS 스타일 파일의 경우 특정 스타일 정의를 한 줄씩 삭제하고 특정 트리거 스타일 정의와 특정 트리거 스타일 속성까지 찾습니다.

　3. 모듈 확인 방법

때때로 페이지의 HTML 요소에서 시작할 수도 있습니다. 페이지에서 다른 HTML 모듈을 삭제하고 문제를 유발하는 HTML 모듈을 찾으십시오.

　4. 부동소수점이 지워졌는지 확인

실제로 부동소수점을 삭제하지 않아 발생하는 CSS BUG 문제가 많습니다. 부동소수점을 지우는 좋은 습관을 기르는 것이 필요합니다. 추가 HTML 태그 없이 부동소수점을 지우는 방법을 사용하는 것이 좋습니다. 부동소수점을 지우려면 Overflow:hidden;zoom:1과 같은 유사한 방법을 사용하지 마십시오. 이는 너무 제한적입니다. ).

　5. IE에서 haslayout이 실행되는지 확인하세요

IE의 많은 복잡한 CSS 버그는 IE의 고유한 해시레이아웃과 밀접하게 관련되어 있습니다. haslayout에 대한 친숙함과 이해는 더 적은 노력으로 복잡한 CSS 버그를 해결하는 데 도움이 됩니다. old9가 번역한 "레이아웃에 대하여"를 읽는 것을 권장합니다(위대한 GFW를 통과할 수 없는 경우 파란색에서 다시 게시글을 읽을 수 있습니다)

빠른 팁: haslayout이 트리거되면 IE 디버깅 도구 IE의 속성 개발자 도구 모음에는 haslayout 값이 -1로 표시됩니다.

　6. 테두리 및 배경 디버깅 방법

이름에서 알 수 있듯이 디버깅할 요소에 눈에 띄는 테두리나 배경(보통 검은색 또는 빨간색)을 설정하는 것입니다. 이 방법은 CSS 버그 디버깅에 가장 일반적으로 사용되는 방법 중 하나이며 복잡한 버그에도 여전히 적용 가능합니다. 저렴하고 환경 친화적입니다^^

마지막으로 강조하고 싶은 점은 좋은 글쓰기 습관을 기르고, 추가 태그를 줄이고, 의미를 최대한 유지하고, 표준을 준수하면 실제로 더 많은 복잡한 CSS BUG를 더 자주 줄일 수 있다는 것입니다. 그렇지 않은 것은 우리 자신을 위해 문제를 일으키는 것입니다.

지금은 이것만 말씀드리겠습니다. 위 내용에 틀린 부분이 있으면 조언 부탁드립니다.

위 내용은 줌 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!