html5+css媒体查询、多列+精灵雪碧图

 day011-hTML5

（一）html5新增标签

1、header footer  article（内容区） aside（侧边栏） details（文档某个细节） summary（details中的标题） figure（独立的流内容） figcaption（figure的标题）marh（标记，默认是黄色） nav（导航链接）。

2、meter（value实际值，min最小值，max最大值）       <ruby>(给汉字加拼音)

（二）html中新增的表单元素

1、eamil类型  2、url类型  3、number类型  4、range类型  5、date类型   6、searche类型  7、color   

（三）其他新增标签

1、progreen（下载进度标签）     2、section（文档节点标签） 3、video（视频标签）  4、audio（音频标签）   5、source  6、datalist(提示了可能值)   7 、keygen  8、embed   9、canvas（绘图标签）

day012-css媒体查询、css3多列布局

（一）Media Query响应式布局-媒体查询

简而言之，就是一个网站可以兼容多个终端，而不是Wie每一个终端做一个特电的版本。

响应式设计不一定是最佳选择，如果公司有足够人力、资源，为每个终端体重特点的版本当然跟最好的。但往往一些公司或者页面没必要这样，用媒体查询比较方便。

（二）优缺点

优：1、面对不同的分辨率设备灵活性强

2、能够快捷解决多设备显示适应问题

缺：1、需要兼容各种设备工作量大，效率略慢。

2、代码累赘。会出现掩藏无用的元素，加载时间长

3、一定程度上改变了网站原有的布局，会出现用户混淆的情况

（三）css中的media query（媒体查询）是什么？

作为css3规范的一部分，媒体查询可以针对不同的屏幕尺寸设置不同的样式，它为每种的用户提供了最佳体验，网站在任何尺寸设置下都能有最佳的显示效果

（四）使用media query的基本语法

第一种（在内部样式style中）：  @media  mediatype and|not|only （media feature）{

css-code；

}

注意and后面的空格！

其中：mediatye指的是媒体类型，常用的是screen（手机、电脑、平板），还有all（所有设备）、print（用于打印机和打印预览）、speech（应用于屏幕阅读器等发声设备）；

第二种（外联样式）：<link rel="stylesheet"  media="screen and (min-width:1000px)"  href="1000.css"/>

（五）多列、用户界面相关新属性

多列：column-count  分几列       column-gap  列间距  column-rlue  列分割线的样式

例：div{column-count：3； -webkit-column-count：3； -moz-column-count:3; }

[以上是应对各个浏览器，最好每个数字都设置一样]

column-rule：宽度 样式 颜色；【宽度值有thin（细边框）、medium（中等边框）、thick（粗边框），也可以指定数值；样式值有hidden，dotted、dashed、solid等】

（六）column-span：指定元素要跨多少列

（七）Box-sizing

box-sizing属性允许你以“W3C的盒模型”或“IE盒模型”来设定义元素，以适应区域。

两种盒模型：1、content-box（标准）  2、border-box（怪异）

day013-《css sprite》

（一）什么是精灵（css sprite）

css sprite 又称css精灵，雪碧图，是一种网页图片处理方式。

（二）css sprite 原理

  其实就是把 网页中的一些背景图片整合到一张图片文件中，在利用css的background-img、background-repeat、background-position属性，对这张大图进行  点位。background-position可以用数字negative精确的定位出背景图片的位置。

（三）scc sparite优点

1、能减少网页的http请求，从而大大提高了页面的性能。

2、能减少图片的字节

3、解决了命名的困扰，一张图片，一个名字就够了。

一句话概述：css sprite（图片整合技术）的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面的加载速度。