CSS是一種非常強大的前端技術，可以對網頁進行各種美化和布局。在布局方面，經常需要獲取元素的高度，便于進行下一步操作。下面是使用CSS獲得元素高度的幾種方式。 首先是使用height屬性獲取元素的高度。height屬性可以設置元素的高度，也可以獲取元素當前的高度。這種方式獲取的高度不包括邊框、內邊距和外邊距的高度。代碼如下：

p {
height: 100px;
}
let height = document.querySelector('p').clientHeight;
console.log(height); // 100

如果元素設置了padding和border屬性，那么height屬性獲取的高度就不準確了，需要使用其他方式獲取高度。 其次是使用offsetHeight屬性獲取元素的高度。offsetHeight屬性包括了元素自身的高度、邊框和內邊距的高度，但不包括外邊距的高度。代碼如下：

p {
height: 100px;
padding: 10px;
border: 1px solid #ccc;
}
let height = document.querySelector('p').offsetHeight;
console.log(height); // 122

如果元素設置了margin屬性，那么offsetHeight屬性獲取的高度仍然不準確。 最后是使用getComputedStyle方法獲取元素的高度。getComputedStyle方法可以獲取元素的所有樣式信息，包括寬度、高度、邊框、內邊距和外邊距等。代碼如下：

p {
height: 100px;
padding: 10px;
border: 1px solid #ccc;
margin: 5px;
}
let height = parseInt(window.getComputedStyle(document.querySelector('p')).getPropertyValue('height'));
console.log(height); // 122

使用getComputedStyle方法獲取的高度也包括了元素自身、邊框、內邊距和外邊距的高度，是最準確的方式。 通過以上幾種方式，我們可以輕松地獲取元素的高度，方便后續對元素進行布局和操作。