HTML学习笔记16——尺寸的表示_px、%、em三种
生活随笔
收集整理的這篇文章主要介紹了
HTML学习笔记16——尺寸的表示_px、%、em三种
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1.像素表示： ?23px
2.子像素可以用百分比表示其大小，如50%，表示為父元素的一半
? ? 如果塊狀子元素的寬度不指定，默認是占滿父元素的寬度；
3.用em表示字體大小時，表示相對大小，是與父元素的比值：
1em表示與父元素的字體大小相同；
0.5em表示是父元素的字體大小的一半；
2em表示是父元素的字體大小的2倍；
注：em是相對于自身字體大小而言的，如果自身未指定，那么就是繼承父元素的字體大小。
? ? ? ? ? ? ?當父元素取10px時，子元素若取1.2em,1.5em...則表示子元素的字體大小為12px,15px.....
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> View Code效果：
4. rem的表示方法，rem是相對于根元素的大小而言的。
?
轉(zhuǎn)載于:https://www.cnblogs.com/Christeen/p/5712914.html
總結(jié)
以上是生活随笔為你收集整理的HTML学习笔记16——尺寸的表示_px、%、em三种的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 为什么SimpleDateFormat不
- 下一篇： 前后端分离项目，后端是如何处理前端传递的