HTML学习笔记16——尺寸的表示_px、%、em三种
1.像素表示: 23px
2.子像素可以用百分比表示其大小,如50%,表示为父元素的一半
如果块状子元素的宽度不指定,默认是占满父元素的宽度;
3.用em表示字体大小时,表示相对大小,是与父元素的比值:
1em表示与父元素的字体大小相同;
0.5em表示是父元素的字体大小的一半;
2em表示是父元素的字体大小的2倍;
注:em是相对于自身字体大小而言的,如果自身未指定,那么就是继承父元素的字体大小。
当父元素取10px时,子元素若取1.2em,1.5em...则表示子元素的字体大小为12px,15px.....
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>尺寸的表示</title> 6 </head> 7 <style type="text/css"> 8 #father{ 9 width:600px; 10 height:300px; 11 background:blue; 12 } 13 #son1{ 14 height:50%; 15 background:green; 16 } 17 #son2{ 18 height: 25%; 19 width:25%; 20 background:red; 21 } 22 #test1{ 23 width:400px; 24 height:200px; 25 font-size: 30px; 26 background: pink; 27 } 28 #p1{ 29 font-size: 20px; 30 } 31 #p2{ 32 font-size: 1em; 33 } 34 </style> 35 <body> 36 <div id="father"> 37 <div id="son1"> 38 子div1只定义高度,未定义宽度,则默认与父div同宽; 39 </div> 40 <div id="son2"> 41 子div2定义宽高; 42 </div> 43 </div> 44 <div id="test1"> 45 我是test1,p标签的父div; 46 <p id="p1"> 47 p1使用像素表示字体大小; 48 </p> 49 <p id="p2"> 50 p2使用em表示字体大小; 51 </p> 52 </div> 53 </body> 54 </html>
效果:
4. rem的表示方法,rem是相对于根元素的大小而言的。