CSS family – various layout implementations

preface

Basic knowledge:

• The position location
• Flex layout
• The grid layout

The position location

1. Static elements appear in normal flow
2. Relative positioning

A. Locate the device relative to the normal position b.'Not out of'The document flowCopy the code

3. Absolute absolute positioning

A. relative tostaticPosition the first parent element outside of the position b. scroll along with the outside of the page` a non-static `The positioned parent element moves and moves c. out of the document flowCopy the code

4. Fixed absolute positioning

A. relative to'Browser window'B. The page does not move when scrolling. C. The page is out of the document flowCopy the code

Flex layout

Flex Layouts are detailed in the CSS series flex Layouts

The grid layout

For details on grid layout, see CSS series grid Layout

One, horizontal and vertical center

Position: Absolute + margin

.div{
    width: 100px;
    height: 100px;
    background: orange;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px; /* Half the height */
    margin-left: -50px; /* Half the width */
}
Copy the code

Disadvantages: you need to know the width and height of the element to set the margin-top and margin-left values to achieve center

CSS3.0 uses transform instead of margin

.div{
    background: orange;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
 }
Copy the code

Disadvantages: Compatibility issues

Position: Absolute and Margin: Auto

.div{
    width: 100px;
    height: 100px;
    background: orange;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
Copy the code

Note: up, down, left and right are 0 and the position is absolutely fixed

I’m in a relative position of 50%

html.body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.div{
    margin: 0 auto; /* Horizontal center */
    position: relative; / * set position * /
    top: 50%;  / * offset * /
    /*margin-top: -150px; * /    /* margin-top*/
    transform: translateY(-50%); /* transform */
}
Copy the code

4. The flex layout

body{
    display: flex;
    align-items: center;  /* The element defining the body is vertically centered */
    justify-content: center;  /* The element that defines the body is horizontally centered */
}
.div{
    width: 300px;
    height: 300px;
    background: orange;
}
Copy the code

Second, the top and bottom height is fixed, and the middle height is self-adaptive

1. Set the outer relative and the inner three positions to absolute and margin

.box {
    positon: relative;
}
.top {
    position: absolute;
    height:100px;
    top: 0;
    background: red;
}
.middle {
    position: absolute;
    top: 100px;
    bottom: 100px;
    background: yellow;
}
.bottom {
    position: absolute;
    height:100px;
    bottom: 0;
    background: blue;
}
Copy the code

2. Set the outer relative and inner positions to Absolute and border

.box {
    positon: relative;
}
.top {
    position: absolute;
    height:100px;
    top: 0;
    background: red;
}
.middle {
    position: absolute;
    border-top: 100px;
    border-bottom: 100px;
    background: yellow;
}
.bottom {
    position: absolute;
    height:100px;
    bottom: 0;
    background: blue;
}
Copy the code

3. The grid layout

.grid-box {
    display:grid;
    width:100%;
    grid-template-rows: 100px auto 100px;
 }
.top {
    background: red;
}
.middle {
    background: yellow;
}
.bottom {
    background: blue;
}
Copy the code

Three, the width of the left and right columns is fixed, and the middle width is self-adaptive

1. Set the left and right columns to float

.left {
    float:left;
    width:100px;
}
.middle{}.right {
    float:right;
    width:100px;
}
Copy the code

Flex layout, middle column flex: 1

.flex-box {
    display:flex;
}
 .left {
    width:300px;
}
.middle {
    flex:1;
}
.right {
    width:100px;
}
Copy the code

3. Grid layout, the middle column is adaptive

.grid-box {
    display:grid;
    width:100%;
    grid-template-columns: 100px auto 100px;
 }
.left {
    background: red;
}
.middle {
    background: yellow;
}
.right {
    background: blue;
}
Copy the code

Four, nine grid layout

1. The flex layout

.flex-box {
    width: 100%;
    display:flex;
    flex-wrap: wrap;
}
.smallBox{
    width: ((100% / 3) - (5px*2));
    margin:5px;
    height:50px;
}
Copy the code

2. The grid layout

.grid-box {
    display:grid;
    width:100%;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns:100px 100px 100px;
 }
Copy the code