<html>
<head>
<style>
#div1{
width:660px
height:400px
border:1px soild #f00
}
#div2{
width:660px
height:200px
border:1px soild #f00
}
#wenzi{
width:660px
height:200px
border:1px soild #f00
}
</style>
</head>
<body>
<div id='div1'>
<div id='div2'>
<img src='图片地址'>
</div>
<div id='wenzi'></div>
</div>
</body>
</html>
用了一段时间的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中通过@font-face属性来实现网页中嵌入特殊字体。
首先获取要使用字体的三种文件格式.EOT、.TTF或.OTF、.SVG，确保能在主流浏览器中都能正常显示该字体。
.EOT，适用于Internet Explorer 4.0+
.TTF或.OTF，适用于Firefox 3.5、Safari、Opera
.SVG，适用于Chrome、IPhone
最常见的是.TTF文件，需要通过这种文件格式转换为其余两种文件格式。
在css中进行如下声明：
@font-face {
font-family: 'fontNameRegular'
src: url('fontName.eot')
src: local('fontName Regular'),
local('fontName'),
url('fontName.woff') format('woff'),
url('fontName.ttf') format('truetype'),
url('fontName.svg#fontName') format('svg')
}
/*其中fontName替换为你的字体名称*/
在css中使用这个字体
h1{font-family: fontNameRegular}
