CSS中設(shè)置相對高度有兩種方式,一種是使用相對長度單位,另一種是使用百分比單位。
使用相對長度單位,最常見的有em和rem。em單位是相對于父元素字體大小的倍數(shù),rem單位是相對于根元素字體大小的倍數(shù)。例如,將一個(gè)元素的高度設(shè)置為1.5em,則該元素的高度將是其父元素字體大小的1.5倍。而將一個(gè)元素的高度設(shè)置為1.5rem,則該元素的高度將是根元素字體大小的1.5倍。
/* 使用em單位設(shè)置相對高度 */ .parent{ font-size: 16px; } .child{ height: 1.5em; /* 相對于父元素字體大小的倍數(shù) */ } /* 使用rem單位設(shè)置相對高度 */ html{ font-size: 16px; } .child{ height: 1.5rem; /* 相對于根元素字體大小的倍數(shù) */ }
使用百分比單位,則是相對于父元素的高度或?qū)挾取@纾瑢⒁粋€(gè)元素的高度設(shè)置為50%,則該元素的高度將是其父元素高度的50%。同時(shí),百分比單位也可以結(jié)合使用其他相對長度單位,例如,將一個(gè)元素的高度設(shè)置為50%和1rem,則該元素高度將是其父元素高度的50%加上1rem的高度。
/* 使用百分比單位設(shè)置相對高度 */ .parent{ height: 200px; } .child{ height: 50%; /* 相對于父元素高度的百分比 */ } /* 結(jié)合其他相對長度單位設(shè)置相對高度 */ .parent{ height: 200px; font-size: 16px; } .child{ height: calc(50% + 1rem); /* 相對于父元素高度的百分比加上1rem */ }
總的來說,使用相對長度單位和百分比單位都能夠?qū)崿F(xiàn)相對高度的設(shè)置,但需要根據(jù)具體需求選擇合適的單位。同時(shí),相對單位的選擇還要考慮到頁面整體布局和響應(yīng)式設(shè)計(jì)。
上一篇css 跟隨滾動條