CSS Basics (Part 3)

review

In the last chapter, we basically understood the comprehensive writing method of BACKGROUND in CSS and the weight priority in CSS. In this lecture, we will understand a relatively important padding and margin, and understand the collapse problem in CSS, which is an essential part or even quite important in future work and study. If you do not know or are not familiar with the basics of CSS, it is recommended to take a look at the previous section, this one begins with CSS.

See the nature of the web

In modern HTML layout, we basically use the box model for layout, in short, using div layout, so the control of the whole box is a focus. The most important thing is to learn to “have a map in mind”, when getting the design draft, we must think before writing, thinking is a very important thing.

The box model

The box model is generally divided into three parts

  • Padding – padding
  • From the outside — – margin
  • Border – border

Box border

Now let’s talk about the border of the box. The border is also very important in the future. Basically, the box will use the border.

  • Border-width: defines the border width, in px
  • Border-style: border style
    1. Solid: solid line
    2. Dashed: the dotted line
    3. Dotted: point line
  • Border-color: indicates the border color
  • Border: 2px solid red; (Out of order)

Note: comprehensive writing is very important and will be the most used habit in the future work. So must learn to synthesize the writing method, write a little bit more slowly familiar.

In addition, the box can also set different orientation of the line, for example: can set the top line and the bottom line and so on. As shown in the figure below

<div class="content"> </div> <div class="content-b"></div> <div class="content-c"></div> <div class="content-d"></div> </div> } .content div { width: 200px; height: 200px; margin-left: 20px; } /* Border-top: 1px solid red; content-a {border-top: 1px solid red; } /* Box only the following line */. Content-b {border-bottom: 1px solid red; } /* Box only left line */. Content -c {border-left: 1px solid red; } /* Box only one line on the right */. Content -d {border-right: 1px solid red; }Copy the code

Another important one is that if the boxes are next to each other, there must be a line in the middle of the two boxes that overlaps, so if you want to eliminate the overlapping line, so that the box lines are the same, you need to use it

// border-collapse: collapse;Copy the code

padding

Inside margin: The distance between the content and the border

  • Padding-left: left inside margin
  • Padding-right: right inner margin
  • Padding-top: Upper inner margin
  • Padding-bottom: Lower inner margin

For padding, there is a shorthand form, which is often used in everyday work.

  • Padding-right: 20px padding: 20px
  • Padding-right: 10px 20px means: top/bottom 10px, left/right 20px
  • Padding: 10px, 20px, 30px
  • Padding: 10px, 20px, 30px, 40px
Box margin size calculation

After the inner margin is set, the distance between boxes must be calculated. If the width and height of the box are given, then the padding value is given, the box will be stretched. If you want the original box size, you must subtract the padding value as shown in the figure below

  • Now the padding is not set and the box is displayed normally

Now add a padding-left: 20px to the box and see what it looks like

In summary, if the width and height are set and the padding value is added, the box will add unnecessary value, so we need to subtract the corresponding padding value to restore the box to its previous size. For example, if you add 20px to the left and right of the box, you need to subtract the width from 200px to 180px to keep the box size unchanged. However, if you don’t want to use this method, you don’t need to add width or height. It won’t stretch the size of the original box

From the outside

Margin refers to the outer margin of the box and is denoted by margin, which is basically the same thing as padding, except padding refers to the inside margin of the box and margin refers to the outer margin of the box.

  • Margin in addition to the right margin of the box, it can also be used to center the box
  1. Margin-left: auto, margin-right: auto
  2. Margin: auto
  3. Margin: 0 auto

So keep in mind the following two centers, which will be used quite a bit in the future

  • Text-align: center———— Indicates that the text is centered
  • Margin: 0 auto———— Indicates that the box is centered

Insert the difference between the image and the background image

Background pictures and insert pictures in our future work is also very much, because the demand for text and text mix is very much, and often need to compare the design draft pixel level restore.

  • Background images must be background-position: 30px, 30px; To move around
  • Insert images can be moved by margin

Initializer clears the inner and outer margins of elements

Remember that in the previous article, because the browser initialization has a default padding and margin, and most front-end staff do not need these original styles, because it is difficult to control the restoration of the design, so they will initialize a CSS file at a time. Clear all the default styles and set some of your favorite styles. This uses * and initializes the padding and margin to 0

// Initialize the padding and margin to 0 * {padding: 0px; Margin: 0 px; }Copy the code

Margin merging (also known as collapse)

This problem has been around for a long time, and it is a pain point that every front-end person must experience. It is the most ridiculed problem in THE history of CSS.

– Two margins, if one is set to the bottom and one to the top, a margin merge will appear. Take a merge, as shown below

As you can see from the figure, the first and second divs are each set with a margin of 20px, which should be 40px apart at the end. However, the problem of combining the margins is that the two divs are merged to the maximum value, so the two boxes end up 20px apart.

Margin merging of nested relationships

If a margin is set in a box, the parent box will fall down with the margin, which will cause the collapse problem. As shown in the figure below

The most common way to solve this problem is to add overflow: Hidden to the parent element, which is a normal display, as shown below.

In addition, there are two ways to solve the collapse problem:

  1. This can be done by defining an upper border for the parent element
  2. This can be solved by defining an inner margin for the parent element
  3. Add Overflow: Hidden for the parent element (most commonly used)

Ok, margin merge/collapse problem is basically these, you can go down in the code to try, in the future work will often encounter these problems, the foundation must be skilled.

extension

The rounded edges

Before CSS, there was no such thing as rounded corners, so it was very troublesome for front-end programmers to write rounded corners, but since CSS border-radius has saved the problem. As shown in the figure below

Set the box in the figure and then set border-radius: 50% to show that the entire box becomes a circle. In the second case, if you want to make the search box or button (also called circle) look more like the user experience, you can set it to half the height and an oval will appear. This is often used at work, so you can practice it in your own code.

Shadow box

Box shadow is also a more important knowledge, because the front of the style will certainly appear virtual and real alike, so there will be box shadow problems in the page.

  • Horizontal shadow vertical shadow blur distance shadow size color (rgba (0,0,0,0.3))
  • Example: box-shadow: 2px 2px 2px rgba (0,0,0,0.3)

Go ahead, you can do it yourself you can do it in code

Well, today’s CSS third on the end, welcome to leave a message exchange ~