今日完成：

阅读文档《HTML编码规范》《CSS编码规范》看了一遍编码规范，思考为什么要有代码规范？

深刻理解到编程风格不一致, 会给代码阅读者和其他代码提交者造成不小的困扰。

而规则的作用就是避免混乱. 但规则本身一定要权威, 有说服力, 并且是理性的。 使代码易于管理的方法之一是加强代码一致性.。让任何程序员都可以快速读懂你的代码这点非常重要. 保持统一编程风格并遵守约定意味着可以很容易根据 “模式匹配” 规则来推断各种标识符的含义. 创建通用, 必需的习惯用语和模式可以使代码更容易理解.。代码规范不仅列出你要怎么做, 还告诉你为什么要这么做, 哪些情况下可以不这么做, 以及如何权衡其利弊。

了解设置背景背景相关属性

CSS 规定以下与背景相关属性。 

•  background-color （背景颜色）
  

•  background-image （背景图片地址）
  

•  background-position （背景图片位置）
  

•  background-size （背景图片尺寸）
  

•  background-attachment （背景粘附）
  

•  background（简写属性） 
  

•  background-clip、background-origin、background-break（目前尚未得到广泛支持）
  

明日计划：

继续启动任务5

1.处理更复杂的移动端页面； 

2.同样是左中右的布局，可以用很多不同的方法来完成； 

3.用css3的方法更好地拉伸背景图

4.继续啃Flex 布局和浮动属性。

遇到的问题：

1.Flex 布局内容太多，对于布局毫无头绪，明天继续。

2.浮动属性一直是比较模糊的，感觉似懂非懂，明天继续。

 收获： 

‍‍display属性‍‍

每一个元素都有默认的display属性，使用最多的是block, inline和inline-block。

根据display属性，我们可以将元素分为块级元素(block)和内联级元素(inline)。它们最大区别是:block元素可以设置宽度，独占一行。inline元素宽度由内容决定，与其他元素并列在一行。

常见的block属性元素有：div, h1-h6, ul, li, ol, dl, dd, dt。

常见的inline属性元素有: span, a, em。

不常用的属性 table-cell 指让标签元素以表格单元格的形式呈现，单元格有一些比较特殊的属性，可以设置元素的垂直居中等。

display常用的属性

position属性常用值

自适应设计与响应式设计的异同？

自从移动互联网飞速发展以来，各种各样的终端机型层出不穷，很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone/iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。

让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）即"一次设计，普遍适用"？

2010年，Ethan Marcotte提出了"自适应网页设计"（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。

自适应布局的使用价值在于它能够提供一种更加实用的解决方案，使得项目的实现成本更低，并且更加易于测试。一个自适应布局可以被看作是响应式布局的一个更加廉价的替代品，会在项目资源紧缺的情况下更具有吸引力。

而在响应式布局中你却要考虑上百种不同的状态:

响应式网页设计是自适应网页设计的子集。响应式网页设计指的是页面的布局（流动网格、灵活的图像及媒介查询）。总体目标就是去解决设备多样化问题。

响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。

当固定宽度与流动宽度结合起来时，自适应布局就是一种响应式设计，而不仅仅是它的一种替代方法。

CSS浮动相关

CSS浮动这也是CSS定位机制的一种。

首先了解两个概念：

文档流：文档流是文档中可显示对象在排列时所占用的位置。

浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

浮动的实际用途，可设置文字环绕或使元素宽度由内容填充（类似Inline-block)。使用浮动需要注意的是如果浮动的元素高度比父级容器还高，那么需要设置父级容器的overflow属性为auto,使其自动撑满。

Flex布局是什么？

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。