CSS의 Zoom 속성 또는 Overflow:auto 속성은 부동을 지웁니다.-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS의 Zoom 속성 또는 Overflow:auto 속성은 부동을 지웁니다.

高洛峰

Mar 01, 2017 pm 03:20 PM

머리말

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

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

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

예제 코드

<!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 id="这个没加overflow-auto和zoom-属性-没有清除浮动-底下的li产生溢出重叠现象">这个没加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 id="这个加overflow-auto和zoom-属性-清除浮动-正常">这个加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>

CSS의 추가 확대/축소 속성 또는 오버플로:자동 속성 부동 소수점 제거와 관련된 기사는 PHP 중국어 웹사이트를 주목하세요!

성명

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

관련 기사

너무 많은 색상 링크Apr 13, 2025 am 11:36 AM

최근에 색상에 대한 도구, 기사 및 리소스가 많이있었습니다. 당신의 즐거움을 위해 여기에 반올림하여 몇 개의 탭을 닫을 수 있습니다.

Flexbox에서 자동 마진이 작동하는 방법Apr 13, 2025 am 11:35 AM

Robin은 이전에 이것을 다루었지만 지난 몇 주 동안 그것에 대해 약간의 혼란을 듣고 다른 사람이 설명하는 데 찌르는 것을 보았습니다.

움직이는 무지개가 강조합니다Apr 13, 2025 am 11:27 AM

나는 샌드위치 사이트의 디자인을 절대적으로 좋아합니다. 많은 아름다운 특징 중에는 무지개가있는이 헤드 라인이 스크롤 할 때 움직이는 밑줄이 있습니다. 그것은 아닙니다

새해, 새 직업? 그리드 구동 이력서를 만들자!Apr 13, 2025 am 11:26 AM

많은 인기있는 이력서 디자인은 그리드 모양으로 섹션을 배치하여 사용 가능한 페이지 공간을 최대한 활용하고 있습니다. CSS 그리드를 사용하여 레이아웃을 만듭니다

너무 많이 재 장전하는 습관에서 사용자를 해소하는 한 가지 방법Apr 13, 2025 am 11:25 AM

페이지 새로 고침은 일입니다. 때로는 반응이 없다고 생각하거나 새로운 콘텐츠를 사용할 수 있다고 생각할 때 페이지를 새로 고침합니다. 때때로 우리는 단지 화가났습니다

React를 사용한 도메인 구동 설계Apr 13, 2025 am 11:22 AM

React 세계에서 프론트 엔드 애플리케이션을 구성하는 방법에 대한 지침은 거의 없습니다. (“옳은 느낌”이 될 때까지 파일을 움직여도 롤). 진실

비활성 사용자 감지Apr 13, 2025 am 11:08 AM

대부분의 경우 사용자가 응용 프로그램에 적극적으로 참여하거나 일시적으로 비활성화되어 있는지에 대해 신경 쓰지 않습니다. 비활성, 의미, 아마도 그들

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo는 항상 통합으로 훌륭했습니다. 캠페인 모니터, MailChimp 및 Typekit과 같은 특정 앱과 통합이 있지만

See all articles

핫 AI 도구

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

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

뜨거운 도구

DVWA

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