CSS is not difficult to develop in practice, but it is hard to remember the names of many properties because it is usually written less. But the interviewer always want to ask ah, no way, remember here often come back to see!

1. Two-column layout – left fixed and right adaptive

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>
Copy the code
  • flex
.container {
  display: flex;
  .left {
    width: 100px;
  }
  .right {
    flex: 1; }}Copy the code
  • calc
.container {
  display: flex;
  .left {
    width: 100px;
  }
  .right {
    width: calc(100% - 100px); }}Copy the code

2. Multi-column layout

Here’s an example of a three-column layout

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
Copy the code
  • column-count + gap
.container {
  column-count: 3;
  gap: 10px;
}
Copy the code

  • dispaly-grid + gap
.container {
  display: grid;
  gap: 10px 10px;
  grid-template: repeat(3.1fr) / repeat(3.1fr);
}
Copy the code

  • Flex div 4 will wrap itself
.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  div {
    width: 33%; }}Copy the code

If there are only three, just flex: 1.

  • The percentage
.container {
  div {
    width: 33%; }}Copy the code

The realization of nine grid can diverge!

3. Horizontal center

  • Text within div

<div class="box">test</div>
Copy the code
.box {
  text-align: center;
}
Copy the code
  • An element within a div

  1. Set the margin
<div class="box">
  <div></div>
</div>
Copy the code
.box {
  width: 200px;
  height: 200px;
  div {
    width: 100px;
    height: 100px;
    margin: 0auto; }}Copy the code
  1. Position-relative + margin is used to calculate relative positioning plus margin
<div class="box">
  <div></div>
</div>
Copy the code
.box {
  width: 200px;
  height: 200px;
  position: relative;
  div {
    width: 100px;
    height: 100px;
    position: absolute;
    margin-left: 50px; }}Copy the code
  1. flex + justify-content
<div class="box">
  <div></div>
</div>
Copy the code
.box {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  div {
    width: 100px;
    height: 100px; }}Copy the code

4. Center vertically

  • Div inside text

<div class="box">test</div>
Copy the code

Set line-height to be equal to height

.box {
  height: 40px;
  line-height: 40px;
}
Copy the code
  • An element within a div

  1. Position-relative + margin is used to calculate relative positioning plus margin
<div class="box">
  <div></div>
</div>
Copy the code
.box {
  width: 200px;
  height: 200px;
  position: relative;
  div {
    width: 100px;
    height: 100px;
    position: absolute;
    margin-top: 50px; }}Copy the code
  1. flex + align-items
<div class="box">
  <div></div>
</div>
Copy the code
.box {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  div {
    width: 100px;
    height: 100px; }}Copy the code

5. Pure CSS implements adaptive squares

  1. padding

    <div class="container">
  <div class="box"></div>
</div>
Copy the code
.container {
  width: 200px;
  height: 20%;
  border: 1px solid #eee;
  .box {
    width: 100%;
    height: auto;
    background-color: teal;
    padding-bottom: 100%; // The padding and margin are set relative to the width of the parent element
    border: 1px solid #eee; }}Copy the code
  1. vw(vh)
.container {
  width: 200px;
  height: 20%;
  border: 1px solid #eee;
  .box {
    width: 20vw;
    height: 20vw; // vw(vh) width and height are based on the viewport width (height)
    background-color: teal;
    border: 1px solid #eee; }}Copy the code

  1. Use the child element margin-top to achieve

    .container {
  width: 200px;
  height: 20%;
  border: 1px solid #eee;
  .box {
    width: 20%;
    background-color: teal;
    border: 1px solid #eee;
    .box::after {
      content: "";
      display: block;
      margin-top: 100%; }}}Copy the code

6. CSS implements an equilateral triangle

<div class="container">
  <div class="triangle"></div>
</div>
Copy the code
.container {
  width: 20px;
  height: 20px;
  .triangle {
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent teal transparent;
    content: ""; }}Copy the code

7. CSS implements love

Rotate using border and transform

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>
Copy the code
.container {
  width: 200px;
  height: 200px;
  .left {
    width: 30px;
    height:20px;
    background-color: #f56c84;
    border-start-start-radius: 10px;
    border-end-start-radius: 10px;
    transform: rotate(45deg);
    margin-right: -20px;
  }
  .right {
    width: 30px;
    height:20px;
    background-color: #f56c84;
    border-end-end-radius: 10px;
    border-start-end-radius: 10px;
    transform: rotate(-45deg); }}Copy the code

This allows you to draw many shapes with CSS. For example, I drew a flower while the iron was hot:

8. The difference between Transition and animation?

  • Transition works on style properties, and animation works on elements themselves
  • Transition triggers by style, such as hover; Annimation is triggered by @KeyFrame itself
  • Transition is like a subset of animation

tips

Here the main record CSS often meet questions, in fact, is the development of the common scene, like flowers and flowers of the students, don’t forget to like, pay attention to write code.