在CSS中,像素的設(shè)置可以通過(guò)多種方式完成,可以直接在CSS規(guī)則中設(shè)置像素值,
div { width: 200px; height: 100px; }
在這個(gè)例子中,div
元素的寬度被設(shè)置為200像素,高度被設(shè)置為100像素。
可以使用相對(duì)單位(如em、rem、vw、vh等)來(lái)設(shè)置像素值,這些單位與像素的關(guān)系可以通過(guò)瀏覽器的字體大小、視口大小等因素進(jìn)行轉(zhuǎn)換。
div { width: 2em; height: 1rem; }
在這個(gè)例子中,div
元素的寬度被設(shè)置為2em(當(dāng)前字體大小的2倍),高度被設(shè)置為1rem(當(dāng)前根字體大小的1倍)。
還可以使用CSS的calc()
函數(shù)來(lái)計(jì)算像素值,
div { width: calc(50% - 20px); height: calc(100% - 50px); }
在這個(gè)例子中,div
元素的寬度被設(shè)置為容器寬度的50%減去20像素,高度被設(shè)置為容器高度的100%減去50像素。
需要注意的是,CSS中的像素值必須是正數(shù)或零,不能是負(fù)數(shù),如果設(shè)置了一個(gè)元素的寬度和高度,那么這個(gè)元素的min-width
、max-width
、min-height
和max-height
屬性將不再起作用。