>웹 프론트엔드 >CSS 튜토리얼 >CSS의 hight 속성에 대한 자세한 설명

CSS의 hight 속성에 대한 자세한 설명

迷茫
迷茫원래의
2017-03-25 14:12:142778검색

디렉터리 구조:

콘텐츠 구조 [-]

hight 속성 값 유형 목록

tr>
value describtion
auto 默认
length 绝对长度
% 相对长度
inherit 继承

설명
자동

기본값

길이

td>

절대 길이
%

상대 길이

상속 상속

여기서 저자는 상대 길이의 사용법을 주로 소개합니다. 절대 길이의 경우 독자는 CSS 크기 단위 px % em rem에 대한 자세한 설명을 참조할 수 있습니다.

높이의 % 값 사용 정의:

이 값은 이를 포함하는 블록 수준 요소의 백분율을 기준으로 한 백분율입니다. .

예:

<!DOCTYPE html><html>
  <head>
    <title>height.html</title>
    <meta name="content-type" content="text/html; charset=UTF-8"><style>p{
  width:50%;
  height:50%;
  border:1px solid red;}body{
  border:1px solid green;
  display:block;
  height:100px;}</style></head><body><p>I am box with width 50% and height 50%</p></body></html>

독자는 Chrome 브라우저에서 "F12"를 누르고 "요소"를 선택하여 쉽게 볼 수 있습니다. e388a4556c0f65e1904146cc1a846bee의 높이가 정확히 상위 요소 6c04bd5ca3fcae76e30b72ad730ca86d의 50%인 것을 확인하세요. 참고 사항위의 예에서는 이해를 확인합니다. 높이의 상대값을 활용하는 방법. 그러나 독자는 상위 요소가 높이를 정의하지 않으면 백분율을 사용한 하위 요소의 높이가 작동하지 않는다는 점에 유의해야 합니다. 이때 높이 값은 절대값으로 변경되지 않는 한 자동 값과 동일합니다. . 여기서는 hight가 정의되어 있지 않습니다. 즉, height를 전혀 쓰지 않는다는 의미이며, height를 0px로 정의하는 것과는 다릅니다. 독자는 다음 코드를 시도해 볼 수 있습니다.
<body id="b" style="width:0px;height:0px;">
<br>
<p id="er" style="width:50%;height:50%;border:1px solid red;"></p>
그런 다음 본문의 스타일 속성을 제거하고 다시 시도하세요. 아아아아

위 내용은 CSS의 hight 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.