CSS unit of length how to use em
This article introduces the relevant knowledge of "how to use CSS length unit em". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!
First, why use em
Em is also a unit of css, similar to px. Many people will wonder why they still use em when they have px, and em is more troublesome to use than px.
Em is mainly used for flexible layout. Here is a small chestnut to illustrate the power of em.
Document
* {
Margin:0
Padding:0
}
Ul {
List-style:none
}
.top {
Height:80px
Background-color:black
}
.main {
Width:960px
Background-color:#ccc
Margin:0auto
Overflow:hidden
}
.left {
Width:30%
Height:100%
Background-color:aqua
Border:1pxsolidred
Float:left
Font-size:16px
Line-height:18px
}
.right {
Width:60%
Height:100%
Font-size:1em
Line-height:1.125em
Background-color:deeppink
Border:1pxsolidred
Float:right
}
Em test case, without em
Em test case, without em
Em test case, without em
Em test case, without em
Em test case, without em
Em test case, without em
Em test case, without em
Em test case, without em
Em test case, without em
Em test case, without em
Em test case, without em
Em test case, without em
Em test case, without em
Em test case, without em
Em test case, without em
Em test case, without em
Em test case, without em
Em test case, without em
Em test case, without em
Em test case, without em
Em test cases have the power of em
Em test cases have the power of em
Em test cases have the power of em
Em test cases have the power of em
Em test cases have the power of em
Em test cases have the power of em
Em test cases have the power of em
Em test cases have the power of em
Em test cases have the power of em
Em test cases have the power of em
Em test cases have the power of em
Em test cases have the power of em
Em test cases have the power of em
Em test cases have the power of em
Em test cases have the power of em
Em test cases have the power of em
Em test cases have the power of em
Em test cases have the power of em
Em test cases have the power of em
Em test cases have the power of em
This imitates the general layout of a web page and gives the difference between using em and px.
This is the end of the content of "how to use CSS length unit em". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!
