CSS 오버플로에 대한 심층적인 이해: 숨김, 스크롤, 표시

레이아웃 중에 콘텐츠가 상자 크기를 초과하는 경우 CSS 속성 Overflow를 사용하여 개체 너머의 콘텐츠를 숨길 수도 있습니다. 또한 스크롤 막대의 초과 부분을 표시하거나 숨길 수도 있습니다. 오버플로 스타일.

1. 오버플로 구문 값

overflow: visible | auto | hide | scroll

물론, 오버플로는 X(overflow-x) 및 Y(overflow-y) 방향으로 스크롤 막대 스타일을 별도로 설정할 수 있습니다. 그 값과 적용은 동일합니다. 오버플로의 구문, 사용법 및 구조는 동일합니다.

2. 오버플로 매개변수 값 설명

visible: 내용을 자르거나 스크롤 막대를 추가하지 마세요. 이 기본값이 명시적으로 선언되면 개체는 개체가 포함된 창이나 프레임의 크기에 맞게 잘립니다. 그리고 클립 속성 설정이 무효화됩니다

auto: 본문 개체와 텍스트 영역의 기본값입니다. 필요한 경우 콘텐츠를 자르고 스크롤 막대를 추가하세요. DIV의 기본값도 이 값이지만, 설정해야 할 때 설정할 수 있습니다.

hidden: 개체 크기를 초과하는 콘텐츠를 표시하지 않습니다.

스크롤: 3. Overflow에서는 개체의 내용이 지정된 높이와 너비를 초과할 때 개체의 내용을 검색하거나 설정하는 방법을 구체적으로 설명합니다.

스크롤 막대를 숨기려면 텍스트 영역 개체를 숨겨진 값으로 설정하세요. 테이블의 경우 table-layout 속성이 고정으로 설정되면 td 객체는 기본값이 Hidden인 오버플로 속성을 지원합니다. 숨김, 스크롤 또는 자동으로 설정하면 td 크기를 초과하는 콘텐츠가 잘립니다. 표시로 설정하면 방향 속성 설정에 따라 오른쪽이나 왼쪽 셀에 추가 텍스트가 오버플로됩니다. 이 속성은 IE5부터 MAC 플랫폼에서 사용할 수 있습니다.

4. 오버플로 학습에 집중

오버플로: 표시 이 스타일은 스크롤 막대를 숨길 수 있지만 마우스로 위아래로 당길 수 있습니다.

Overflow:hidden은 개체가 설정된 너비와 높이를 초과하는 콘텐츠를 숨깁니다.Overflow:scroll 이 스타일을 사용하면 콘텐츠가 높이 또는 너비를 초과하는지 여부에 관계없이 스크롤 막대가 표시됩니다.

5. 오버플로: 숨김 및 오버플로: 스크롤 연습

동일한 너비와 높이 설정을 사용합니다. 하나는 너비와 높이를 벗어나는 콘텐츠를 숨기고 다른 하나는 스크롤 막대를 표시하는 데 사용됩니다. 케이스 프레임의 두 개체에 CSS 테두리를 추가합니다.

CSS 코드:

.divcss5-hidden,.divcss5-scroll{width:300px; height:100px;line-height:25px; border:1px solid #333} 
.divcss5-hidden{overflow:hidden; height:50px} 
.divcss5-scroll{overflow:scroll; margin-top:10px}

html 코드:

<div class="divcss5-hidden"> 
隐藏超出的内容但不显示滚动,divcss5的overflow:hidden测试示范 
案例，设置了高和宽后对象，内容多不超出对象 
</div> 
<div class="divcss5-scroll"> 
<img src="http://www.divcss5.com/uploads/allimg/130219/1_130219231214_1.jpg" /> 
</div>

요약: 오버플로 CSS 스타일은 표시 스크롤 막대를 숨기는 데 자주 사용됩니다. 동시에 크기, 너비 및 크기를 초과하는 표시 개체의 내용을 숨길 수도 있습니다. 매우 간단합니다. 이 단어를 철자하지 못해도 문제가 되지 않습니다. 자주 사용되는 위치를 보면 DW 소프트웨어의 도움으로 기본적인 문법 구조를 빠르게 입력할 수 있습니다.

위 내용은 CSS 오버플로에 대한 심층적인 이해: 숨김, 스크롤, 표시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!