Home >Web Front-end >HTML Tutorial >How to correctly use block-level elements and inline elements to achieve web page layout effects

How to correctly use block-level elements and inline elements to achieve web page layout effects

WBOYOriginal: 2024-01-07 08:10:56631browse

When laying out web pages, we often use block-level elements and inline elements. Block-level elements and inline elements are two basic element types in HTML, and they play different roles in web page layout. This article will introduce in detail how to correctly use block-level elements and inline elements to achieve web page layout effects, and provide specific code examples.

1. Characteristics and application scenarios of block-level elements

Block-level elements have the following characteristics:

Each block-level element will occupy its own line, that is, it will wrap automatically. .
The width of block-level elements defaults to 100% of the parent element. You can customize the width by setting the width attribute.
Block-level elements can set various box model attributes, such as margin, padding, etc.
Block-level elements can nest other block-level elements and inline elements.

Common application scenarios for block-level elements include:

The basic structure of page layout: header, nav, section, article, aside, footer, etc.
Text block: p, h1~h6, div, etc.
List: ul, ol, etc.
Table: table, tr, td, etc.

The following is an example code that uses block-level elements to implement web page layout:

<!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>

In the above code, container is a block-level element, which is used to contain the entire page content. Header, sidebar, content and footer respectively define the header, sidebar, content area and bottom of the web page. They are also block-level elements. By setting attributes such as width and float, the basic layout of the page is achieved.

2. Characteristics and application scenarios of inline elements

Inline elements have the following characteristics:

Inline elements will not occupy a line alone, that is, they can be placed in a row with other elements. displayed on the same line.
The width of an inline element is determined by its content, and the width and height cannot be set.
The box model attributes of inline elements, such as margin, padding, etc., are invalid in the vertical direction.
Inline elements cannot nest block-level elements, but they can nest other inline elements.

Common application scenarios for inline elements are:

Text: span, a, em, strong, etc.
Picture: img.
Form elements: input, button, etc.

The following is an example code for using inline elements to implement web page layout:

<!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>

In the above code, p is an inline element. By setting the text-align attribute to center, it The text is centered. Container is an inline block-level element. It uses the display:inline-block attribute, which can be displayed in the same line, and can set attributes such as width, height, and border. Button is an inline element. By setting properties such as padding, background color, and rounded corners, the button style is implemented.

Summary:

Block-level elements and inline elements both play an important role in web page layout. The correct use of block-level elements and inline elements can help us achieve various web page layout effects. Through specific code examples, we can better understand and master how to use block-level elements and inline elements for web page layout. Hope this article can be helpful to readers.

The above is the detailed content of How to correctly use block-level elements and inline elements to achieve web page layout effects. For more information, please follow other related articles on the PHP Chinese website!

html display margin padding input ul table td tr

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Learn more about Canvas: Uncover its unique featuresNext article：Learn more about Canvas: Uncover its unique features

See more

How to correctly use block-level elements and inline elements to achieve web page layout effects

Related articles