웹페이지 레이아웃 효과를 얻기 위해 블록 수준 요소와 인라인 요소를 올바르게 사용하는 방법-HTML 튜토리얼-php.cn

웹페이지 레이아웃 효과를 얻기 위해 블록 수준 요소와 인라인 요소를 올바르게 사용하는 방법

WBOY

풀어 주다： 2024-01-07 08:10:56

원래의

633명이 탐색했습니다.

웹페이지 레이아웃 효과를 얻기 위해 블록 수준 요소와 인라인 요소를 올바르게 사용하는 방법

블록 수준 요소와 인라인 요소를 올바르게 사용하여 웹 페이지 레이아웃 효과를 얻는 방법

웹 페이지를 레이아웃할 때 블록 수준 요소와 인라인 요소를 자주 사용합니다. 블록 수준 요소와 인라인 요소는 HTML의 두 가지 기본 요소 유형이며 웹 페이지 레이아웃에서 서로 다른 역할을 합니다. 이 글에서는 블록 수준 요소와 인라인 요소를 올바르게 사용하여 웹 페이지 레이아웃 효과를 얻는 방법을 자세히 소개하고 구체적인 코드 예제를 제공합니다.

1. 블록 수준 요소의 특성 및 적용 시나리오

블록 수준 요소에는 다음과 같은 특성이 있습니다.

각 블록 수준 요소는 자체 줄을 차지합니다. 즉, 자동으로 줄 바꿈됩니다.
블록 수준 요소의 너비는 기본적으로 상위 요소의 100%로 설정되며 너비 속성을 설정하여 너비를 맞춤설정할 수 있습니다.
블록 수준 요소는 여백, 패딩 등과 같은 다양한 상자 모델 속성을 설정할 수 있습니다.
블록 수준 요소는 다른 블록 수준 요소와 인라인 요소를 중첩할 수 있습니다.

블록 수준 요소의 일반적인 적용 시나리오는 다음과 같습니다.

페이지 레이아웃의 기본 구조: 머리글, 탐색, 섹션, 기사, 옆, 바닥글 등
텍스트 블록: p, h1~h6, div 등
목록: ul, ol 등
테이블: 테이블, tr, td 등

다음은 블록 수준 요소를 사용하여 웹 페이지 레이아웃을 구현하는 샘플 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 600px;
      margin: 0 auto;
    }
    .header {
      background-color: #f1f1f1;
      height: 100px;
    }
    .sidebar {
      background-color: #d3d3d3;
      float: left;
      width: 200px;
      height: 400px;
    }
    .content {
      background-color: #ffffff;
      float: right;
      width: 400px;
      height: 400px;
    }
    .footer {
      background-color: #f1f1f1;
      clear: both;
      height: 100px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">头部</div>
    <div class="sidebar">侧边栏</div>
    <div class="content">内容区域</div>
    <div class="footer">底部</div>
  </div>
</body>
</html>

로그인 후 복사

위 코드에서 컨테이너는 전체 페이지 콘텐츠를 포함하는 데 사용되는 블록 수준 요소입니다. 헤더, 사이드바, 콘텐츠 및 바닥글은 각각 웹페이지의 헤더, 사이드바, 콘텐츠 영역 및 하단을 정의합니다. width, float 등의 속성을 설정하면 페이지의 기본 레이아웃이 완성됩니다.

2. 인라인 요소의 특징 및 적용 시나리오

인라인 요소는 다음과 같은 특징을 가지고 있습니다.

인라인 요소는 배타적인 줄을 차지하지 않습니다. 즉, 다른 요소와 같은 줄에 표시될 수 있습니다.
인라인 요소의 너비는 내용에 따라 결정되며 너비와 높이는 설정할 수 없습니다.
여백, 패딩 등 인라인 요소의 상자 모델 속성은 세로 방향에서 유효하지 않습니다.
인라인 요소는 블록 수준 요소를 중첩할 수 없지만 다른 인라인 요소는 중첩할 수 있습니다.

인라인 요소의 일반적인 적용 시나리오는 다음과 같습니다.

텍스트: 범위, a, em, 강한 등
사진: img.
양식 요소: 입력, 버튼 등

다음은 인라인 요소를 사용하여 웹 페이지 레이아웃을 구현하는 샘플 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      text-align: center;
    }
    .container {
      display: inline-block;
      border: 1px solid #000000;
      padding: 20px;
    }
    .button {
      background-color: #f1f1f1;
      padding: 10px 20px;
      border-radius: 5px;
      text-decoration: none;
      color: #000000;
    }
  </style>
</head>
<body>
  <p>这是一个居中的段落。</p>
  <div class="container">
    <h3>标题</h3>
    <p>内容</p>
    <a href="#" class="button">按钮</a>
  </div>
</body>
</html>

로그인 후 복사

위 코드에서 p는 인라인 요소이고 text-align 속성을 center로 설정하여 해당 텍스트를 중앙에 배치합니다. 컨테이너는 인라인 블록 수준 요소로, 같은 줄에 표시할 수 있는 display:inline-block 속성을 사용하며 너비, 높이, 테두리 등의 속성을 설정할 수 있습니다. 버튼은 인라인 요소로 패딩, 배경색, 둥근 모서리 등의 속성을 설정하여 버튼의 스타일을 구현합니다.

요약:

블록 수준 요소와 인라인 요소 모두 웹 페이지 레이아웃에서 중요한 역할을 합니다. 블록 수준 요소와 인라인 요소를 올바르게 사용하면 다양한 웹 페이지 레이아웃 효과를 얻을 수 있습니다. 특정 코드 예제를 통해 블록 수준 요소와 인라인 요소를 사용하여 웹 페이지를 레이아웃하는 방법을 더 잘 이해하고 익힐 수 있습니다. 이 글이 독자들에게 도움이 되기를 바랍니다.

위 내용은 웹페이지 레이아웃 효과를 얻기 위해 블록 수준 요소와 인라인 요소를 올바르게 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!