About CSS key points of knowledge (1)

1. Box model

When CSS processes Web content, each element is "placed" in a box, the so-called box model.

The box model consists of 4 parts: content, padding (padding), border (border) and margin (margin)

Show the contents of the whole box model, how about it? It's simple. If you think it's simple, that's a big mistake!!

There is a hole in the box model where the height and width of the element are taken, and the high and wide properties can be specified in a variety of ways. In other words, in some cases, the height and width of an element are not the same. So what are the circumstances? The answer is the Box-sizing property. This property is set to a different value, and the height and width of the element are different.

1) Box-sizing:content-box. is the default value.

In, height and width are the height and width of the innermost rectangle (the content area).

2) Box-sizing:padding-box

In, height and width are the height and width of the innermost rectangle (the content area) plus the respective padding.

3) Box-sizing:border-box

In, height and width are the height and width of the innermost rectangle (the content area) plus the respective padding, in addition to the border width.

Well, a bit of a pit, but the pit is not fully filled. This ya's Box-sizing property also TM and browser-related, different browser property name prefix is not the same, this is easy to see, in the IDE, knocking the property name when naturally prompted.

General Browser: box-sizing

Firefox is for:-moz-box-sizing

Mobile device Android/ios:-webkit-box-sizing

How, this CSS knowledge point mastered it.

　　

About CSS key points of knowledge (1)