字体相关属性

• font-family
• font-size
• font-style
• font-weight
• font

以上属性均可以继承

font-family的取值中，如果有空格，要记得加上引号，例如：
font-family:"Times New Roman, Times,serif"

font 简写属性：
必须同时含有font-family和font-size属性,而且font-size属性必须在前。如果同时有font-style或者font-weight属性，则此属性必须位于font-size之前。

字体系列：
Serif 衬线体
sans - serif 无衬线字体
monospace 等宽字体
cursive 手写体
fantasy 奇幻体

web安全字体：CSS Font Stack

可以另外学习@font-face的相关用法。

需要注意的一些地方：

vertical-align 通常作用于行内元素（inline），或表格单元元素（table-cell）

background-size属性一般单独书写

让父元素围住浮动的子元素

• 给父元素加上overflow：hidden
• 让父元素也浮动

但是以上两种方法因为改变了父元素的属性，也许会导致父元素布局上的一些问题

• 在子元素后加一个元素，其样式设置clear:both
• 给父元素添加伪元素来实现清除浮动，如下：

父元素::after{
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
}

为了方便使用，我们可以设定一个公共的css类名clearfix，为其添加以上样式，在需要清除浮动的时候直接给父元素添加这个类名就可以啦。

Flexbox

重点（敲黑板）。自己写demo练习。

关于浏览器厂商前缀添加的问题，可以直接用Autoprefixer : http://autoprefixer.github.io/。

自适应设计

以设备侦测为基础的渐进增强的技术，针对不同终端和设备做多套设计，然后通过设备侦测技术来决定使用不同的设计。

响应式设计

以媒体查询（media query）为基础，是一套统一的设计，三大要素：

• 流体网格 （fluid grids）、流式布局
• 弹性媒体
• 媒体查询：@media ( ) { }

媒体查询匹配的设备：

• all
• print （打印机或者“打印模式”）
• screen
• speech （屏幕阅读器）

mobile first

UI或UE在做交互效果后，前端默认以移动端优先写样式规则（css rules for mobile device），之后再针对宽屏设备逐渐调整样式规则，从而实现针对不同设备的特有样式效果。

transform

• 可添加一个或者多个
• 作用于block元素或者inline-block元素
• 应用transform的元素其内部元素和样式也会跟随变换

transition

animation

这几部分平常偶尔会用到，视频中都是关于属性的详解，感觉没必要浪费时间，直接自己写demo来把每个属性试验一下就可以了。

如有必要后续再增加内容。