卡片/Cards

MDL的卡片/Card组件非常适合显示复杂的、包含多种类型信息的内容：

卡片通常具有固定的宽度，而高度则根据场景不同，可以固定，也可以变化。 卡片是一种新型的界面元素，它为用户提供了通过单一访问点访问复杂信息 的手段。

使用mdl-card样式类将外层元素声明为卡片组件，使用mdl-card__title 等样式类将内层元素声明为标题、媒体、动作等容器：

<any class="mdl-card">
    <any class="mdl-card__title">...</any>
    <any class="mdl-card__media">...</any>
    <any class="mdl-card__supporting-text">...</any>
    <any class="mdl-card__actions">...</any>
    <any class="mdl-card__menu">...</any>
</any>

卡片组件默认为330px宽，最小200px高，是一个主轴为竖向的flex容器。可以显式地 设置其宽度和高度。

title、media、supporting-text和actions作为flex容器成员在垂直方向 上依次排列，其高度是由内容决定，或者被显式地设定。例如，很多时候，我们希望给 title区域增加背景图片以增强感染力，那么将照片设置为title区域的背景之后，还需要 设置title区域的高度：

<div class="mdl-card">
    <div class="mdl-card__title" 
        style="background:url(img/bg.jpg) no-repeat;backgroud-size:cover;height:150px;">
        ...
    </div>
</div>

menu块被设置为绝对定位，总是居于卡片组件的右上角。