How many ways are there to center an element horizontally and vertically?

Horizontal center

  • For inline elements: text-align: center;

  • For block-level elements of fixed width:

  1. Width and margin implementations. margin: 0 auto;

  2. Margin-left: -width/2, if the parent element position: relative

  • For block-level elements of unknown width

  1. The table tag is horizontally centered with margin left and right Auto. Use the table tag (or simply set the block-level element to display:table) and add a margin of auto to the tag.

  2. Inline-block implements a horizontally centered method. Display: inline-block and text-align:center achieve horizontal center.

  3. Absolute position + Transform, translateX can move 50% of its element.

  4. Flex layout uses context-content: Center

Vertical center

  1. Center with line-height, which is suitable for plain text classes

  2. The relative positioning of the parent container is set, and the absolute positioning of the child is set. The label is self-centered by margin

  3. Display: flex; Sub-set margin to auto to achieve adaptive center

  4. Relative positioning is set for the parent level, and absolute positioning is set for the child level, which is realized by displacement transform

  5. The table layout is implemented by converting the parent level to a table format and setting vertical-align for the child level. (Note that vertical-align: middle is used only for the inline element and the element whose display value is table-cell.)

Two, floating layout advantages? What are the disadvantages? What are the ways to clear floats?

Floating layout introduction: When an element is floating, it can move left or right until its outer edge touches the border of the box containing it or another floating element. Elements float out of the normal flow of the document, so the box in the normal flow of the document behaves as if the floating element did not exist.

advantages

The advantage of this method is that it is good to surround the image with text when mixing images. In addition, when an element is floated, it has some block-level properties such as the ability to set the width, but there are some differences between it and inline-block. The first is that for horizontal sorting, float can set the orientation while inline-block orientation is fixed. Another problem is that inline-blocks sometimes have a white space when used

disadvantages

The most obvious disadvantage is that the floating element cannot support the parent element once it is out of the document flow, causing the parent element to collapse very high.

The way to clear the float

  1. Add extra labels
<div class="parent">// Add additional labels and add the clear attribute<div style="clear:both"></div>// You can also add a br tag</div>
Copy the code
  1. The parent adds overflow properties, or sets the height
<div class="parent" style="overflow:hidden">//auto can also // set overflow of the parent element to hidden<div class="f"></div>
</div>
Copy the code
  1. Creating a pseudo-class selector to clear floats (recommended)
Parent :after{/* Sets the content of the added child element to be empty */ content: ''; */ display: block; /* Set the height of the added child element to 0 */ height: 0; /* Set add child element to invisible */ visibility: hidden; /* set clear: both */ clear: both; } <div class="parent"> <div class="f"></div> </div>Copy the code

What is the problem when using display:inline-block? The solution?

Problem of repetition

Problem: Two display: inline-block elements put together produce a blank space.

Such as code:


      
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      .container {
        width: 800px;
        height: 200px;
      }

      .left {
        font-size: 14px;
        background: red;
        display: inline-block;
        width: 100px;
        height: 100px;
      }

      .right {
        font-size: 14px;
        background: blue;
        display: inline-block;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left">
        左
      </div>
      <div class="right">
        右
      </div>
    </div>
  </body>
</html>
Copy the code

The effect is as follows:

The cause of the void

When an element is typesetted as an inline element, whitespace (Spaces, carriage return, line feed, etc.) between elements is processed by the browser. According to the CSS white-space property (default is Normal, incorporating excess white space), the carriage return line feed in the ORIGINAL HTML code is converted to a blank character. Whitespace occupies a certain width, so there is a gap between the elements of the inline-block.

The solution

1. Write the end character of the child element label on the same line as the start character of the next label or all the child labels on the same line

<div class="container">
  <div class="left">
      左
  </div><div class="right">
      右
  </div>
</div>
Copy the code

2. Set font size: 0 on the parent element and reset the correct font size on the child element

.container{
  width:800px;
  height:200px;
  font-size: 0;
}
Copy the code

3. Set float:left for the child element

.left{ float: left; font-size: 14px; background: red; display: inline-block; width: 100px; height: 100px; } //right is the sameCopy the code

Div is vertically centered around 10px, and its height should always be half of its width

Implement a vertically centered div 10px to the left and right of the screen, always 50% of its width. At the same time, div has A text A, which needs to be centered horizontally and vertically.

Height :0; padding-bottom: 50%;


      
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>* {margin: 0;
        padding: 0;
      }
      html.body {
        height: 100%;
        width: 100%;
      }
      .outer_wrapper {
        margin: 0 10px;
        height: 100%;
        /* Flex layouts center blocks vertically */
        display: flex;
        align-items: center;
      }
      .inner_wrapper{
        background: red;
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 50%;
      }
      .box{
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="outer_wrapper">
      <div class="inner_wrapper">
        <div class="box">A</div>
      </div>
    </div>
  </body>
</html>
Copy the code

Two points are emphasized:

  1. Who is the padding-bottom relative to?

The answer is the width value relative to the parent element.

It is easy to understand the purpose of this out_wrapper. The CSS is in a streaming layout, div is 100% wide by default, out_wrapper margin: 0 10px; This is equivalent to reducing the left and right sides by 10px.

  1. If the parent element is positioned relative to the parent element, then the width and height of the child element under absolute positioning is set as a percentage relative to whom?

Relative to the (content + padding) value of the parent element, note that the border is not included

Extension: If the child element is not absolutely positioned, then the width is set as a percentage of the width relative to the parent element. In the standard box model, it is content. In the IE box model, it is Content +padding+border.

Idea 2: Use CALC and VW


      
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      html.body {
        width: 100%;
        height: 100%;
      }

      .wrapper {
        position: relative;
        width: 100%;
        height: 100%;
      }

      .box {
        margin-left: 10px;
        /* vw is the width of the viewport. 1vw represents 1% of the viewport width */
        width: calc(100vw - 20px);
        /* Half the width */
        height: calc(50vw - 10px);
        position: absolute;
        background: red;
        /* The next two lines center the block vertically */
        top: 50%;
        transform: translateY(50%);display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="box">A</div>
    </div>
  </body>
</html>
Copy the code

The effect is as follows:

5. How to carry out the character layout of CSS?

The first kind of


      
<html>

<head>
  <meta charset="utf-8">
  <title>Product character layout</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      overflow: hidden;
    }
    div {
      margin: auto 0;
      width: 100px;
      height: 100px;
      background: red;
      font-size: 40px;
      line-height: 100px;
      color: #fff;
      text-align: center;
    }

    .div1 {
      margin: 100px auto 0;
    }

    .div2 {
      margin-left: 50%;
      background: green;
      float: left;
      transform: translateX(100%); }.div3 {
      background: blue;
      float: left;
      transform: translateX(100%); }</style>
</head>

<body>
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
</body>

</html>
Copy the code

Effect:

Second (full screen version)


      
<html>
  <head>
    <meta charset="utf-8">
    <title>Product character layout</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      div {
        width: 100%;
        height: 100px;
        background: red;
        font-size: 40px;
        line-height: 100px;
        color: #fff;
        text-align: center;
      }

      .div1 {
        margin: 0 auto 0;
      }

      .div2 {
        background: green;
        float: left;
        width: 50%;
      }

      .div3 {
        background: blue;
        float: left;
        width: 50%;
      }
    </style>
  </head>

  <body>
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
  </body>
</html>
Copy the code

Effect:

How does CSS carry out the Holy Grail layout

The layout of the Grail is shown below:

And to do the left and right width fixed, the middle width adaptive.

1. Use Flex layout


      
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>* {margin: 0;
      padding: 0;
    }
    .header..footer{
        height:40px;
        width:100%;
        background:red;
    }
    .container{
        display: flex;
    }
    .middle{
        flex: 1;
        background:yellow;
    }
    .left{
        width:200px;
        background:pink;
    }
    .right{
        background: aqua;
        width:300px;
    }
	</style>
</head>
<body>
    <div class="header">This is the head</div>
    <div class="container">
        <div class="left">On the left</div>
        <div class="middle">The middle section</div>
        <div class="right">On the right</div>
    </div>
    <div class="footer">So here's the bottom</div>
</body>
</html>
Copy the code

2. Float layout (all float:left)


      
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>* {margin: 0;
      padding: 0;
    }
    .header..footer {
      height: 40px;
      width: 100%;
      background: red;
    }

    .footer {
      clear: both;
    }

    .container {
      padding-left: 200px;
      padding-right: 250px;
    }

    .container div {
      position: relative;
      float: left;
    }

    .middle {
      width: 100%;
      background: yellow;
    }

    .left {
      width: 200px;
      background: pink;
      margin-left: -100%;
      left: -200px;
    }

    .right {
      width: 250px;
      background: aqua;
      margin-left: -250px;
      left: 250px; 
    }
  </style>
</head>

<body>
  <div class="header">This is the head</div>
  <div class="container">
    <div class="middle">The middle section</div>
    <div class="left">On the left</div>
    <div class="right">On the right</div>
  </div>
  <div class="footer">So here's the bottom</div>
</body>

</html>
Copy the code

This float layout is the most difficult to understand, mainly the negative margin operation after the float, which is highlighted here.

Before setting the negative margin and left values, it looks like this:

Left box set margin-left: -100%

.left{
  / *... * /
  margin-left: -100%;
}
Copy the code

Then move 200px to the left to fill in the empty padding-left portion

.left{
  / *... * /
  margin-left: -100%;
  left: -200px;
}
Copy the code

Effect presentation:

Margin-left: -250px; margin-left: -250px; margin-left: -250px; margin-left: -250px

.right{
  / *... * /
  margin-left: -250px;
}
Copy the code

Then move 250px to the right to fill the padding-right part of the parent container:

.right{
  / *... * /
  margin-left: -250px;
  left: 250px;
}
Copy the code

Now the final effect is achieved:

3. Float layout (left float: left, right float: right)


      
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>* {margin: 0;
      padding: 0;
    }
    .header..footer {
      height: 40px;
      width: 100%;
      background: red;
    }
    .container{
      overflow: hidden;
    }

    .middle {
      background: yellow;
    }

    .left {
      float: left;
      width: 200px;
      background: pink;
    }

    .right {
      float: right;
      width: 250px;
      background: aqua;
    }
  </style>
</head>

<body>
  <div class="header">This is the head</div>
  <div class="container">
    <div class="left">On the left</div>
    <div class="right">On the right</div>
    <div class="middle">The middle section</div>
  </div>
  <div class="footer">So here's the bottom</div>
</body>

</html>
Copy the code

4. Absolute positioning


      
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>* {margin: 0;
      padding: 0;
    }
    .header..footer {
      height: 40px;
      width: 100%;
      background: red;
    }
    .container{
      min-height: 1.2 em;
      position: relative;
    }

    .container>div {
      position: absolute;
    }

    .middle {
      left: 200px;
      right: 250px;
      background: yellow;
    }

    .left {
      left: 0;
      width: 200px;
      background: pink;
    }

    .right {
      right: 0;
      width: 250px;
      background: aqua;
    }
  </style>
</head>

<body>
  <div class="header">This is the head</div>
  <div class="container">
    <div class="left">On the left</div>
    <div class="right">On the right</div>
    <div class="middle">The middle section</div>
  </div>
  <div class="footer">So here's the bottom</div>
</body>

</html>
Copy the code

5. The grid layout


      
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body{
        display: grid;
    }
    #header{
        background: red;
        grid-row:1;
        grid-column:1/5;
    }
        
    #left{
        grid-row:2;
        grid-column:1/2;
        background: orange;
    }
    #right{
        grid-row:2;
        grid-column:4/5;
        background: cadetblue;
    }
    #middle{
        grid-row:2;
        grid-column:2/4;
        background: rebeccapurple
    }
    #footer{
        background: gold;
        grid-row:3;
        grid-column:1/5;
    }
  </style>
</head>

<body>
    <div id="header">header</div>
    <div id="left">left</div>
    <div id="middle">middle</div>
    <div id="right">right</div>     
    <div id="footer">footer</footer></div>
       
</body>

</html>
   
Copy the code

If you look at the grid layout, it’s pretty simple. The parameters should speak for themselves.

Also, by 2019, the Grid will now be compatible with most browsers and ready to go.

Of course, there are table layout, older, and not friendly to SEO, know you can, here is not a waste of space.

7. How to achieve the dual-wing layout of CSS?

With the holy cup layout, the twin wing layout is not a problem. This is done using the classic float layout.


      
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>* {margin: 0;
      padding: 0;
    }
    .container {
        min-width: 600px;
    }
    .left {
        float: left;
        width: 200px;
        height: 400px;
        background: red;
        margin-left: -100%;
    }
    .center {
        float: left;
        width: 100%;
        height: 500px;
        background: yellow;
    }
    .center .inner {
        margin: 0 200px; 
    }
    .right {
        float: left;
        width: 200px;
        height: 400px;
        background: blue;
        margin-left: -200px;
    }
  </style>
</head>

<body>
  <article class="container">
    <div class="center">
        <div class="inner">Twin wing layout</div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</article>
</body>

</html>
Copy the code

What is BFC? Under what conditions can it be triggered? Rendering rules? What are the application scenarios?

1. What is BFC?

W3C defines BFC as follows: Floating and absolutely located elements, block-level containers that are not block-level boxes (such as inline-blocks, table-cells, and table-captions), and block-level boxes that do not have overflow value of “visiable”, Both create a new BFC (Block Fromatting Context) for their content.

2. Trigger conditions

To create a BFC for an HTML element, one or more of the following conditions are met: Block formatting contexts are created in the following ways:

  • The root element ()
  • Float element (float of element is not None)
  • Absolute position element (element position is absolute or fixed)
  • Inline block element (element display is inline-block)
  • Table cell (element display is table-cell, HTML table cell default value)
  • Table title (display element as table-caption, HTML table title default to this value)
  • Anonymous table cell elements (element display is table, table-row, table-row-group, table-header-group, table-footer-group) (HTML, respectively Default properties for table, row, tBody, thead, tfoot) or inline-table)
  • Block elements with overflow values not visible – elastic elements (display is a direct child of the flex or inline-flex element)
  • Grid elements (display is grid or a direct child of the inline-grid element), and so on.

3.BFC rendering rules

(1) BFC vertical margin overlap

(2) The region of the BFC does not overlap the box of the floating element

(3) THE BFC is an independent container, and the elements outside do not affect the elements inside

(4) The floating element will also be involved in the calculation of BFC height

4. Application scenarios

1. Prevent height collapse of parent element caused by floating

The following page code is available:


      
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      .container {
        border: 10px solid red;
      }
      .inner {
        background: #08BDEB;
        height: 100px;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="inner"></div>
    </div>
  </body>
</html>
Copy the code

  .inner {
    float: left;
    background: #08BDEB;
    height: 100px;
    width: 100px;
  }
Copy the code

The collapse effect would look like this:

But if we set the BFC on the parent element, this problem is solved:

.container {
    border: 10px solid red;
    overflow: hidden;
}
Copy the code

This is also a way of clearing the float.

2. Avoid margin folding

The same BFC for two blocks causes margin folding, but if the BFC is set separately for the two blocks, the margin overlap problem does not exist.

The existing code is as follows:


      
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .container {
      background-color: green;
      overflow: hidden;
    }

    .inner {
      background-color: lightblue;
      margin: 10px 0;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
  </div>
</body>

</html>
Copy the code

The space between the three elements is 10px, because all three elements belong to the same BFC. Now we do the following:

  <div class="container">
    <div class="inner">1</div>
    <div class="bfc">
      <div class="inner">2</div>
    </div>
    <div class="inner">3</div>
  </div>
Copy the code

Style:

.bfc{
    overflow: hidden;
}
Copy the code

The effect is as follows:

About CSS layout, first share here, will continue to supplement, hope to inspire you. Don’t forget to like it if it helps.

References:

How to center an element (Final)

In-depth understanding of BFC

Four methods of CSS three-column layout