其他CSS辅助类
在编写Vue模板时可以使用很多CSS类。对减轻VueModels和模板的复杂性上非常有用。
以下所列是不完整的。同时检查其他CSS文档页面,如排版、可见性、阴影、定位。
鼠标相关
类名 | 说明 |
---|---|
non-selectable |
用户将无法选择DOM节点及其文本 |
scroll |
应用CSS调整使所有平台上的滚动工作达到最佳状态 |
no-scroll |
隐藏DOM节点上的滚动条 |
no-pointer-events |
DOM元素不会成为鼠标事件的目标 - 点击、悬停等 |
all-pointer-events |
no-pointer-events 的反义词 |
cursor-pointer |
改变DOM元素上的鼠标指针,看起来好像在可点击的链接上 |
大小相关
类名 | 说明 |
---|---|
fit |
宽度和高度设置为100% |
full-height |
高度设置为100% |
full-width |
宽度设置为100% |
window-height |
高度设置为100vh,顶部和底部边距为0 |
window-width |
宽度设置为100vw,左边距和右边距0 |
block |
将display 属性设置为block |
方向有关
类名 | 说明 |
---|---|
rotate-45 |
旋转45度 |
rotate-90 |
旋转90度 |
rotate-135 |
旋转135度 |
rotate-180 |
旋转180度 |
rotate-205 |
旋转205度 |
rotate-270 |
旋转270度 |
rotate-315 |
旋转315度 |
flip-horizontal |
水平翻转DOM元素 |
flip-vertical |
垂直翻转DOM元素 |
边界相关
类名 | 说明 |
---|---|
no-border |
删除任何边框 |
round-borders |
应用通用边框半径,基于当前主题 |
组
有两个名为group
和generic-margin
的特殊CSS类。
group
对所有子DOM元素应用一个小的边界,而generic-margin
对各个DOM元素应用相同的边界(这随每个主题而变化)。
但推荐的方法是使用CSS Flex Gutter。