CSS에서 오버플로 속성을 사용하는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS에서 오버플로 속성을 사용하는 방법

不言

Dec 10, 2018 pm 02:19 PM

오버플로 속성

CSS에서 오버플로 속성은 자주 사용되는 속성입니다. 이번 글에서는 CSS에서 오버플로 속성의 구체적인 사용법을 살펴보겠습니다.

CSS에서 오버플로 속성을 사용하는 방법

먼저 CSS에서 오버플로 속성을 사용하는 방법 속성의 값이 무엇인지 살펴보겠습니다.

CSS에서 오버플로 속성을 사용하는 방법 속성은 콘텐츠가 요소의 상자를 넘을 때 발생하는 상황을 지정합니다.

CSS에서 오버플로 속성을 사용하는 방법에는 다음과 같은 네 가지 속성 값이 있습니다. 

visible: 초기 값, 콘텐츠는 잘리지 않고 요소 상자 외부에 표시됩니다.

스크롤: 콘텐츠가 잘리지만 나머지 콘텐츠를 볼 수 있도록 브라우저에 스크롤 막대가 표시됩니다.

숨김: 콘텐츠가 잘리고 나머지 콘텐츠는 표시되지 않습니다.

auto: 콘텐츠가 잘리면 브라우저에 스크롤 막대가 표시되어 나머지 콘텐츠를 볼 수 있습니다.

오버플로 속성의 이 4가지 값에 대해 자세히 이야기해보겠습니다

구체적인 예를 살펴보겠습니다

코드는 다음과 같습니다

HTML 코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS CSS에서 오버플로 속성을 사용하는 방법</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>
    <div class="hid">
      <p>
        The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.
      </p>
    </div>
    <br>
    <div class="scr">
      <p>
        The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.
      </p>
    </div>
    <br>
    <div class="vis">
      <p>
        The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.
      </p>
    </div>
  </body>
</html>

CSS 코드

/*hidden*/
div.hid{
  width: 200px;
  height: 100px;
  CSS에서 오버플로 속성을 사용하는 방법: hidden;
  background-color: #FF9999;
}
/*scroll*/
div.scr{
  width: 200px;
  height: 100px;
  CSS에서 오버플로 속성을 사용하는 방법: scroll;
  background-color: #99FF99;
}
/*visible*/
div.vis{
  width: 200px;
  height: 100px;
  CSS에서 오버플로 속성을 사용하는 방법: visible;
  background-color: #9999FF;
}

다음 결과

CSS에서 오버플로 속성을 사용하는 방법의 속성값을 숨기면 효과는 다음과 같습니다

CSS에서 오버플로 속성을 사용하는 방법

숨기기의 경우 나머지 부분은 표시되지 않으며, 나머지 내용은 스크롤할 수 없습니다.

CSS에서 오버플로 속성을 사용하는 방법의 속성값이 스크롤일 때 효과는 다음과 같습니다

CSS에서 오버플로 속성을 사용하는 방법

스크롤의 경우 표시되지 않는 내용을 스크롤할 수 있습니다. 기본적으로 텍스트는 가로로 줄바꿈되고 스크롤 막대는 세로로 나타납니다.

공백 설정: CSS에서 이제 랩(줄을 자동으로 변경하지 않음을 의미)하고 가로로 스크롤할 수도 있습니다.

CSS 코드

div.scr{
  width: 200px;
  height: 100px;
  white-space:nowrap;
  CSS에서 오버플로 속성을 사용하는 방법: scroll;
  background-color: #99FF99;
}

효과는 다음과 같습니다

CSS에서 오버플로 속성을 사용하는 방법

또한 Overflow-x 및 Overflow-y 속성을 사용하여 세로 및 가로 스크롤 표시에 대한 보다 세부적인 설정을 할 수도 있습니다. 바.

CSS에서 오버플로 속성을 사용하는 방법 속성 값이 표시되면 효과는 다음과 같습니다.

CSS에서 오버플로 속성을 사용하는 방법

표시되면 상자에서 오버플로되어 표시됩니다. 보라색 부분은 div 상자입니다. 기본적으로 텍스트는 div의 가로 너비에 맞춰 배치되고 세로 방향으로 표시됩니다.

이것은 스크롤 속성 값과 동일합니다. 공백 설정: CSS의 nowrap도 가로로 스크롤할 수 있습니다.

또한 상자 높이가 설정되지 않은 경우 상자 높이가 자동으로 변경됩니다.

div.vis{
  width: 200px;
  /* height: 100px;  */
  CSS에서 오버플로 속성을 사용하는 방법: visible;
  background-color: #9999FF;
}

효과는 다음과 같습니다

CSS에서 오버플로 속성을 사용하는 방법

마지막으로 CSS에서 오버플로 속성을 사용하는 방법 속성 값이 auto인 경우

HTML 코드

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS CSS에서 오버플로 속성을 사용하는 방법</title>
  <link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<div class="aut">
  <p>
    The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.
      </p>
    </div>
  </body>
</html>

CSS 코드

div.aut{
	width: 200px;
	height: 100px;
	CSS에서 오버플로 속성을 사용하는 방법: auto;
	background-color: red;
}

의 구체적인 상황을 살펴보겠습니다. 브라우저에서 실행하는 것과 스크롤하는 것은 비슷합니다

CSS에서 오버플로 속성을 사용하는 방법

위 내용은 CSS에서 오버플로 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

핫 AI 도구

뜨거운 도구

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