Instead of looking at common layouts, this article looks at the placement of sibling elements and parent-child elements. With an understanding of these two points, you can implement any type of layout.

Positional relationships between parent and child elements

<html>
  <head>
    <title></title>
    <script>
      function buttonHandler(a) {
        alert('Hello')}</script>
  </head>
  <body>
    <button onclick="buttonHandler()">button</button>
  </body>
</html>
Copy the code

Going back to the original button example, let’s ignore the head tag and its contents. The nodes that affect the display of buttons are HTML -> body -> button

The positioning type of an element is determined by the position attribute, which can have five types:

  • The static default values
  • Absolute: The element is positioned relative to the first parent element other than static
  • Fixed Absolute positioning, always relative to the browser window
  • Relative, relative to the original position of an element
  • Inherit inherits the location type of the parent element

Absolutely position the button

<html>
  <head>
    <title></title>
    <style>
      /* If you want the button to position absolutely relative to the body, you need to set the position type of the body to non-static */
      body {
        position: relative;
      }
      .button {
        position: absolute;
        left: 50px;
        top: 100px;
      }
    </style>
    <script>
      function buttonHandler(a) {
        alert('Hello')}</script>
  </head>
  <body>
    <button class="button" onclick="buttonHandler()">Button 1</button>
  </body>
</html>
Copy the code

Button for relative positioning

<html>
  <head>
    <title></title>
    <style>
      .button {
        position: relative;
        left: 50px;
        top: 100px;
      }
    </style>
    <script>
      function buttonHandler(a) {
        alert('Hello')}</script>
  </head>
  <body>
    <button class="button" onclick="buttonHandler()">Button 1</button>
  </body>
</html>
Copy the code

In the default static case, the left and top position attributes are invalid.

Positional relationships between sibling elements

The arrangement of sibling elements, in addition to being controlled by positioning, is affected by the type of its box model by default. The type of the box model is specified by the display property. There are many types of it, but here are some of the most common:

  • Block, block elements
  1. Block elements will have a single row
  2. The height, width, row height, and top and bottom margins of the element can be set
  3. Div, P, H1 through H6, OL, ul, etc. are block elements that fill 100% of the parent container with no width set
  • Inline inline element
  1. Can be arranged in the same row
  2. A, SPAN, BR, I, em, strong, and label cannot be set as inline elements for the height, width, line height, and top and bottom margins of the element
  • Inline-block Inline block element
  1. Can be arranged in the same row
  2. The height, width, line height, and top and bottom margins of elements can be set to img, Button, input, and so on as inline block elements
  • None element hidden

When the display attribute of the A tag is set to block, it takes on the characteristics of a block element

Two buttons in a row

<html>
  <head>
    <title></title>
    <script>
      function buttonHandler(a) {
        alert('Hello')}</script>
  </head>
  <body>
    <button class="button" onclick="buttonHandler()">Button 1</button>
    <button class="button" onclick="buttonHandler()">Button 2</button>
  </body>
</html>
Copy the code

Turn buttons into block elements

<html>
  <head>
    <title></title>
    <style>
      .button {
        display: block;
      }
    </style>
    <script>
      function buttonHandler(a) {alert (' Hello ')}</script>
  </head>
  <body>
    <button class="Button" onclick="ButtonHandler ()">Button 1</button>
    <button class="Button" onclick="ButtonHandler ()">Button 2</button>
  </body>
</html>
Copy the code

They will have the characteristics of block elements, automatic line wrapping.

Block element float

<html>
  <head>
    <title></title>
    <style>
      .button {
        display: block;
        /* Set the float to the left, and block elements can also be arranged in a row */
        float: left;
      }
    </style>
    <script>
      function buttonHandler(a) {
        alert('Hello')}</script>
  </head>
  <body>
    <button class="button" onclick="buttonHandler()">Button 1</button>
    <button class="button" onclick="buttonHandler()">Button 2</button>
  </body>
</html>
Copy the code

Once a block element is set to float, it brings with it a set of features that require documentation and experimentation.

Margins control the distance between sibling elements

<html>
  <head>
    <title></title>
    <style>
      .button {
        /* Sets the margin to the right, increasing the distance between the two elements */
        margin-right: 20px;
      }
      .button2 {
        display: block;
        /* Sets an upward margin, increasing the distance between the two elements */
        margin-top: 20px;
      }
    </style>
    <script>
      function buttonHandler(a) {
        alert('Hello')}</script>
  </head>
  <body>
    <button class="button" onclick="buttonHandler()">Button 1</button>
    <button class="button" onclick="buttonHandler()">Button 2</button>
    <button class="button button2" onclick="buttonHandler()">Button 3</button>
  </body>
</html>
Copy the code

In addition to margins and margins, we need to understand what a box model is.

summary

Now that you know how to control the placement of parent-child elements and sibling elements, you’re ready to handle all kinds of layout requirements. This example is intended to help you understand how CSS is laid out. There is much more to CSS layouts than this one. There are best practices for different scenarios, which will be added in the following examples.