今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

看了一会Y神的日报，受益匪浅

提交任务11 12 13

大致理解 用sass写出栅格系统的原理

理顺sass书写规范

明天计划的事情：（一定要写非常细致的内容） 

完成轮播图

理解并自己写出栅格

简单样式表的分组，并完善

遇到的问题：（遇到什么困难，怎么解决的）

 有点怠惰，需要认真起来

收获：（通过今天的学习，学到了什么知识）

对于块级元素来说，

1、它的宽度在未设置之前是继承父级的宽度，铺满整行，多个块级元素的排列一个个按照自己的高度竖向排列，像一个个块一样。

2、可以设置width和height来改变元素的大小。

3、可以设置margin和padding,以及行高。

对于inline水平的元素来说，

1、它的宽度在未设置之前是元素里面包裹内容的宽度，多个内联元素的排列，一个个按照横向水平排列。

2、设置width和height，line-height属性则无效。

3、只能设置水平方向的margin和padding,竖直方向的padding-top ,padding-bottom ,margin-top,margin-bottom则无效。

对于inline-block水平的元素来说，
1、它集成block水平元素和inline水平元素的优点，且多个元素之间是水平横向排列的。

2、可以用width和height来改变元素大小，也可以设置margin和padding，及line-height。

它们三者的区别体现在以下三个方面：默认宽度、width和height及边距设置，排列方式上面。

权重等级

1、行内样式，指的是html文档中定义的style

2、ID选择器

3、类，属性选择器和伪类选择器

4、元素和伪元素

  怎么确定权重?

权重记忆口诀。从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1.

1、相同的权重：以后面出现的选择器为最后规则.

兼容性：使用其他浏览器如firefox、IE10+等查看保证展示效果一致?如何达到兼容性？

在head里添加这个标签

<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />

百度如下：

 这 样写可以达到的效果是如果安装了GCF，则使用GCF来渲染页面，如果没安装GCF，则使用最高版本的IE内核进行渲染。Google Chrome Frame（谷歌内嵌浏览器框架GCF）。这个插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核，而且支持IE6、7、8等多个版本的IE浏览器。

  1、WebKit, Blink, Edge浏览器等需要带上-webkit-前缀，且是双冒号，写的时候还要带上input。

　　2、针对火狐浏览器则有两种写法，一种是针对低版本的，一种是针对高版本的，二者都需要带上-moz-前缀。要点1：火狐低版本的使用冒号（：），而高版本的使用双冒号（：：）；要点2：火狐浏览器不需要像webkit内核那样要带上input。

　　3、由于placeholder属性只在IE10+才支持，因此，针对IE10、IE11的写法是加上-ms-前缀，使用的是冒号（：），需要带上input

固定宽度布局WebApp多终端自适配方法总结

1、iPhone上，指定viewport 的width等于页面设计宽度：

<meta name="viewport" content="target-densitydpi=device-dpi, width=480px, user-scalable=no" />

2、Android上，根据公式计算得出target-densitydpi的值，指定到viewport：

get-target-densitydpi = UI-width / device-width * window.devicePixelRatio * 160;

//UI-width ：WebApp布局宽度

//device-width ：屏幕分辨率宽度

<meta name="viewport" content="target-densitydpi=get-target-densitydpi, width=device-width, user-scalable=no" />

在Sass中，maps代表一种数据类型，可以包含若干键值对的对象类型，使用()包围一个map，里面的键值对用逗号隔开，键和值可以是任何的Sass数据类型，尽管一个值可以用在多个键上，但是通过一个键我们必须只能找到一个值。map不能直接在css中使用，如果你把一个map赋值给一个元素将会报错。下面的代码示例一个经典的map。

$map: (

  key1: value1,

  key2: value2,

  key3: value3

);

函数 功能 示例

map-keys(map) 返回map里面所有的key(list) map-keys(("foo": 1, "bar": 2)) => "foo", "bar"

map-values(map) 返回map里面所有的value(list) map-values(("foo": 1, "bar": 2)) => 1, 2

map-get(map,key) 返回map里面指定可以的value map-get(("foo": 1, "bar": 2), "foo") => 1

map-has-key(map,key) 返回map里面是否含有指定的key map-has-key(("foo": 1, "bar": 2), "foo") => true

map-merge(map1,map2) 合并map(map) map-merge(("foo": 1), ("bar": 2)) => ("foo": 1, "bar": 2)

map-remove(map,keys) 删除指定map中的指定key(map) map-remove(("foo": 1, "bar": 2), "bar") => ("foo": 1)

keywords(args) 返回一个函数参数组成的map(map) @mixin foo(args...){@debug keywords($args); //=> (arg1: val, arg2: val)}

  从以上两张截图可以看出 @each指令遍历map  是把map属性各自分发

map-valuesmap-values 是将map的属性放入统一css中

@return zip   则是将可以简化的属性压缩后 再放入css中

 设定了两个已知map 做固定的搭配，没有想明白用法。