This article is the author in the study of CSS some white summary

The box model we know is mainly composed of four areas, namely content, padding, border and margin. For those who do not understand the box model, you can step here to learn about it.

Content

1. Replace elements

Replace elements, as the name implies, are elements that content can be replaced.

We often replace meaningful text with images, such as the logo of a website.

2. Pseudo-elements ::before and ::after

::before
::after 

<div className="price-panel">
  <span className="price-panel__price">${(totalPrice / 100). ToFixed (1)}</span>
  <span className="price-panel__discount-price">{(totalDiscountPrice / 100).toFixed(1)}</span>
  <span className="price-panel__discount">({(discount / 10).tofixed (1)} discount)</span>
</div>
Copy the code

The React code makes it much clearer to represent data with pseudo-elements. HTML:

<div className="price-panel">
  <span className="price-panel__price">
    {(totalPrice / 100).toFixed(1)}
  </span>
  <span className="price-panel__discount-price">
    {(totalDiscountPrice / 100).toFixed(1)}
  </span>
  <span className="price-panel__discount">
    {(discount / 10).toFixed(1)}
  </span>
</div>
Copy the code

SCSS:

.price-panel {
  &__price {
    &::before {
      content: A '$';
    }
  }
  &__discount-price {
    &::before {
      content: 'Already saved';
    }
  }
  &__discount {
    &::before {
      content: '(';
    }
    &::after {
      content: 'fold)'; }}}Copy the code

We can also use pseudo-elements to help implement styles that would otherwise require multiple divs, such as the following dialog.

HTML:

<div class="dialog">Hi, I'm a bubble dialog. Can you see me?</div>
Copy the code

CSS:

.dialog {
  background: #f0f;
  padding: 10px;
  border-radius: 10px;
  color: white;
  max-width: 250px;
  position: relative;
  overflow: visible;
}

.dialog::after {
  position: absolute;
  content: ' ';
  display: inline-block;
  border-width: 5px 10px;
  border-style: solid;
  border-color: transparent transparent #f0f #f0f;
  width: 0;
  height: 0;
  right: -20px;
}
Copy the code

Padding (inside margin)

The padding percentage value is very useful. The percentage of padding that you need to be aware of, both horizontally and vertically, is computed relative to the width of the containing block, the parent element. (Thank you @xiong for your advice)

If you need a 16:9 scale image, use the padding-top or padding-bottom option to set it to 56.25% (100\16*9).

Margin

1. The margin of consolidation

Margin-top and margin-bottom of block-level elements are sometimes merged into a single margin, which is called margin merging. Margin merges two important elements

  1. Must be block-level elements
  2. It only happens in the vertical direction.

Margin merge scene

1.1 Adjacent sibling elements

1.2 Parent and first/last child element

In practice, father-son margin merging is likely to cause us problems. As you can see in the figure below, the DIV shows a different result than we expected.

So how can we prevent this kind of father-son margin merger caused by and expected inconsistent problems? The solution is as follows (here is a direct copy of zhang Xinxu’s book “CSS World” the original words.) (1) For margin-top merge (satisfy one) :

  • The parent element is set to BFC
  • Set up theborder-topThe value of (transparent can also be tested)
  • Set up thepadding-topThe value of the
  • Add inline elements between the parent element and the first child element

(2) For margin-bottom merge (satisfy one) :

  • The parent element is set to BFC
  • Set up theborder-bottom(Transparent is also available)
  • Set up thepadding-bottom
  • Add an inline element between the parent element and the last child element
  • Parent element Settingsheight,min-heightormax-height

1.3 Margin merging of empty block-level elements

2. margin auto

When I say margin: Auto, my first reaction is center. But this is just a superficial application. Margin :auto margin:auto margin

Margin: Auto padding rules are as follows:

  • If one side is fixed and one side is auto, auto is the size of the remaining space. Notice that auto doesn’t mean zero.
  • If you have auto on both sides, you split the rest of the space

I wonder why I set Margin: Auto, but it’s not centered in the vertical direction.

The answer given here in CSS World is easy to understand. If you remove the height of the.son element, the height of the.son element will automatically change to 200px of the parent element, obviously not, so it will not trigger margin: auto. Similarly, if width is 200px, it is exactly the same width as the parent element.

So how do you center the vertical? Margin: Auto with absolute positioning

Border = Border

Draw the triangle with border

We can draw some shapes, such as triangles, with the border color being transparent

Note the border-color attribute.

/* border-color: color; Single-valued syntax */ 
border-color: red;

/* border-color: vertical horizontal; Double-valued syntax */
border-color: red #f015ca;

/* border-color: top horizontal bottom; Ternary syntax */
border-color: red yellow green;

/* border-color: top right bottom left; Four-valued syntax */
border-color: red yellow green blue;
Copy the code

Of course, we’re not limited to this isosceles triangle.

Here we have drawn a right triangle with bases of 60px and 160px.

reference

This article mainly refers to zhang Xinxu’s “CSS World” and makes some practice summary according to their own business.