使用相对长度单位em布局网页内容
順便問一下哈？那個辣椒醬大家感覺怎么樣，你們也買了也嘗了，是不是該反饋反饋啦~~如果還有想要的，可以聯系我吶！
原文地址：自從有了這款辣椒醬，拌飯再也不用老干媽
前言：在頁面開發中，頁面元素的尺寸大小和頁面的字體大小都是我們不可忽略的內容，一個美觀大方、層次分明的頁面會讓人看起來非常舒服，反之，一個排版布局亂七八糟的頁面，不僅用戶體驗度差，還會增加頁面的復雜性，況且在各種設備終端層出不窮的今天，頁面的設計更是重要中的重要！對此，我們可以試著對頁面元素的大小以及字體的大小，都設置為相對值，不再是固定不變的，怎么樣？CSS中，專門有這樣的一個單位——em(相對長度單位)即可實現，我們今天就來看看如何使用相對長度單位em布局網頁內容？
01
1em等于多少px?
下面我們可以先來看一段代碼：
<!DOCTYPE html> <html><head><meta?charset="UTF-8"><title></title><style?type="text/css">html?{font-size: 1em;}</style></head><body><p>段落1</p></body></html>本代碼中，我們將html的字體設置成了1em,一般瀏覽器默認字體大小是16px，那我們來看看，“段落1”的字體大小是多少px?
答案是16px,也就是當我們html的值是1em時，它的子元素的字體大小都是以瀏覽器默認的字體大小來呈現出來的。帶著這個結論，我們在CSS中新添如下代碼：
body{font-size: 1.5em; }再次看看“段落1”的字體大小是多少？
答案是24px，那么這個24是如何來的呢？“段落1”的字體大小=繼承自父元素body的像素1.5em*16px而得來的。接下來我們將p的的字體大小也改成1.5em，你們猜“段落1”的字體大小是多少呢？
p{font-size: 1.5em; }
答案是36px。“段落1”的字體大小=1.5em*該父級元素body的字體大小24px，這個規律大家都知道吧。
到現在為止，我們就可以總結一下em的特點了：
em的值并不是固定的，比如有同學可能自己算了算，將em的默認值當成了16px，其實不然。如果照1em=16px來算的話，最后“段落1”的字體大小應該是1.5em*16px=24px才對，但是實際卻是36px。
em會隨著父級元素的字體大小的變化而變化的。
02
如何讓1em=10px？
由前面的結論我們知道了，瀏覽器默認的字體大小為16px.那么可以定位html的1em的值就為16px，下面層級如果有變化，依次去乘以16px即可，那么問題來了，次次乘以父級元素的大小也是很麻煩的，可不可以把em的值等于10px,這樣10em即是100px,豈不是更好？
我們可以這樣修改一下代碼：
html{font-size: 62.5%; } p{font-size: 1.5em; }再看看“段落1”的字體大小是不是1.5em*10px=15px呢？
確實是的！那是如何做到的呢？前面我們也說過，瀏覽器默認的字體大小是16px.言外之意就是設置了100%，那如何讓它變成10px呢？不就是62.5%嗎？
這就是相對長度單位em的用法，是不是很慶幸自己又學會了一個知識點呢？
往期精彩
binarySearch與IndexOf的那些事兒~
2020-11-01
新機必裝！那些你不知道的實用技軟件在這里！文末免費獲取
2020-10-31
自從有了這款辣椒醬，拌飯再也不用老干媽
2020-10-30
如何使用bootstrap實現輪播圖？
2020-10-29
班級日常分享：一天一瞬間！
2020-10-29
中流擊水，浪遏飛舟
2020-10-28
點分享
點點贊
點在看
總結
以上是生活随笔為你收集整理的使用相对长度单位em布局网页内容的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2022年你的治疗实践的5个最佳网站建设
- 下一篇： 使用相对长度单位rem布局网页内容