Day13

今天完成的事情

      1.学习了position

      2.运用position重做任务三

      3.将css以外联形式分离出来

      4.复习viewpoint

遇到的问题

      1.content部分不能跟设计图保持一致

设置了font-size(字体大小）

同时设置line-height（行距）

font-size: 1.35rem;
line-height: 2.7rem;

      2.在使用position ：relative；时，各div间出现空隙，导致高度很难调整

      原因：在使用relative后，实际上该元素依然占据文档中原有的位置，只是视觉上相对原来的位置有移动。

     解决办法：使用fixed，并设置使其内容居中

left: 0;
right: 0;
margin-left:auto;
margin-right:auto;

      3.body总是不能包裹下部的两块

       将高度也设置为100%，看起来包裹住了，但不知道是不是正确的解决办法

收获

      1.Position

display主要是用来改变元素的自身属性

position除了改变自身之外，还可以改变与周围环境的位置关系

      position有四个属性值：

· relative ：相对它本身的位置来进行偏移

      如果不设置relative属性，元素的位置按照正常的文档流，它应该处于某个位置。但当设置一个元素的position为relative后，将根据top，right，bottom，left的值按照它理应所在的位置进行偏移（left：20px ;即在元素的左边增加20个像素点，即向右移动。可设置负数。）

      实际上该元素依然占据文档中原有的位置，只是视觉上相对原来的位置有移动。

      它同级元素的位置不会因为它增加了position的属性而发生改变。

      注：relative是基于对象的margin左上端进行偏移的（定位点应该说是内容区域左上角开始，即padding内边界开始）。

· absolute ：相对于最近的非static的祖先元素来进行定位

       相对定位的元素并没有脱离文档流，而绝对定位的元素是脱离文档流的

       如果parent设定了margin，border，padding等属性，那么这个定位点将忽略padding，从padding开始的地方（即padding的左上角）开始，而不是margin的左上端

       如果元素不存在一个有着position属性的父元素，那么那就会以body为定位对象，按照浏览器的窗口进行定位

· fixed  ：fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位

· static ：position的默认值，一般不设置position属性时，会按照正常的文档流来进行排列

      2.viewpoint

viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。width=device-width表示当前的viewpoint等于设备的宽度，width用来设置layout viewport的宽度，height用来设置layout viewport的高度。initial-scale=1.0表示页面的初始缩放值为1，maximum-scale允许用户的最大缩放值，minimum-scale允许用户的最小缩放值，user-scalable表示是否允许用户缩放，“no”不允许，“yes”允许。

关于缩放

缩放指的是相对于ideal viewport来进行的，比如<meta name="viewport" content="width=500, initial-scale=1">，width=500表示把当前的viewport宽度设为500，initial-scale=1则表示把当前viewport的宽度设为ideal viewport的宽度，浏览器该怎么办呢，一般会取较大的那个值。

明天计划学习

      提交任务三，着手学习任务四相关知识