这几天进度慢了，做了修真院的任务4和任务5。

任务4

有2个问题，一个是框中的竖线尺寸，如果用flex布局竖线会撑满，想到的是就用图标插入。

还有一个问题 input 不用js能不能直接删除整行?

1.自适应：页面宽度始终占满屏幕

两种方法，可以用flex定位，还有absolute 配合fixed

2.移动端：header始终固定顶部

flex 就可以固定顶部，或者fixed

3.还原设计图：输入帐号小图标与输入框要水平对齐

字体的小图标的加法，一种是用span加入背景图，然后用padding-left空出位置

input栏的小图标添加方法也差不多，还有一种是前面直接加一个class，然后定位

4.扩展性：去掉header的三块文字的任意一两个，剩下的一两个都还在原位置上不会受到影响。

用relative，absolute配合没问题，flex 还不会，只想到加3个子元素。

1.position定位有哪几种？各有什么特点

4种定位

绝对定位，相对定位 ，固定定位， 固定定位

2.哪些css属性可以设置百分比，其计算原则是什么？

可以使用百分比的样式属性: 

定位：top,right,bottom,left; 

盒模型：height,width,margin,padding, 

背景：background-position,background-size(css3), 

文本：text-indent， 

字体：font-size;

各个属性使用详细： 

top,right,bottom,left:全兼容, 

height：基于包含它的块级对象的百分比高度。 

width：基于包含它的块级对象的百分比宽度。 

margin：百分数是相对于父元素的 width 计算的。 

padding：百分数是相对于父元素的 width 计算的。

background-position:图像中描述为 50% 50% 的点（中心点） 

如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。 

如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。 

因此，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明： 

body 

{ 

background-image:url(‘/i/eg_bg_03.gif’); 

background-repeat:no-repeat; 

background-position:66% 33%; 

} 

如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。 

background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。

background-size 兼容IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。

text-indent 定义基于父元素宽度的百分比的缩进。当外层不指定宽度时，ie下会基于浏览器宽度。 

font-size在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值。

3.常见的表单元素有哪些？各有什么属性？

<input type="test">             普通文本框

<input type="password">         密码输入框

<input type="checkbox">         复选框

<input type="radio">            单选框，属性name设置相同

<input type="image">            将图片设置为提交按钮

<select>

    <option></option>

</select>                       下拉列表框

<textarea cols="N" rows="N"></testarea> 多行文本域

<input type="submit">           提交按钮

<input type="button">           普通按钮

<input type="reset">            重置按钮

<input type="hidden">           隐藏域

<input type="file">             文件选择框

4.如何理解HTML结构的语义化？

HTML结构语义化[https://www.jianshu.com/p/6bc1fc059b51]

5.使用fixed的时候，在手机上查看是否会有问题，怎么解决？

6.常见的移动端登录页header有哪些实现方式？

absolute定位

flex定位