层叠样式表
优势：
CSS可以提高页面的浏览速度。
缩短改版时间，降低维护费用。
强大的字体控制能力和排版能力。
css容易编写。
可以一次设计随处发布。
更好的控制页面布局。
实现表现和结构、内容相分离。
更方便搜索引擎的搜索/page Rank
样式规则：
语法：选择器｛属性1：值1；属性2：值2；...属性N：值N；｝
选择器就是要改变页面中的哪些标签元素
声明要用｛｝括起来，；结束
如果属性中包含空格要用“”括起来
可以指定多个选择器使用相同的样式
样式表：
外部样式表，新建.css文件，在文件中写入样式规则<link rel="stylesheet" href = "xxx.css">
内联样式表，在元素中添加style属性
嵌入式样式表，在html使用<style>标签，<style type="text/css"></style>
选择器：
元素选择器，元素名
id选择器，用#id
类选择器，用.class
后代选择器，选择器1 选择器2
css深化：
就近原则，！important提高元素优先级，伪类选择器，伪对象选择器，@import导入其他css文件，响应式布局可以解决多设备的兼容问题。
文本属性：
font-family：字体
font-size：字体大小
font-style：斜体
font-weight：粗体
color：颜色
line-height：行高
letter-spacing：字符间距
text-decoration：文本修饰
text-overflow：文字溢出处理
white-space : no wrap
text-overflow:hidden
text-align：文本对齐
背景属性：
background-color：背景颜色
background-image：背景图片
background-repeat：背景重复
background-attachment：背景图片附着
基于占满一整行与否，标签分为两大类（文档流）：
占满：行级元素（div，p，h1~h6）
不占满：行内元素（span，）
定位属性：
position：定位
absolute：绝对定位
relative：相对定位
用了一段时间的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 属性的工作原理：
