In-depth understanding of five common CSS layout frameworks-CSS Tutorial-php.cn

In-depth understanding of five common CSS layout frameworks

WBOY

Release： 2024-01-16 08:41:06

Original

1056 people have browsed it

In-depth understanding of five common CSS layout frameworks

Understand the CSS layout framework: analysis of five common layouts

In web design and development, CSS layout is a very important aspect. A good layout can make a web page more beautiful and more functional. Understanding the CSS layout framework can help us better master the layout skills of web pages. This article will introduce five common CSS layouts and provide specific code examples.

1. Fluid layout (fluid positioning)

Fluid layout is a layout method that is adaptive to the screen size. Primarily use percentages to set the width or height of elements to accommodate various screen sizes. The following is a simple flow layout example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        width: 100%;
      }
      .left-panel {
        width: 25%;
        background-color: yellow;
        float: left;
      }
      .right-panel {
        width: 75%;
        background-color: lightblue;
        float: right;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left-panel">
        <p>This is left panel.</p>
      </div>
      <div class="right-panel">
        <p>This is right panel.</p>
      </div>
    </div>
  </body>
</html>

Copy after login

2. Grid layout (Grid)

Grid layout is a two-dimensional layout method that can easily create complex grid structures. . Using grid layout, you create rows and columns in a container and then place elements into specified locations. The following is a simple grid layout example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 10px;
      }
      .item {
        background-color: lightblue;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
    </div>
  </body>
</html>

Copy after login

3. Flexible layout (Flexbox)

Flexible layout is a flexible layout method that can automatically adjust the size and size of elements within a container. Location. Using flexible layout, various layout needs can be easily realized. The following is a simple flexible layout example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: flex;
        justify-content: space-between;
      }
      .item {
        background-color: lightblue;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
  </body>
</html>

Copy after login

4. Floating layout (Float)

Floating layout is a technology used to implement multi-column layout. By floating elements to specified positions, you can achieve the effect of multiple columns. The following is a simple floating layout example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        overflow: hidden;
      }
      .item {
        width: 30%;
        background-color: lightblue;
        float: left;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
  </body>
</html>

Copy after login

5. Positioning layout (Position)

Positioning layout is a way of laying out elements by specifying their position in the document flow. By setting the element's position property, you can position the element relative to its parent element or the document window. The following is a simple positioning layout example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        position: relative;
        height: 200px;
        background-color: lightblue;
      }
      .item {
        width: 100px;
        height: 100px;
        background-color: yellow;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item"></div>
    </div>
  </body>
</html>

Copy after login

Summary:

This article introduces five common CSS layout frameworks, namely fluid layout, grid layout, elastic layout, and floating layout and positioning layout. By learning these layout frameworks, we can better master the skills of web page layout, and be able to choose the appropriate layout method according to actual needs. Hope this article is helpful to everyone!

The above is the detailed content of In-depth understanding of five common CSS layout frameworks. For more information, please follow other related articles on the PHP Chinese website!