CSS 위치 지정 조작을 통한 동적 요소 크기-CSS 튜토리얼-php.cn

CSS 위치 지정 조작을 통한 동적 요소 크기

不言

풀어 주다： 2018-11-07 16:23:03

원래의

3019명이 탐색했습니다.

이 글에서는 CSS 위치 지정 작업을 통해 동적 요소 크기에 대한 내용을 소개합니다. 관심 있는 친구들은 더 이상 고민하지 말고 구체적인 내용을 살펴보겠습니다.

너비와 높이 또는 JS를 사용하지 않고 볼륨에 요소를 제공하는 팁.

이것은 매우 간단한 트릭이지만 많은 사람들이 그것을 모릅니다. (추천 튜토리얼: CSS 비디오 튜토리얼)

화면당 100픽셀을 제외한 모든 화면을 포함하는 모달 상자를 만들고 싶다고 가정하면 이 문제를 어떻게 해결하시겠습니까?

각 테두리의 100px을 제외하고 모든 화면을 덮는 모달을 만들고 싶다고 가정하면 이 문제를 어떻게 해결하시겠습니까?

HTML

<div class="popup">some content</div>

로그인 후 복사

먼저 div에 position:fixed 속성을 추가해야 합니다.

나중에 뷰포트의 각 측면에서 100px 떨어진 곳에 모달을 배치하려고 하는데 4개의 위치 속성 매개변수(상단, 오른쪽, 하단, 왼쪽)를 모두 제공하면 안되는 이유는 무엇입니까?

해결책은 고정/절대 위치 지정의 4가지 매개변수(상단: 100px, 오른쪽: 100px, 하단: 100px; 왼쪽: 100px;)를 모두 제공할 수 있다는 것입니다.

이렇게 하면 각 측면의 100px부터 동적 요소 크기를 적절하게 만들 수 있습니다.

CSS

.popup{  
      position:fixed;
      z-index:5;
      left:100px;
      right:100px;
      top:100px; 
      bottom:100px;
      /*some styles*/
      background-color:#ccc;
      border-radius:10px;
      border:solid 3px #000;
      padding:20px; 
      }

로그인 후 복사

결과 div는 JS 한 줄도 없는 자동 크기 조정 모달 상자입니다.

전체 코드:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	.popup{  
  position:fixed;
  z-index:5;
  left:100px;
  right:100px;
  top:100px; 
  bottom:100px;
  background-color:#ccc;
  border-radius:10px;
  border:solid 3px #000;
  padding:20px;  
}
</style>
</head>
<body>
<div class="popup">文字内容</div>
</body>
</html>

로그인 후 복사

이제 패턴 상자 아래에 마스크를 추가한다고 가정해 보겠습니다. 똑같은 아이디어입니다!

해결책은 다음과 같습니다.

HTML:

<div class="mask"></div>

로그인 후 복사

CSS

.mask{
  position:fixed;
  z-index:2;
  left:0;
  right:0;
  top:0; 
  bottom:0;  
  background-color:rgba(0,0,0,0.8);  
  }

로그인 후 복사

전체 코드:










文字内容
<div class="mask"></div>

로그인 후 복사

위 내용은 CSS 위치 지정 조작을 통한 동적 요소 크기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!