CSS에서 백분율 값을 사용하는 방법을 알아보세요
백분율 값은 CSS에서 다양한 요소 크기와 페이지 레이아웃을 디자인하는 기본 방법입니다. 여기서는 CSS에서 백분율 값을 완전히 익히도록 안내합니다. 백분율을 px로 변환하는 방법 등을 사용해보세요~
퍼센트는 상위 요소의 동일한 속성의 크기를 기준으로 합니다.
글꼴을 설정하는 데 사용되는 경우 상위 요소의 글꼴 크기를 기준으로 합니다.
대부분의 브라우저에서 및
태그의 기본 글꼴 크기는 100%입니다.
html {font-size: 100%;}
body {font-size: 100%;}
100% = 1em = 16px = 12pt로그인 후 복사
너비와 같은 글꼴 이외의 크기를 설정하는 데 사용되는 경우 및 height 의 경우 길이 값(%)은 동일한 속성을 가진 상위 요소의 길이 값을 기준으로 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
p.parent {
margin:150px;
width: 200px;
height: 200px;
border: 1px solid blue;
}
p.child {
width: 50%;
height: 50%;
border: 1px dashed black;
}
</style>
</head>
<body>
<p class="parent">
<p class="child"></p>
</p>
</body>
</html>로그인 후 복사
부모 요소에 대해 좀 더 자세히 알아보기: 부모 요소란 무엇인지, 상대 위치 지정(relative), 절대 위치 지정(absolute), float(float), 고정(fixed) 방법 상위 요소를 찾고 계십니까?
HTML은 태그 안에 태그가 있는 트리 구조를 가지므로 일반적으로 부모-자식 관계가 명확합니다.
<p class="parent">
<p class="child"></p>
</p>로그인 후 복사
1. 상대적으로 배치된 요소인 의 상위 요소는 태그 중첩을 따릅니다.
2. 절대 위치 지정 요소 , 해당 상위 요소는 가장 가까운 위치 지정 요소(절대 위치 지정, 상대 위치 지정, 고정, 부동 제외) 또는 창 크기(위치 지정 요소가 없는 경우)입니다.
3. 플로팅 요소 , 해당 상위 요소도 태그 중첩을 준수합니다.
4. 고정 요소 (특수 절대 위치 지정), 해당 상위 요소는 창(html이나 본문의 크기가 아니라 기본적으로 콘텐츠를 표시하기 위해 브라우저에서 사용하는 영역의 크기)입니다.
절대 위치 지정에만 주의하세요. 나머지는 상대적으로 간단합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
html {
width:1000px;
}
body {
width:800px;
}
#box {
width:50%;
height:300px;
position: absolute;
margin-left: 200px;
border: 1px solid red;
}
#can {
position:absolute;
top:100px;
left:100px;
width:50%;
height:50%;
border:1px solid black;
}
</style>
</head>
<body>
<p id="box">
<p id="can"></p>
</p>
</body>
</html>로그인 후 복사
상자 너비는 창문의 절반, 캔의 너비와 높이는 상자 너비와 높이의 절반입니다.
can을 위치: 고정으로 설정하면 상위 요소는 더 이상 상자가 아니라 브라우저 창이 됩니다.
캔의 너비와 높이는 창문 너비와 높이의 절반입니다.
플로팅 요소의 상위 요소는 일반 요소의 상위 요소와 동일합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
html {
width:1000px;
}
body {
width:800px;
}
#box {
width:50%;
height:300px;
position: absolute;
margin-left: 200px;
border: 1px solid red;
}
#can {
float:left;
width:50%;
height:50%;
border:1px solid black;
}
</style>
</head>
<body>
<p id="box">
<p id="can"></p>
</p>
</body>
</html>로그인 후 복사
참고: 패딩과 여백을 백분율로 설정한 경우 위쪽, 아래쪽, 왼쪽, 오른쪽 값은 표준 너비입니다. 상위 요소로 이동합니다.
픽셀에 대한 백분율
예 1: 여백
<p style="width: 20px">
<p id="temp1" style="margin-top: 50%">Test top</p>
<p id="temp2" style="margin-right: 25%">Test rightright</p>
<p id="temp3" style="margin-bottom: 75%">Test bottombottom</p>
<p id="temp4" style="margin-left: 100%">Test left</p>
</p>
로그인 후 복사
얻어진 오프셋은 다음과 같습니다.
temp1.marginTop = 20px * 50% = 10px;
temp2.marginRight = 20px * 25% = 5px;
temp3.marginBottom = 20px * 75% = 15px;
temp4.marginLeft = 20px * 100% = 20px;
로그인 후 복사
그런 다음 패딩 값을 속성이 적용된 관련 요소를 기준으로 계산할 줄 알았는데, 놀랍게도 패딩도 상위 요소의 너비를 기준으로 계산되었습니다. 속성이 적용된 성능은 마진과 일치합니다. (한 문장 더: 요소의 너비를 백분율로 설정할 경우 상위 컨테이너의 너비를 기준으로 계산됩니다. 요소의 세로 백분율 설정도 높이가 아닌 컨테이너의 너비를 기준으로 합니다.)
그러나 구덩이가 있습니다. 위의 내용은 모두 위치가 지정되지 않은 요소에 대한 것입니다. 정적으로 배치되지 않은 요소에 대해 위쪽, 오른쪽, 아래쪽, 왼쪽의 백분율 값을 어떻게 계산하는지 궁금합니다.
예 2: 위치 지정된 요소
<p style="height: 100px; width: 50px">
<p id="temp1" style="position: relative; top: 50%">Test top</p>
<p id="temp2" style="position: relative; right: 25%">Test rightright</p>
<p id="temp3" style="position: relative; bottom: 75%">Test bottombottom</p>
<p id="temp4" style="position: relative; left: 100%">Test left</p>
</p>
로그인 후 복사
결과 오프셋은 다음과 같습니다.
temp1.top = 100px * 50% = 50px;
temp2.rightright = 100px * 25% = 25px;
temp3.bottombottom = 100px * 75% = 75px;
temp4.left = 100px * 100% = 100px;
로그인 후 복사
위치 지정된 요소의 경우 이 값은 다음과 같습니다. 또한 상위 요소를 기준으로 하지만 위치가 지정되지 않은 요소와는 달리 상위 요소의 너비가 아닌 높이를 기준으로 합니다.
상위 요소에 높이가 없으면 백분율 값이 대신 자동으로 처리됩니다
좀 혼란스럽겠지만 기억하세요. 여백과 패딩의 경우 백분율은 요소의 너비에 따라 계산됩니다. 상위 요소, 위치가 지정된 요소의 경우 상위 요소의 높이를 기준으로 계산됩니다.
위 내용은 CSS에서 백분율 값을 사용하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
