在CSS樣式表中,有一種常用的長度單位叫做“em”。它指的是字符“M”的寬度,但是實質上它指的是相對于父元素的字體大小的單位。使用em作為長度單位可以幫助我們更好地調整網站的響應式布局。
body { font-size: 16px; } h1 { font-size: 2em; /* 32px */ } p { font-size: 1em; /* 16px */ }
在上面的代碼中,我們可以看到,當我們設置子元素的字體大小為1em時,它的大小將等于父元素的字體大小。同樣地,我們可以設置字體大小為2em,可以將字體放大到父元素大小的兩倍。
另外,我們也可以將em單位結合使用。例如,在下面的代碼中,我們將一個標題元素的字體大小設置為父元素字體大小的1.5倍,同時將它的上下邊距設置為之前字體大小的0.5倍。
.title { font-size: 1.5em; /* 24px */ margin-top: 0.75em; /* 12px */ margin-bottom: 0.75em; /* 12px */ }
em單位的好處在于它能夠自適應不同的屏幕大小和不同的設備,從而提供更好的用戶體驗。希望在寫CSS樣式表時,能夠正確使用em單位,更好地調整網頁布局。
上一篇js和html5和css
下一篇js如何調用css樣式