Quasar中css总结

html-css010

Quasar中css总结,第1张

用了一段时间的quasar了,它里面封装的 css 类确实很好用,但是在帮助文档中,描述得零零散散,不方便使用,遂总结一下。

text-[ h1~6, subtitle1, subtitle2, body1~2, caption, overline ]

text-weight-[ thin, light, regular, medium, bold, bolder ]

text-[ right, left, center, justify, bold, italic, no-wrap, stike, uppercase, lowercase, captitalize ]

text-[颜色名称]:text-teal

primary(淡蓝),secondary(淡绿),accent(淡紫),dark(黑色),positive(深绿),negative(红色),Info(亮蓝),warning(黄色)

每种颜色由浅到深分为 1-14 级

red, pink, purple, deep-purple, indigo(靛蓝), blue, light-blue, cyan, teal(青色), green, light-green, lime, yellow, amber, orange, deep-orange, brown, grey, blue-grey

在应用程序的 *.vue 文件中,可以使用 $primary , $red-1 等颜色。

|

|

|

|

|

|

子元素可以覆盖父元素上指定的对齐方式 。 这允许对单个Flex项进行对齐。

可用值有: self-start , self-center , self-baseline , self-end , self-stretch

与 flex 值使用类似

Quasar使用一个12分的列系统来分配子行的大小。 以下是可用的CSS辅助类的一些示例:

|

|

在上面的例子中,由于8/12 = 2/3 = 66%,col-8占据了行宽的三分之二(2/3),而col-2占据了六分之一(2/12 = 1 / 6〜16.67%)。

CSS辅助类 col-auto 使单元格只填充需要渲染的空间。 另一方面, col 试图填充所有可用的空间,同时如果需要也可以缩小。

CSS辅助类 col-grow 使单元格至少填充需要渲染的空间,并有可能在有更多空间可用时增长。

CSS辅助类 col-shrink 使单元格最多填充需要呈现的空间,并且当没有足够的可用空间时有可能收缩。

您可以使用 order-first 和 order-last CSS辅助类来设置子元素的顺序

默认情况下,Flex项按源(source)顺序排列。 但是,order属性控制它们在flex容器中的显示顺序。 如果您需要更多粒度,请使用 order CSS属性并分配所需的值。

例子:

|

|

以下是CSS order 属性的工作原理:

分类: 电脑/网络 >>程序设计 >>其他编程语言

问题描述:

超文本标记语言和CSS语言在网站设计中的关系是什么?

超文本标记语言和CSS语言能不能相互转换?

解析:

超文本标记语言即HTML,主要用来表达页面中的内容,而CSS是对要表达的内容的格式的定义。这样的组合可以提高设计灵活性。

它们的关系是CSS辅助HTML,提供更好更灵活的格式控制方式。

他们不能相互转换,但可以只有HTML,而将CSS的内容以HTML格式标志表示;但不能没有HTML而只有CSS。