CSS 위치 지정 조작을 통한 동적 요소 크기
- 不言원래의
- 2018-11-07 16:23:032955검색
이 글에서는 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);
}전체 코드:
위 내용은 CSS 위치 지정 조작을 통한 동적 요소 크기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!