CSS common layout techniques and adaptation schemes

1. Single-column layout

1.1 Level center

The parent element text – align: center; Child element: inline-block;

• Advantages: Good compatibility;
• Disadvantage: You need to set both child and parent elements

<divclass="parent">
<divclass="child"></div>
</div>
Copy the code

.parent{
width: 500px;
height: 200px;
background: red;
text-align: center;
}
.child{
display: inline-block;
width: 300px;
height: 100px;
background: blue;
}
Copy the code

Margin :0 auto;

• Advantages: Good compatibility
• Disadvantages: Need to specify width

<divclass="parent">
<divclass="child"></div>
</div>
Copy the code

.parent{width: 500px; height: 400px; background: red; } .child{margin: 0 auto; width: 300px; height: 100px ; background: blue; }Copy the code

Parent element: relative; Child element: absolute; left:50%; Margin-left :- Half the width

• Advantages: Good compatibility
• Disadvantages: Need to know the width of the child element

<div class="parent">
  <div class="child"></div>
</div>
Copy the code

 .parent {
  position: relative;
  top: 0;
  left: 0;
  width: 500px;
  height: 400px;
  background: red;
}
.child {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -150px;
  width: 300px;
  height: 100px;
  background: blue;
}
Copy the code

Parent element: relative; Child element: absolute; left:50%; transform:translate(-50%,0);

• Advantages: You do not need to know the width of the child element
• Disadvantages: Poor compatibility (new era of you, now the new browser support, rest assured to use)

<divclass="parent">
<divclass="child"></div>
</div>
Copy the code

.parent {
  position: relative;
  top: 0;
  left: 0;
  width: 500px;
  height: 400px;
  background: red;
}
.child {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 300px;
  height: 100px;
  background: blue;
}
Copy the code

Parent element: display:flex; justify-content:center;

• Pros: Simplicity
• Disadvantages: Poor compatibility (new era of you, now the new browser support, rest assured to use)

<divclass="parent">
<divclass="child"></div>
</div>
Copy the code

.parent {
  display: flex;
  justify-content: center;
  width: 500px;
  height: 400px;
  background: red;
}
.child {
  width: 300px;
  height: 100px;
  background: blue;
}
Copy the code

1.2 Vertically centered

vertical-align:center;

<divclass="parent">
<divclass="child"></div>
</div>
Copy the code

.parent {
  width: 500px;
  height: 400px;
  background: red;
  display: table-cell;
  vertical-align: middle;
}
.child {
  width: 300px;
  height: 100px;
  background: blue;
}
Copy the code

line-height

<divclass="parent">
<divclass="child">
</div></div>
Copy the code

.parent {
  width: 500px;
  height: 400px;
  background: red;
  line-height: 400px;
}
.child {
  width: 300px;
  height: 100px;
  background: blue;
  display: inline-block;
  vertical-align: middle;
}
Copy the code

Parent element: position:relative; Child element: positon: Absolute; top:50%; transform:translate(0,-50%);

<divclass="parent">
<divclass="child"></div>
</div>
Copy the code

.parent {
  position: relative;
  top: 0;
  left: 0;
  width: 500px;
  height: 400px;
  background: red;
}
.child {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  width: 300px;
  height: 100px;
  background: blue;
}
Copy the code

Parent element: position:relative; Child element: positon: Absolute; top:50%; Margin-top :- Half the height of the child element;

<divclass="parent">
<divclass="child"></div>
</div>
Copy the code

.parent {
  position: relative;
  top: 0;
  left: 0;
  width: 500px;
  height: 400px;
  background: red;
}
.child {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -50px;
  width: 300px;
  height: 100px;
  background: blue;
}
Copy the code

Parent element: display:flex; align-items:center;

<divclass="parent">
<divclass="child"></div>
</div>
Copy the code

.parent {
  width: 500px;
  height: 400px;
  background: red;
  display: flex;
  align-items: center;
}
.child {
  width: 300px;
  height: 100px;
  background: blue;
}
Copy the code

1.3 Horizontal and vertical center

Parent element: display:table-cell; vertical-align:middle; text-align:center; Child elements; display:inline-block;

<divclass="parent">
<divclass="child"></div>
</div>

.parent {
  width: 500px;
  height: 400px;
  background: red;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.child {
  width: 300px;
  height: 100px;
  background: blue;
  display: inline-block;
}
Copy the code

Parent element: position:relative; Child element: position: Absolute? 50%; left:50%; Margin-left: half the width; Margin-top: half the height; Or the transform: translate (50%, 50%);

<divclass="parent">
<divclass="child"></div>
</div>
Copy the code

.parent {
  width: 500px;
  height: 400px;
  background: red;
  position: relative;
  left: 0;
  right: 0;
}
.child {
  width: 300px;
  height: 100px;
  background: blue;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
Copy the code

The parent element {display: flex; justify-content:center; align-items:center; }

<divclass="parent">
<divclass="child"></div>
</div>
Copy the code

.parent {
  width: 500px;
  height: 400px;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  width: 300px;
  height: 100px;
  background: blue;
}
Copy the code

2. Multi-column layout

2.1 Fixed width on the left and adaptive on the right

left{float:left; width:100px; } .right{margin-left:100px; }

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

* {
  margin: 0;
  padding: 0;
}
.left {
  height: 400px;
  width: 300px;
  background: red;
  float: left;
}
.right {
  height: 400px;
  margin-left: 300px;
  background: blue;
}

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="right-fix">
    <div class="right">
      right
    </div>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
}
.left {
  width: 300px;
  height: 400px;
  float: left;
  background: red;
}
.right-fix {
  width: 100%;
  margin-left: -300px;
  float: right;
}
.right {
  margin-left: 300px;
  height: 400px;
  background: blue;
}
Copy the code

.left{width: width value; float:left; } .right{overflow:hidden; }

<divclass="parent">
<divclass="left">   
  left   
</div><divclass="right">   
  right   
</div>
</div>
Copy the code

/ * set overflow: hidden; To create a landing. By BFC nature, the BFC does not overlap with the float Box. */ * { margin: 0; padding: 0; } .left { width: 300px; height: 400px; float: left; background: red; } .right { height: 400px; background: blue; overflow: hidden; }Copy the code

Table implementation

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
</div>
Copy the code

* {
  margin: 0;
  padding: 0;
}
.parent {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.left {
  width: 300px;
  height: 400px;
  background: red;
  display: table-cell;
}
.right {
  height: 400px;
  background: blue;
  display: table-cell;
}
Copy the code

The flex implementation

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
</div>
Copy the code

* {
  margin: 0;
  padding: 0;
}
.parent {
  display: flex;
  width: 100%;
}
.left {
  width: 300px;
  height: 400px;
  background: red;
}
.right {
  height: 400px;
  background: blue;
  flex: 1;
}
Copy the code

2.2 Right fixed width left adaptive

Float margin implementation

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
</div>
Copy the code

* {
  margin: 0;
  padding: 0;
}
.left {
  width: 100%;
  height: 400px;
  background: red;
  float: left;
  margin-right: -300px;
}
.right {
  height: 400px;
  background: blue;
  width: 300px;
  float: right;
}
Copy the code

Table implementation

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
</div>
Copy the code

* {
  margin: 0;
  padding: 0;
}
.parent {
  width: 100%;
  display: table;
  table-layout: fixed;
}
.left {
  width: 100%;
  height: 400px;
  background: red;
  display: table-cell;
}
.right {
  height: 400px;
  background: blue;
  width: 300px;
  display: table-cell;
}
Copy the code

The flex implementation

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
</div>
Copy the code

* {
  margin: 0;
  padding: 0;
}
.parent {
  width: 100%;
  display: flex;
}
.left {
  flex: 1;
  background: red;
  display: table-cell;
}
.right {
  height: 400px;
  background: blue;
  width: 300px;
}
Copy the code

2.3 The two columns on the left are of fixed width, and the right is adaptive

Float margin implementation

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="center">
    center
  </div>
  <div class="right">
    right
  </div>
</div>
Copy the code

* {
  margin: 0;
  padding: 0;
}
.parent {
  width: 100%;
}
.left,
.center {
  background: red;
  float: left;
  width: 300px;
  height: 400px;
}
.center {
  background: yellow;
}
.right {
  height: 400px;
  background: blue;
  margin-left: 600px;
}
Copy the code

Float overflow implementation

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="center">
    center
  </div>
  <div class="right">
    right
  </div>
</div>
Copy the code

* {
  margin: 0;
  padding: 0;
}
.parent {
  width: 100%;
}
.left,
.center {
  background: red;
  float: left;
  width: 300px;
  height: 400px;
}
.center {
  background: yellow;
}
.right {
  height: 400px;
  background: blue;
  overflow: hidden;
}
Copy the code

Table implementation

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="center">
    center
  </div>
  <div class="right">
    right
  </div>
</div>
Copy the code

* {

margin: 0;

padding: 0;

}

.parent{

width: 100%;

display: table;

table-layout: fixed;

}

.left,

.center{

background: red;

display: table-cell;

width: 300px;

height: 400px;

}

.center{

background: yellow;

}.right{

height: 400px;

background: blue;

display: table-cell;

}