Detailed explanation of some commonly used font-size font units and line-height in CSS
|
px(pixel) I believe everyone is familiar with the term pixel. Next, let's introduce some small knowledge points about this unit: Pixel is composed of the words picture and element. Pixel is not an absolute natural length unit. For example, the "natural length" of the same 1 px size is different on different devices. When you zoom in on a picture, you will find that the picture is composed of small squares, each small square is 1px. The greater the zoom, the longer the natural length of 1px. Therefore, the more pixels a picture of the same natural length contains, the clearer the picture will be. em Relative to the font size of the text in the current object. It can also be understood as a percentage unit, 1em=100%. So let's introduce what kind of effect em presents in CSS style: If the current child element has no font size set (the browser default font size is 16px), then the child element sets the font size:
p{
font-size:1.5em;
}
div{
font-size:1.5em;
}
<div>
<p>
Font size</p>
</div>The "font size" here is 1.5 x 1.5 x 16 = 36px The font size of the parent element is inherited by the child element, but the inherited value is the px value, not the em value. How to understand it?
<body>
<div>
<p></p>
</div>
</body>Then the sub-elements div and p in body are both 32px (not overlapping) rem Although it is also a percentage relative to the font size, similar to em, the reference object is different. The reference object of rem is not the parent element, so no matter how the parent element changes, the font size of the element currently set to rem will not respond. rem is relative to the root element (that is, html). When we write an html document, both head and body are wrapped by <html></html> tags. In the css style we can also change the font-size of html
html{
font-size:10px;
}
div{
font-size:2rem;
}At this point, the div's font size is 20px; Write numbers directly in line-height in CSS style This is wrong for However, in addition to the above unit settings, In line-height, em is also a ratio relative to the current font size, and inherits the fixed value of px. Child elements will not inherit the value of em. However, Summarize This is the end of this article about some commonly used font-size units and line-height in CSS. For more relevant CSS font-size and line-height content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future! |
<<: How to install jupyter in docker on centos and open ports
Recommend
How to write elegant JS code
Table of contents variable Use meaningful and pro...
Windows 10 installation vmware14 tutorial diagram
Software Download Download software link: https:/...
CSS3 achieves flippable hover effect
CSS3 implements a flippable hover effect. The spe...
MySQL Quick Data Comparison Techniques
In MySQL operation and maintenance, a R&D col...
Installation tutorial of MySQL 5.7 green version under windows2008 64-bit system
Preface This article introduces the installation ...
Detailed explanation of Bind mounts for Docker data storage
Before reading this article, I hope you have a pr...
Setting the width of table cell td is invalid and the internal content always stretches it
When making a table page, sometimes the width set ...
MYSQL unlock and lock table introduction
MySQL Lock Overview Compared with other databases...
Simple usage example of MySQL 8.0 recursive query
Preface This article uses the new features of MyS...
Implementation of Nginx load balancing/SSL configuration
What is load balancing? When a domain name points...
Solution to occasional crash of positioning background service on Linux
Problem Description In the recent background serv...
Summary of 7 types of logs in MySQL
There are the following log files in MySQL: 1: re...
Configure selenium environment based on linux and implement operation
1. Using Selenium in Linux 1. Install Chrome Inst...
How to use the MySQL authorization command grant
The examples in this article run on MySQL 5.0 and...
js to implement the snake game with comments
This article example shares the specific code of ...