They are all used to set the size of the font and the width and height of the box, but px will not change due to changes in browser size, while em and rem will change due to changes in browser size.
In the process of writing code, we often use size units when defining the size of fonts or the width and height of elements in CSS. Today we will introduce in detail the common units in CSS. The name of the size unit and its usage have certain reference value. I hope it will be helpful to everyone.
【Recommended course: CSS Tutorial】
##px
px is the abbreviation of pixel, which means pixel. It is used when specifying the font size and the width and height of the element. Pixels are relative to the monitor screen resolutionExample: Set the width to 200px and the height to 200px for a div elementdiv{ width:200px; height:200px; border: 1px solid #ccc; text-align: center; line-height: 200px; font-size: 16px; }
em
em is a relative length unit, which is relative to the font size of the text within the current object. If we have not set the font size of the current text, then em will be relative to the default font size of the browser The default font size in the browser is 16px, in other words 1em=16px, generally when we write Em units are often used in adaptive layout. Simplify the code by setting the font-size value in the body selector in CSS so that all ems on the page are relative to the body value. Example: Set the width to 100px and the height to 100px for the div element by changing the size unit to em1em=16px, so 100px=6.25em<style> div{ width:6.25em; height:6.25em; border: 0.0625em solid #ccc; text-align: center; line-height: 6.25em; } </style>
body{ font-size: 62.5% } div{ width:10em; height:10em; border:0.1em solid #ccc; } </style>
#rem:
rem is a new relative unit in CSS3. The difference between it and em is that when using rem to set the font size for an element, Still a relative size, but relative only to the HTML root element. Its use is very simple. You can change its value by changing the size of the root element. Example: Set the width to 100px and the height to 100px for the div element by changing the size unit to rembody{ font-size:10px; } div{ width:15rem; height:15rem; border:0.01rem solid pink; text-align: center; line-height: 15rem; font-size: 2rem; }
The above is the detailed content of The difference between px, em and rem. For more information, please follow other related articles on the PHP Chinese website!