CSS에서 Zoom 속성이나 Overflow:auto를 사용하는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

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

php中世界最好的语言

Mar 22, 2018 pm 04:36 PM

overflow zoom 사용방법

이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

핫 AI 도구

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

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

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7554

Cakephp 튜토리얼

1382

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

2018-2024 USD의 Bitcoin의 최신 가격 Feb 15, 2025 pm 07:12 PM

실시간 비트 코인 USD 가격 비트 코인 가격에 영향을 미치는 요인 향후 비트 코인 가격을 예측하기위한 지표 다음은 2018-2024 년 비트 코인 가격에 대한 몇 가지 주요 정보입니다.

H5 페이지 제작은 프론트 엔드 개발입니까? Apr 05, 2025 pm 11:42 PM

예, H5 페이지 제작은 HTML, CSS 및 JavaScript와 같은 핵심 기술을 포함하는 프론트 엔드 개발을위한 중요한 구현 방법입니다. 개발자는 & lt; canvas & gt; 그래픽을 그리거나 상호 작용 동작을 제어하기 위해 JavaScript를 사용하는 태그.