把昨天的日报补上：7.19

今日完成：

1.任务一的反思还有一些知识漏洞

2.试着装了sublime的插件，失败

笔记：

不同的设备ideal viewport的宽度都为多少http://viewportsizes.com/ 

viewport：

layout viewport （布局视口）：手机浏览器viewport宽度。vw,vh尺寸单位代表视口的百分比，这里的视口就是指布局视口

visual viewport （视觉视口）：物理屏幕，屏幕上显示的网站区域尺寸，会受缩放的影响

ideal viewport （理想视口）：理想viewport的宽度等于移动设备的屏幕宽度，通常是屏幕分辨率

CSS像素与 dip 的比例即为网页的缩放比例，如果网页没有缩放，那么一个CSS像素就对应一个 dip（设备逻辑像素） 。

initial-scale [0.0-10.0] 定义初始缩放值

关于布局方式：

1.弹性

2.流式  border不能加百分比

3.自适应

4.响应式

5.静态（固定）

自适应和响应式的区别：

自适应：所有设备显示效果相同

响应式：显示内容随屏幕大小不同而变化

响应式布局的一些技术点纪录：

(1)允许网页的宽度自动的调整

(2)尽量少使用绝对的宽度，多点百分比

(3)相对大小的字体:字体不要使用px写死，最好使用相对大小的em，或者高清方案rem，这个不限制与字体，别的属性也可以这么设置

(4)流式布局，float等float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

(5)选择加载css，<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />，这个意思是如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

(6)图片的自适应

1.对图片和大多数嵌入网页的视频也有效：img, object { max-width: 100%;}

2.老版本的IE不支持max-width：img { width: 100%; }

3.windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：img { -ms-interpolation-mode: bicubic; }

结论：1.如果只做pc端，那么静态布局（定宽度）是最好的选择；

2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；

3.如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。

常用语句：

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

深度思考：

一、<!DOCTYPE> 声明帮助浏览器正确地显示网页，根据文档类型解析文档。

二、两种盒子模型：

IE和W3C:

W3C的元素宽度=content的宽度

IE的元素宽度=content+padding+border

（CSS3）box-sizing：

content-box：width=content+padding+border

border-box：width=width（样式指定的宽度）

1.对于行级元素，margin-top和margin-bottom对于上下元素无效，margin-left和margin-right有效

2.对于相邻的块级元素margin-bottom和margin-top 取值方式

 1） 都是正数： 取最大值   距离=Math.max(margin-bottom,margin-top)

  2） 都是负数： 取最小值   距离=Math.min(margin-bottom,margin-top)

  3）上面是正数，下面是负数或者 上面是负数，下面是正数： 正负相加   距离=margin-bottom+margin-top

三、inline是内联元素，block是块级元素，inline-block是内联块元素。

常见元素：

块元素：div、p、h1...h6、ol、ul、dl、table、address、blockquote、form。

inline：a,span,br,i,em,strong,label,q,var,cite,code

inline-block：img,input

特点：

inline元素:

(1)和其他元素都在一行上；

(2)元素的高度、宽度、行高及顶部和底部边距不可设置；

(3)元素的宽度就是它包含的文字或图片的宽度，不可改变。

block元素:

(1)每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）;

(2)元素的高度、宽度、行高以及顶和底边距都可设置;

(3)元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

inline-block元素:

(1)和其他元素都在一行上；

(2)元素的高度、宽度、行高以及顶和底边距都可设置

区别：

区别主要是三个方面:一是排列方式，二是宽高边距设置，三是默认宽度。

(1)块级元素会独占一行，而内联元素和内联块元素则会在一行内显示。

(2)块级元素和内联块元素可以设置 width、height 属性，而内联元素设置无效。

(3)块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。

常见问题：1.插入img下面会有空白

解决方案：

（1）给图片img标签display:block

（2）定义图片img标签vertical-align:bottom，vertical-align:middle，vertical-align:top。

（3）定义容器里的字体大小font-size为0。

原因：

由于基线的原因，图片下方到bottom会有一小段空白区域。

2.inline-block元素间间距

解决方法：http://www.zhangxinxu.com/wordpress/?p=2357

inline-block和float的区别：

1.文档流：float脱离文档流，可使周围文字环绕；inline-block在文档流内，不需清除浮动，也不会环绕

2.水平位置：定位类属性设置在父元素上，不会影响父元素内浮动元素，会影响到行内设置inline-block的子元素（原因：浮动脱离文档流）

3.垂直对齐：inline-block沿着默认基线对齐，可通过vertical属性设置默认基线。

4.空白（Whitespace）：inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴.

inline-block元素的如何垂直居中

     1：设置上下padding值相等；

     2：设置vertical-align:middle;

     3：设置line-height大于font-size即可实现单行文本垂直居中，无需设置line-height和height值相等

利用浏览器来查看元素的类型

     打开谷歌浏览器，F12，选中“Element”项，然后选中一个元素，在“Computed”的display中即可看到元素的类型，

     查看到底是inline元素还是block 元素，亦或是其它类型的元素。

九宫格实现方法：

1.浮动

2.弹性布局

3.inline-block

4.定位

IDE和编辑器：

编辑器就是纯粹编辑文本的编辑器、IDE是带有软件开发功能的“集成开发环境”。

IDE中很多任务会自动生成很方便，但有些时候自动生成的文件可能会导致运行的时候起冲突。

加和不加meta的viewport有什么区别？

当屏幕足够小的时候，加meta不会出现滚动条，不加meta会出现滚动条

明天计划：

1.提交github

2.sublime插件包下载

3.进行任务二的学习

遇到的困难：

遇到很多知识盲区，比如自适应和响应式的区别，百分比布局算是自适应布局么，通过度娘都一一了解了

收获：

 任务被我拖得太久了，一定要完成