>  기사  >  웹 프론트엔드  >  CSS에서 확대 사용

CSS에서 확대 사용

巴扎黑
巴扎黑원래의
2017-06-02 16:02:284134검색

CSS 확대 사용

zoom: 일반 | 숫자
일반: 기본값입니다. 객체의 실제 크기를 사용합니다.
숫자: % | 부호 없는 부동 소수점 실수. 부동 소수점 실제 값이 1.0이거나 백분율이 100%인 경우 이는 이 속성의 일반 값과 ​​같습니다. 백분율. 예: 확대/축소:1, 확대/축소:120%.

ps: 인터넷에서는 IE의 독점 자산이라고 합니다. 제가 직접 테스트해 본 결과 Chrome에서도 사용할 수 있습니다. (Firefox 브라우저에서는 지원하지 않습니다.)

예제 1 :


.first-p{   
         width: 100px;   
         height: 100px;   
         background: red;   
         zoom:1;   
         float: left  
     }   
     .second-p{   
         width: 100px;   
         height: 100px;   
         background: green;   
         zoom:1.5;   
         float:left  
     }   
     .third-p{   
         width: 100px;   
         height: 100px;   
         background: blue;   
         zoom:2;   
         float:left  
     }

html


 <p class="first-p"></p>   
 <p class="second-p"></p>   
 <p class="third-p"></p>

효과:

p>

ps: 크기 p 자체는 100이고 결과가 확대되며 CSS3의 크기 조정에는 큰 차이가 있습니다. 확대 또는 축소 횟수에 따라 DOM 공간이 얼마나 차지하는지;

CSS에서 스크롤하면 여전히 너비와 너비를 차지합니다. 요소 자체에 의해 설정된 높이 속성

사용법: 예를 들어 IE의 hasLayout 속성 트리거, 부동 소수점 지우기, 여백 겹침 지우기 등


{:;:;:;:;

       
  }{:;:;:;:;  
  }

위의 접근 방식은 이미 최신 브라우저의 문제를 해결할 수 있습니다. ie6과의 하위 호환성을 원한다면 Zoom:1을 추가해야 합니다. .

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

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