发表于： 2018-04-24 12:35:35
2 520
今天完成的事情：学习flex布局，重做任务4.
1.flex布局。
参考教程：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
flex的观点是容器有两个轴，主轴和垂直于主轴的轴。主轴的方向也是可以设置的。
通过flex，可以方便的做到垂直居中。
2.重做任务4.
之前任务4的问题是输入框没取消，垂直居中问题，输入电话号码没限制字数。都一一解决了。
任务要求header部分要fixed在手机顶部。手机在浏览页面，手指会滑动页面，在下拉页面的时候，要保证header部分不被拉动，就需要用fixed方式定位。但是fixed定位后，header就脱离了正常流，main的部分就会上移，部分内容就会被遮挡，这个时候就需要再加一个同级占位的div，确保页面在静态时显示正常。
这里还需要设置z index，确保悬浮元素不被遮挡。
任务思考：
1.position定位有哪几种？各有什么特点
绝对定位：不占坑，相对于已经定位了的父辈元素来定位。
相对定位：占原来的坑，相对于原来的位置来移动。
悬浮定位：相对于页面视窗定位，脱离正常流。
2.哪些css属性可以设置百分比，其计算原则是什么？
内外边距，内容高宽，字体大小，图片大小，行距等等。
具体看属性是什么。有的是相对于父元素的宽，比如内容高宽，内外边距。有的是相对于文本的字体像素，比如行距。
3.常见的表单元素有哪些？各有什么属性？
input元素。属性有三十多种。常见的有radio，submit，text，password，checkbox等。
4.如何理解HTML结构的语义化？
头，中，尾分开逻辑更清晰。
5.使用fixed的时候，在手机上查看是否会有问题，怎么解决？
可能产生虚拟键盘出来的时候，导致fixed元素错位。具体信息可以参考下面这个链接
6.常见的移动端登录页header有哪些实现方式？
这个问题可以参考下面这个链接
http://www.jb51.net/html5/305075.html
一般是需要把header部分fixed住，那么可能会出现遮挡等等问题。可以用css方法解决，也可以用JS方法解决。我在任务中采取的是用多加一个同级占位div方法解决的。
明天计划的事情：继续学习flex
遇到的问题：header固定在顶部后，页面部分被遮挡问题。后通过baidu解决。
收获：学会了flex布局，fixed定位等。
返回列表
评论