css元素定位使用变量 |ftl文件怎么导入外部css

/* 定义变量 */
:root {
--header-height: 80px;
}
/* 使用变量 */
header {
height: var(--header-height);
}

在上面的代码中，大家使用了:root伪类定义了一个名为header-height的变量，它的值为80px。接着大家在header选择器的height属性中使用了该变量，这样大家在后续修改header的高度时，只需要修改一处，所有使用该变量的地方都会随之改变。

/* 定义多个变量 */
:root {
--header-height: 80px;
--main-height: calc(100vh - var(--header-height));
}
header {
height: var(--header-height);
}
main {
height: var(--main-height);
}

上面的代码中，大家使用calc()函数和var()函数相结合，定义了一个名为main-height的变量，它的值为视口高度减去header高度。接着大家在main选择器的height属性中使用了该变量，这样大家就可以实现main元素占据剩余视口高度的效果。

通过使用变量定义常量，大家能够让CSS布局更加灵活方便，减少重复的代码，提高代码的可维护性和可读性。