Important CSS knowledge points (1) and css knowledge points

Important CSS knowledge points (1) and css knowledge points

1. Box Model

When CSS processes webpage content, it puts every element in a box, the so-called box model.

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

The content of the entire box model is displayed. How can this problem be solved? Simple. If you think it is simple, it's a big mistake !!

There is a pitfall in the box model, that is, when taking the height and width of an element, you can specify the height and width attributes in multiple ways. In other words, in some cases, the height and width of an element are different. Under what circumstances? The answer is the box-sizing attribute. The value of this attribute is different, and the height and width of the element are different.

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

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

2) box-sizing: padding-box

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

3) box-sizing: border-box

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

Well, it's a bit pitfall, but it's not fully filled yet. The box-sizing attribute is also related to the browser. Different browser attribute names have different prefixes. This is easy to see. When you type the attribute name in the IDE, you will naturally be prompted.

General Browser: box-sizing

Firefox uses-moz-box-sizing

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

How about this CSS knowledge point.