집 > 기사 > 웹 프론트엔드 > CSS에서 Zoom 속성이나 Overflow:auto를 사용하는 방법

CSS에서 Zoom 속성이나 Overflow:auto를 사용하는 방법

php中世界最好的语言원래의: 2018-03-22 16:36:112560검색

이번에는 CSS에서 Zoom 속성이나 Overflow:auto를 사용하는 방법을 보여드리겠습니다. CSS에서 Zoom 속성이나 Overflow:auto를 사용할 때 notes는 무엇인가요?

머리말

사실 CSS의 Zoom 속성은 일반적으로 알려져 있지 않으며 일부 CSS 매뉴얼에서도 찾을 수 없습니다. 실제로 Zoom 속성은 IE 브라우저의 독점 속성이며 Firefox 및 기타 브라우저에서는 지원되지 않습니다. 개체의 크기 조정을 설정하거나 검색합니다. 또한 IE의 hasLayout 속성 트리거, float 지우기, 여백 겹침 지우기 등과 같은 다른 기능도 있습니다.

Zoom 속성은 IE 브라우저의 독점 속성이므로 부동 효과는 IE 브라우저에만 적용 가능한 반면 Firefox 및 Google과 같은 브라우저는 부동을 지우려면 Overflow:auto 속성을 사용해야 합니다. 따라서 IE6, IE7, IE8, Firefox 및 Google 브라우저와의 호환성을 달성하려면 이 두 속성을 사용해야 합니다.

페이지를 재구성할 때 여러 개의 떠 있는 작은 컨테이너가 포함된 큰 컨테이너의 레이아웃을 사용하는 경우가 많습니다. 그러나 외부의 큰 컨테이너에 고정된 높이 값이 없으면 큰 컨테이너의 높이가 더 작은 컨테이너에 따라 변경되지 않습니다. 컨테이너의 높이가 변경되어 내용물이 넘칠 수 있습니다. 이때 플로트만 지우면 정상으로 돌아옵니다. 따라서 대형 외부 컨테이너에 Overflow:auto 속성만 추가하면 IE7 및 Firefox Browser에서 플로트 지우기 문제를 해결할 수 있습니다. 하지만 IE6에서는 적용되지 않으므로 우리도 사용해야 합니다. IE의 비공개 속성인 Zoom을 사용하면 플로팅 호환 효과를 완벽하게 얻을 수 있습니다.

예제 코드

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>MJBlog</title>
<style type="text/css">
.box{ 
     width:300px;
  height:auto;
  background-color: #000000;
  margin:100px auto;
  padding:5px;
  }
.box h2{ width:300px; line-height:24px; color:#CCCCCC;}  
.xx { width:140px; float:left; height:24px; overflow:hidden; padding:0px 5px; line-height:24px; color: #FF9933;}
.za{overflow:auto; zoom:1}
.zb{overflow:auto;}
.zc{zoom:1;}     
  
</style>
</head>
<body>
<p class="box">
<h2>这个没加overflow:auto和zoom:1属性，没有清除浮动，底下的li产生溢出重叠现象</h2>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
</p>
<p class="box za">
<h2>这个加overflow:auto和zoom:1属性，清除浮动，正常</h2>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
<p class="xx">福州酒吧万圣节派对活动</p>
</p>
</body>
</html>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!