CSS의 오버플로 속성에 대한 몇 가지 팁, 오버플로 속성 소개-CSS 튜토리얼-php.cn

CSS의 오버플로 속성에 대한 몇 가지 팁, 오버플로 속성 소개

青灯夜游

풀어 주다： 2018-09-08 18:44:44

원래의

2871명이 탐색했습니다.

이 장에서는 특정 참조 값이 있는 오버플로 속성에 대한 몇 가지 팁을 제공합니다. 도움이 필요한 친구들이 참조할 수 있기를 바랍니다.

1: 오버플로 기본 속성

기본 오버플로 속성은 다음과 같습니다: visibel, hided, scroll, auto, acquire, Overflow-x 및 Overflow-y

Overflow-x와 Overflow-y는 동일한 값으로 설정됩니다. 이는 Overflow 와 동일합니다. 서로 다른 경우 그 중 하나에는 visibel, auto가 할당되고 다른 하나에는 visibel, auto, hide가 할당됩니다. 자동으로 재설정됩니다.提前前의 전제 1. Non-Display: 인라인 수준! 2. 해당 방향의 크기, 너비/높이/최대 너비/최대 높이/절대 늘이기

오버플로: Visibel Wonderful

IE7 브라우저가 더 커졌습니다. 모든 버튼에 CSS 스타일 오버플로 추가: visible

2: 오버플로 및 스크롤 막대

스크롤 막대 표시 조건

1.overflow: auto/overflow:scroll 일부 요소에는 자체 스크롤 막대 ;textarea>

body/html 및 스크롤바

어떤 브라우저이든 기본 스크롤바는 body 태그 대신 html에서 제공됩니다

ie8+ html{overflow:auto}

로그인 후 복사

따라서 페이지에서 기본 스크롤바를 제거하려면 필요 사항:

html{overflow:hidden}

로그인 후 복사

body/html 및 스크롤 바-js 및 스크롤 높이

호환 가능한 작성 방법

 var st = document.body.scrollTop || document.documentElement.scrollTop
 overflow的padding-bottom缺失现象
.box{width:400px;height:100px;padding:100px 0; overfow:auto;}

로그인 후 복사

하단은 크롬 브라우저에서 스크롤 가능합니다.

스크롤 막대의 너비

상자 너비(스크롤 막대 포함) - 상자 내부 너비 = 스크롤 막대 너비

IE Firefox Chrome은 17픽셀입니다.

가로 중심 점핑 문제

修复方法 
1.html{overflow-y:scroll;}
2. .container{padding-left:calc(100vw-100%);}

로그인 후 복사

100vw - 브라우저 너비, 100% - 사용 가능한 콘텐츠 너비

맞춤 스크롤 막대-webkit

 整体部分 ::-webkit-scrollbar 
	两端按钮 ::-webkit-scrollbar-button 
	外层轨道 ::-webkit-scrollbar-track 
	内层轨道 ::-webkit-scrollbar-track-piece 
	滚动滑块 ::-webkit-scrollbar-thumb 
	边角 ::-webkit-scrollbar-corner 
	实际常用 
	::-webkit-scrollbar{//宽度 width:8px; height:8px; } 
	::-webkit-scrollbar-thumb{//拖动条 background-color:rgba(0,0,0,.3); border-radius : 6px; } 
	::-webkit-scrollbar-track{//背景槽 background-color:#ddd; border-radius:6px; }

로그인 후 복사

맞춤 스크롤 막대-IE

맞춤 스크롤 플러그인을 사용할 수 있습니다.

IOS 기본 스크롤 콜백 효과

-webkit-overflow-scrolling:touch;

로그인 후 복사

세 가지: 오버플로 및 BFC

float 지우기, 적응형 레이아웃 등

BFC 블록 서식 컨텍스트 블록 수준 서식 컨텍스트

페이지의 매력은 내부 요소가 어떻게 던져져도 외부에 영향을 미치지 않습니다.

overflow 및 BFC

1. 명확한 부동 효과

2. 여백 침투 문제 방지

3. 2열 적응형 레이아웃

내부 부동은 효과가 없습니다.

.clearfix{*zoom:1;}
.clearfix:after{centent:&#39;&#39;;display:table;clear:both;}

로그인 후 복사

여백 침투 문제 방지

오버플로 설정: scroll,,overflow:auto,overflow:hidden

왜 이 기능이 있나요?

유동적 특성에 따른 적응형 레이아웃

1. 왼쪽 플로트, 오른쪽 일반

.left{float:left;width:128px;}
.right{min-height:190px;background-color:#beceeb}

로그인 후 복사

2. 왼쪽 플로트, 오른쪽 여백

.left{float:left;width:128px;}
.right{min-height:190px;margin-left:150px;background-color:#beceeb}

로그인 후 복사

3. 왼쪽 플로트, 오른쪽 패딩

.left{float:left;width:128px;}
.right{min-height:190px;padding-left:150px;background-color:#beceeb}

로그인 후 복사

4. 왼쪽 플로트

.left{float:left;width:128px;}
.right{min-height:190px;overflow:hidden;background-color:#beceeb}

로그인 후 복사

to div 설정 오버플로 속성은 요소를 BFC하는 것입니다. 유동 적응형 레이아웃에 패딩을 사용하는 경우 적응형 레이어가 BFC가 되도록 허용하면 안 됩니다.

모든 BFC 속성이 이렇게 동작하나요

네. 특성상 구체적인 성능이 다릅니다

 overflow:hidden;      自适应，单溢出不可见 限制应用场景
 float + float 包裹性+破坏性 无法自适应，块状浮动布局
position:absolute 脱离文档流，自娱自乐
display:inline-block 包裹性，无法自适应
display:table-cell 包裹性，但天生无溢出特性，绝对宽度也能自适应。
只有overflow:hidden,display:inline-block,display:table-cell能使元素BFC化

로그인 후 복사

2열 적응형 레이아웃

 .cell{
  display:table-cell; width:2000px; //2000保证比父元素大
  *display:inline-block;*width:auto; //IE7-伪BFC特性
 }

로그인 후 복사

4: 오버플로 및 절대 위치 지정

실패 숨기기 및 스크롤 수정

오버플로:숨겨진 실패

.overflow-hidden{
    width:300px;
    height:200px;
    border:5px solid #333;
    overflow:auto
}
img{postion:absolute;}

로그인 후 복사

실패 이유 절대적으로 배치된 요소는 상위 오버플로 속성에 의해 항상 잘리지는 않습니다. 특히 오버플로가 절대적으로 배치된 요소와 해당 요소가 포함된 블록 사이에 있는 경우에는 더욱 그렇습니다. 컨테이닝 블록은 "위치:상대적/절대/고정"으로 선언된 상위 요소를 참조합니다. 이것이 없으면 본문 요소

무효화를 방지하는 방법

1.오버플로 요소 자체가 포함 블록이 됩니다

2. 오버플로 요소의 하위 요소는 포함 블록이 됩니다 3. 모든 적합한 변환 문은 포함 블록으로 처리됩니다

오버플로 실패의 마법 같은 효과

h0{height:0;}
.ovh{overflow:hidden;}
.tr{text-align:right;}
.abs{position:absolute;}
<div class="h0 ovh tr">
    <img src="" class="abs ml10 mt30"></img>
</div>

로그인 후 복사

다섯 번째: 오버플로의 스타일 성능에 의존

resize Stretching

css3에는 하나가 있습니다. 속성 이름은 resize이며 요소 크기를 늘릴 수 있습니다.

.resize:both 가로 및 세로 모두 늘이기 .resize:horizontal 가로 방향으로만 늘이기

resize:vertical 세로 방향으로만 늘이기 그러나 이 명령문이 적용되려면 오버플로 속성이 필요합니다. 요소의 값을 볼 수 없습니다!

<button style="resize:both;overflow:hidden">按钮</button>

로그인 후 복사

이런 버튼으로 스트레칭 효과를 얻을 수 있어요.

텍스트 필드의 기본 오버플로는 자동이므로 텍스트 필드에는 자체 크기 조정 속성이 있습니다.

텍스트 필드의 크기 조정 드래그 영역 크기는 17*17픽셀입니다. 즉, 스크롤바의 크기

줄임표 텍스트가 오버플로되어 생략됩니다.

text-overflow:ellipsis
<button style="width:200px;white-space:norwrap;text-overflow:ellipsis;overflow:hidden">
  这是一个按钮，宽度仅200像素
</button>

로그인 후 복사

여섯: 오버플로 및 앵커 포인트 기술

앵커 포인트 위치 지정의 본질: 변수 컨테이너의 스크롤 높이

트리거링 앵커 포인트 정렬

1. URL 주소의 앵커 체인 및 앵커 요소

2. 초점을 맞출 수 있는 앵커 요소에 초점이 맞춰져 있습니다.

앵커 포인트 위치 지정의 역할
1. 빠른 포지셔닝
2. 앵커 위치 지정 및 오버플로 탭 기술

적용 시나리오: 단일 페이지 적용

위 내용은 CSS의 오버플로 속성에 대한 몇 가지 팁, 오버플로 속성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!