How to understand several lengths in CSS

This article mainly explains "how to understand several lengths in CSS". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to understand several lengths in CSS".

Let's talk about the distances of css. There are roughly eight distances: px, em, pt, pc, in, mm, cm and ex. The most common one is px. I have also seen ex, mm and cm. Of course, the latter two are more common in that year.

In fact, px is the most familiar to us, and it is also most widely used on computers, because the resolution of the display is... px*....px. We know that if the resolution is more convenient and concise for the browser's maximum interface, there should be a reason.

The em is a relative unit of length, relative to the default font size of the system.

As for our most common mm and cm is our pure sense of cm and mm, they are absolute units of length, with the "absolute" will know it.

I don't see much of the remaining four, but here are some of its problems:

Ex is also a relative length, and its reference is not the default font size of the system, but the height relative to the character "x"

In, pc and pt are all absolute length, and the conversion relationship between them is: 1in=2.54cm=25.4mm=72pt=6pc.

Of course, the relative length also has its corresponding conversion relationship, that is: 16px=1em=100%=12pt

It should be noted that there is still a drawback in px: the font scaling function cannot be achieved under ie6.

Thank you for reading, the above is the content of "how to understand several lengths in CSS". After the study of this article, I believe you have a deeper understanding of how to understand several lengths in CSS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!