1. 요소의 margin-top, margin-bottom 및 padding-top, padding-bottom이 백분율을 단위로 사용하는 경우 높이가 아닌 상위 요소의 너비를 기준으로 합니다. 그림과 같이
<style type="text/css"> .parent{ outline: 1px solid orange; width: 200px; height: 300px; padding: 10px; margin: 10px; } .child{ outline: 1px solid purple; width: 200px; height: 80px; padding-top: 10%; /*20px = 父容器的width值200px * 10% */ padding-bottom: 5%; /*10px = 200px * 5% */ margin-top: 20%; /*40px = 200px * 20%*/ margin-bottom: 15%; /*30px = 200px * 15%*/ }<body> <p class="parent"> <p class="child"></p> </p> </body>
하위 상자 매개변수는 다음과 같습니다.
2. 요소의 위치 지정 속성을 포함하는 것은 백분율이며, 백분율은 상위 요소의 높이에 상대적입니다. 왼쪽과 오른쪽은 상위 요소의 너비를 기준으로 합니다.
<span style="max-width:90%">.parent{ outline: 1px solid orange; width: 200px; height: 300px; padding: 0px; margin: 0px; position: relative; } .child{ outline: 1px solid purple; width: 200px; height: 80px; position: absolute; top: 5%; /* 15px = 300px * 5% 上边框离父盒子上边框15px的距离*/ left: 20%; /* 40px = 200px * 20% 左边框离父盒子左边框40px的距离 <br/> 也就是子盒子左上角的坐标为x=15,y=40(父盒子左上角为原点) */ }</span>
3 테두리 너비는 백분율로 표시할 수 없습니다.
4.width:100%
4.1 상위 컨테이너에 절대값이 있는 경우 하위 요소를 배치할 때 하위 요소 설정 width:100%는 실제로 상위 컨테이너의 패딩+내용을 기준으로 한 너비를 나타냅니다.
r 그림과 같이:
<style type="text/css"> .parent{ outline: 1px solid orange; width: 200px; height: 300px; padding: 10px; margin: 10px; position: relative; } .child{ outline: 1px solid purple; width: 100%; /* width = 220px = 父容器的padding+content*/ height: 80px; position: absolute; top: 0; left: 0; } </style>
4.2 자식 요소가 절대 위치가 아닌 요소인 경우(상대 위치 지정 가능) 또는 위치 지정이 없는 경우 너비 :100%는 인덱스입니다. 요소의 콘텐츠는 상위 요소의 콘텐츠 너비와 같습니다.
.parent{ outline: 1px solid orange; width: 200px; height: 300px; padding: 10px; margin: 10px; } .child{ outline: 1px solid purple; width: 100%; /* width:200px = 父盒子的content*/ height: 80px; }
.parent{ outline: 1px solid orange; width: 200px; height: 300px; padding: 10px; margin: 10px; position: relative; } .child{ outline: 1px solid purple; width: 100%; height: 80px; position: relative; }
위 내용은 CSS의 몇 가지 팁 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!