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

집

웹 프론트엔드

CSS 튜토리얼

줌 속성에 대한 자세한 설명

藏色散人

Mar 01, 2021 pm 02:16 PM

줌 속성은 개체의 확대/축소 비율을 설정하거나 검색하는 것 외에도 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 id="推荐文章">推荐文章</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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는