今天完成的事：完成任务10；学习了响应式布局的相关单位；看了一点和布局有关的文章；稍微理解一点margin的负值；

明天要完成的事：通过任务10；安装less及相关软件；开始任务11；

难题： 不过我写input样式的时候发现要把lable做成前面的input样式；也就是说除非lable把input和后面的文字作为子元素；

或者用2个lable一个做图像一个关联后面文字不然点击文字无法选中input；且input隐藏以后文字点击无法选中input；跟我最开始设想不符；

2个lable没试；我想了一下把图像设成背景；然后给一个padding-left：40px；一但点击文字或者背景图像都处于lable范围；

则input被相中；则关联lable更换背景图片；有点取巧；不过有几点坏处；

增加了代码量不过比2个lable要少 添加css代码即可；增加了向服务器请求的次数（现在还没学到我也不太清楚；）；

而且做成响应式网页有难度；

更改input的样式我倒是会；不过lable样式一改后面文字无法关联input有点奇怪；

最后做响应式基本全靠的媒体查询；不用bootstrap响应式完全没有一点经验和想法还要多看看

看了一点有关布局的东西发现自己的布局真的很菜；基本都是display：flex；

inline-block这些基本都怎么用也没怎么用过；突然发现一个宝藏；

display：巨多功能自己做个记录，

收获：布局记录：

水平居中：（1）display：inline-block；text-align：center；设为行内内联元素；文本居中

（2）display：flex；设为flex容器然后用flex的居中即可；

（3）父元素display：flex；子元素margin：0  auto；父元素变为盒子或者容器子元素在里面居中；

（4）display：table；；margin：0  auto；和上面差不多；即把自身设为盒子容器（块级元素）；然后居中；

不过对父级元素无影响

垂直居中:(1)display:flex;align-items：center； flex自己有的垂直居中；

还有定位没了

以下是相关代码；

   div{

                //用div的样式代替select的样式

                width: 200px;

                height: 40px;

                border-radius: 5px;

                //盒子阴影修饰作用,自己随意

                box-shadow: 0 0 5px #ccc;

                position: relative;

            }

            select{

                //清除select的边框样式

                border: none;

                //清除select聚焦时候的边框颜色

                outline: none;

                //将select的宽高等于div的宽高

                width: 100%;

                height: 40px;

                line-height: 40px;

                //隐藏select的下拉图标

                appearance: none;

                -webkit-appearance: none;

                -moz-appearance: none;

                //通过padding-left的值让文字居中

                padding-left: 60px;

            }

            //使用伪类给select添加自己想用的图标

            div:after{

                content: "";

                width: 14px;

                height: 8px;

                background: url(img/xiala.png) no-repeat center;

                //通过定位将图标放在合适的位置

                position: absolute;

                right: 20px;

                top: 45%;

                //给自定义的图标实现点击下来功能

                pointer-events: none;

            }

回顾了一下之前任务8对响应式的介绍：

当涉及到css，设置最大宽度是有效阻止，网站页面在超大屏幕上面无限扩展显示，这个对缩小页面不会有影响。当从固定宽度改为流式宽度，面临的一个主要问题是图片的显示尺寸。而这个问题在css中有个简单的解决方法，就是只需要设置图片的宽度是100%。
现在你的图片将按照他的父元素宽度显示，并根据他的宽度变化而变化。只需要确保图片的最大宽度，不超过包含他的容器的最大宽度，否则他就可能显示在外面。使用这个办法要记住一点，就是你的图片要足够大，以适应最大的浏览设备尺寸。

响应式设计灵活的关键因素在于流体布局宽度。你需要做的所有就是，创建一个包裹元素，内容元素和列元素的宽度，用以适应不同的设备宽度。这个并不是新东西，然而这一点在现在是比以往更重要；

我的理解是针对大页面比如说像2560px的页面可以对网页设定最大宽度；额后面这一句意思是创建一个div或者别的在外面；定出最大宽度但是后面的内容元素和列元素理解不是很透彻；就是内部div或者图片的宽度的意思；

采用流式布局概念和公式，把他们运用到网格的所有部分，就可以创建一个完全动态的网站了，它可以适应各种尺寸的设备。为了更好的控制流式布局，你也可以使用最小宽度（min-width），最大宽度（max-width），最小高度（min-height）和最大高度（max-height），把他们应用到容器元素(container)上。

仅仅有流式布局是不够的。有时浏览器的显示窗口宽度可能很小，以至于按照缩放比例得到的布局，创建出来的列太小不能有效的显示内容。具体说，就是当布局太小或是太大，内容可能难以辨认，布局也可能遭到破坏。在这种情况下，媒体查询就用来辅助建立一个更好的用户体验。

第1：流式布局：指以宽度为不确定的百分比或者相对单位；如rem或em为相对单位；而在某些时刻；浏览器的屏幕很小时；百分比就不能充分显示你的页面内容；用媒体查询来帮助解决问题；

按这么说我写任务10的思路是错的；我虽然按照UI图写出来了；但是却没有按百分比布局；做到对屏幕自适应完全是因为媒体查询设的；

第2：

断点识别

你的直觉可能告诉你在写媒体查询时，要根据常见的视窗尺寸设置断点，用以判断不同的分辨率，例如320px,480px,768px, 1024px, 1224px等等。但这是个坏主意。

在搭建响应式网站时，应该可以适应各种不同视窗尺寸，而不需要考虑设备的分辨率。设置断点只是在网站布局被破坏，看起来很怪或是内容无法显示的时候才需要设置。

此外，每时每刻都会有新设备和新分辨率在发布。而试图跟上这些变化可能是个无止境的过程。

断点的设置很不到位；另外媒体查询要遵守移动第一的原则：移动设备的用户，通常使用小视窗的设备，不应该加载pc机上面的所有样式，之后又加载为移动设备写的样式。如此一来浪费了带宽，而带宽对于任何搜索漂亮网站的用户来说，都是很宝贵的。

控制一个网站在手机设备上的显示比例，可以通过minimum-scale, maximum-scale, initial-scale,和 user-scalable 四个属性来控制。

无意间看到了和响应式有关的单位的说明：比较易懂；

还找到了修真院的博客；舒服

3、rem

css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。
（坑：当html的font-size 小于12px时，rem计算的结果不对。原因见《浏览器字体大小的坑》）

4、%

一般宽泛的讲是相对于父元素，但是并不是十分准确。

1、对于普通定位元素就是我们理解的父元素

2、对于position: absolute;的元素是相对于已定位的父元素

3、对于position: fixed;的元素是相对于ViewPort（可视窗口）

5、vw

css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。

举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

6、vh

css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。

举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。

另外关于我比较头疼的导航栏也有了几个推荐的样式：

CSS下拉菜单

采用“select”下拉菜单的同一个概念，换用CSS制作下拉菜单（这样简单多了）。在移动设备或小屏幕下，导航菜单是隐藏的，取而代之的是一个菜单按钮。当用户点击了这个菜单按钮时，导航菜单项以下拉菜单的样子展示出来。这个解决方案并不是菜单显示，内容往下推，而是整个菜单层缀在内容上面。

五、切换菜单

这个方案类似于“CSS下拉菜单”方案，默认状态下把导航菜单项隐藏，只显示菜单按钮。也是通过用户点击菜单按钮，隐藏的导航菜单才会显示出来，但是有一点区别的：css下拉菜单，弹出的导航菜单不会把内容往下推，而是层缀在内容之上，而这个方案却不一样，当用户点击菜单按钮后，导航菜单项显示出来，同时内容会往下推，空出足够的空间放置强出的下拉菜单。为了让你的效果更优雅些，建议切换菜单时，给他们加上一些动画的效果。这种方案也是常见的一种解决方案，不需要考虑UI之类的问题，而且也不会占用大量空间等