css3

1. What are the ways to center the box horizontally and vertically?

(1) display: flex;

.box {
  display: flex;
  justify-content: center;
  align-items: center;
}
Copy the code

(2) Positioning

(3) display: table-cell is for text, so the subbox should add display: inline-block;

.box {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
Copy the code
2. CSS Box model (box-sizing property changes element box model)

(1) Standard box model: In the standard box model, width refers to the width of content area; Height refers to the height of the content area.

Standard box model box size = Content + border + padding + marginCopy the code

(2) IE box model (weird box model) : Width in weird box model refers to the total width of content, border and inner margin (Content + border + padding); Height refers to the total height of the content, border, and inner margin

Box size =width (Content + border + padding) + marginCopy the code
3. Mobile responsive layout

(1) media

(2) the rem

(3) the flex

(4) the vh/vw

4.CSS3 implements a 0.5px border

(1) Border + border-image + linear gradient Linear

  .border {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        border-bottom: 1px solid transparent;
        border-image: linear-gradient(to bottom,transparent 50%, red 50%) 0 0 100%/1px 0;
    }

Copy the code

(2) Positioning + pseudo-element + background + linear gradient

   .border {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        position: relative;
    }
    .border::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-image: linear-gradient(to bottom, transparent 50%, red 50%);
    }

Copy the code

(3) Position + pseudo-element + transfrom scale

  .border {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        position: relative;
    }
    .border::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: red;
        transform: scaleY(0.5);
    }

Copy the code
5. The difference between a double colon and a single colon in ::before and :after? What do these two pseudo-elements do?

(1) in CSS3: represents pseudo class, and :: represents pseudo element

(2) To make the inserted content appear before other content, use ::befroe. Otherwise, use ::after