css 动态获取宽度高度 |css自适应布局原理

首先，在CSS中获取元素的宽度和高度，可以使用两个属性：width和height。这两个属性可以直接在CSS样式表中设置，比如：

.my-element {
width: 100px;
height: 50px;
}

如果要动态获取元素的宽度和高度，可以使用JavaScript。具体来说，可以使用元素的getComputedStyle方法来获取元素的CSS属性，然后获取width和height属性的值，比如：

let element = document.querySelector('.my-element');
let styles = window.getComputedStyle(element);
let width = styles.width;
let height = styles.height;
console.log('width:', width, 'height:', height);

注意，使用getComputedStyle方法获取的width和height属性的值是字符串类型，需要转换成数字类型才能进行数值计算。

另外，如果想要获取元素的实际宽度和高度（包括padding、border和margin），可以使用元素的offsetWidth和offsetHeight属性，比如：

let element = document.querySelector('.my-element');
let width = element.offsetWidth;
let height = element.offsetHeight;
console.log('width:', width, 'height:', height);

需要注意的是，offsetWidth和offsetHeight属性获取的是整数值，因此不需要进行数据类型转换。

使用CSS动态获取元素的宽度和高度并不复杂，只需要了解一些基本的JavaScript和CSS知识即可。通过动态获取元素的宽度和高度，可以实现一些有趣的效果，比如图片自适应大小、响应式布局等。