一、今天完成的事情

1.学习了自适应页面的制作，使得页面可以在电脑端和移动端正常显示。

自适应页面的制作，我主要采取了%和rem来进行制作。首先需要在html里写上一行代码

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

( viewport的意思是可视窗口，width=device-width的意思是页面宽度等于当前设备宽度，initial-scale=1指的是加载出来的页面显示的比例 )

设定元素高宽等属性或者定位的时候，我通常在定位父级元素的时候使用%，多少百分比通过psd页面测量此元素实际位置或者大小，与父级元素或者整体页面相除，看占了多少百分比则设置多少。

使用rem作为元素尺寸单位，则需首先定下rem的大小。rem相比于em，优点在于它是定值，易进行换算。rem是css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。一般如下设定，易于使用些

html { font-size:625%; }

body { font-size:16px;  font-size:0.16rem; }

这样则相当于1rem=100px

2.理解了float的原理与如何清除float

2.1添加浮动

float会使元素脱离元素标准流，使得元素浮动起来。假如有3个div，分别为div1,div2,div3，不设置浮动的时候，3个元素会贴着页面左边排成一列。这时给div2设置float:left，则div2脱离了标准流，但仍然留在原处，而div3则会浮动上来，占据div2的位置贴在div1底部，div2和div3重合，div2在div3上层。

给div2设置float:right，div2会浮动到页面右侧，且因为div1为块级元素独占一行，依然贴着其底部水平线，div3则会处于div1底部。

给div2,div3同时设置float:left，则div3会浮动起来位于div2右边，但不会继续浮动上去。

这几种情况可知float的基本原理，总结下来就是：

浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次

float的前后位置顺序是div的顺序，其顺序是HTML代码中div的顺序决定的。靠近页面边缘的一端是前，远离页面边缘的一端是后。

2.2清除浮动

语法：clear : none | left | right | both

取值：none  :  默认值。允许两边都可以有浮动对象

          left   :  不允许左边有浮动对象

          right  :  不允许右边有浮动对象

          both  :  不允许有浮动对象

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

清除浮动的方法：（1）在尾部添加样式clear:both;（2）添加空的div占据浮动的元素的位置

二、明天计划的事情

1.学习了解padding,margin如何使用更加合理规范，加深对盒子模型的理解。

2.学习了解position中各种属性的应用与差别，即absolute,fixed,relative,static,inherit

3.学习更加灵活制作自适应页面

三、遇到的问题

1.如何使用%和rem来制作自适应页面，它们跟px、em有什么区别，使用这些尺寸制作网页的时候，位置老是会有一些小偏差，不够精确，更多的是凭感觉来设置数值然后不断调试更改，比较费劲。后来通过查询百度，了解到它们之间的区别，为了便于使用，还需提前给它们进行换算，这样取的数值才会精确也便于计算。

2.浮动的原理还是了解的不够透彻，一张图向左浮动，想把一段文字放在图片正下方，一开始用position:absolute的方式来定位在图片下方，但是因为自适应的问题，如果改变页面窗口的话，文字就会发生偏移。后来通过询问师兄，采用添加一个空的div来清除浮动，然后给文字添加浮动，使得其位于图片的正下方。

四、收获

通过今天的学习，在做任务的过程中，遇到了很多问题，学到了很多解决问题的方法，比如清除浮动的方法，制作自适应页面时使用%和rem的方法