今天完成的事情：完成了任务4的布局，看了很多资料，敲了不少代码

明天计划的事情：完成任务4，布局任务五，继续把css资料里面剩下的没看完的继续看，了解手机分辨率和电脑分辨率的区别，深入学习float

遇到的问题：暂时没有

学习到的知识:如下

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

•         1 参考：MDN
•         2) 计算原则：百分比*参照值
  •           Tip: 百分比值是一种相对值，任何时候要分析它的效果，都需要正确找到它的参照值
•         3) 可设置属性
  •      a. 盒模型系列:
    •   - content: width(参照包含块宽度)、height(参照包含块高度)
    •   - padding(参照包含块宽度)
    •   - border
      • - border-radius(参照包自身宽度&高度)
      • - border-image
        • - border-image-slice(参考图片尺寸)
        • - border-image-width(参考自身宽度&高度)
    •   - margin(参照包含块宽度)
  •       b. 定位系列：
    •   - left、right(参照包含块宽度)
    •   - top、bottom(参照包含块高度)
  •       c. 文本系列：
    •   - text-indent(参照包含块宽度)
    •   - word-spacing(参照受影响字体宽度)
    •   - text-size-adjust(参考相对应文字字号)
    •   - font-size(参照包含父元素字号)
  •       d. flex系列：
    •   - flex-basis(参考flex容器大小)
  •       e. background系列:
    •   - background-position(参考背景定位区域大小-背景图片大小，其中大小指的是水平偏移的宽度和垂直偏移的高度) 
    •   - background-size(相对于定位区域)

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

•     1) form 表单
  •     - 属性
    • action: 提交表单时执行的动作，可以在此指定某个服务器表单处理脚本(如果省略action，action被设置为当前页面)
    • method: HTTP方法(GET|POST)
    • accept-charset：使用的字符集
    • autocomplete: 自动完成表单(默认开启)
    • enctype：提交数据的编码
    • novalidate：规定不验证表单
    • target：规定action属性中地址的目标(默认_self，也就是指向当前)
•      2) input 输入，可通过改变type变换形态
  •     - 属性 其他属性参考了解HTML表单之input元素的30个元素属性
    •  - type: text(文本) | password(密码,变圆点) | checkbox(复选框) | radio(单选)
    •  - html5新增属性：color & date & datetime & datetime-local & email & month & number & range & search & tel & time & url & week
•     3) datalist(html5) <input>的预定义选项列表, input的list属性引用datalist的id即可关联
  •  - 子元素option 待选项
•     4) label 标签，可以通过for属性绑定对应input的id
•     5) select 下拉列表
  • - 子元素option 待选项
•     6) textarea 多行文本框, 用rows&cols控制大小
•     7) button 按钮，可通过改变type变换作用
  •  - 属性type: button(按钮) | sumbit(提交) | reset(重置)
•     8) fieldset 表单外框
  •  - 子元素legend 表单外框名称

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

•     - 含义：标签有特定的意义，即内容的结构化（内容语义化），选择合适的标签（代码语义化）. 例如header指页面顶部栏，nav指导航栏.
•     - 意义：
  •     - 代码结构优雅,便于阅读理解文档布局，便于开发合作维护
  •     - 爬虫解析方便
  •     - 用户体验 & 特殊设备解析(title、alt的信息注释)
•     - 最佳实践：
  •     - 少用无意义的div&span, 无特定意义时尽量用p取代div
  •     - 纯样式标签用CSS替代
  •     - 表格标题用caption，表头用thead&th,主体用tbody&td,尾部用tfoot包围.
  •     - 每个input标签的对应的说明文本都要使用label标签，通过设置label的for=(input's id)即可关联

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

•     这部分个人经验不足，在网上找部分案例和解决方法
  • 1)Web移动端Fixed布局的解决方案
    • - 问题图片：
    • - 问题描述：设置好上下fixed，中间普通margin与上下隔开.下拉列表超过一页，点击输入框，在软键盘唤起之后页面底部的fixed元素将失效.
    • - 问题原因：软键盘唤起之后,页面fixed元素将失效，当页面超过一屏并滚动时，失效的fixed元素也会随之滚动.
    • - 问题解决：
      • 思路：如果当前层级页面不滚动，那么即便fixed元素失效也无法随页面滚动.
      • 修改：中间使用absolute与上下隔开，并且y轴设置可滚动(如果出现滚动卡顿，可以加入-webkit-overflow-scrolling:touch【非标准,用于SafariMobile】)
  • 2. - 其他一些问题处理
    •     - 输入框focus后被软键盘遮挡，可以尝试input的scrollIntoView.
    •     - iOS可能有坑：软键盘遮挡输入框然后在输入一条文字后重写显示输入框
    •     - 最好将header和footer的touchmove事件禁止，防止出发浏览器全屏模式切换导致header和footer被工具栏遮蔽.
    •     - 滚动到页面上下边缘时继续拖拽会将view拖走导致页面"露底".可以做一些确认边缘的判断来阻止touchmove事件的发生.

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

•   
  • • - 简单通用flex，水平三分垂直居中
      • - 特点：简单好用适合布局，但是删除元素会导致布局破坏
    • - 左右float中间自动
      • - 特点：使用简单,但是布局上个人不太喜欢用float
    • - 左右absolute中间自动
      • - 特点：暴力, 稳

  1.order：定义项目的排列顺序，数值越小，排列越靠前，默认为0；正负值都可以使用，负值越大表示越小越靠前；

  
  

  2.flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有的flex项的flex-grow属性都为1，则平分剩余空间（如果有的话），如果某一个flex项的flex-grow属性为2，其它flex项都为1，则属性为2的比其它的占据的剩余空间多一倍。（即值相同，则平分；值比其它项的值高，则多占；负值无效；将某一个flex项的值调到最大，也只能占据flex容器中所有的剩余空间，无法占据其它flex项的固有空间；）

  
  

  3.flex-shrink：定义了flex项的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有flex项的flex-shrink的值都为1，则空间不足时，都等比例缩小；如果其中一个flex项的flex-shrink值为0，其它项都为1，则值为0的不缩小，其它项等比例缩小；负值无效；如果值为2，则缩小2倍，值为3，则缩小三倍。。。。。

  
  

  4.flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据这个属性，计算主轴是否有剩余空间。默认值是auto，即flex项的本来大小。它可以设为跟width和height相同的值（比如300px），则项目将占据固定空间；flex-basis属性比width属性的优先级高，对某一个flex项同时设置具有不同值的flex-basis和width，浏览器会选择flex-basis；

  
  

  5.flex：属于flex-grow、flex-shrink和flex-basis属性的简写，默认值为0 1 auto；

  
  

  6.align-self：允许单个项目有与其它项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同与stretch；值：auto | flex-start | flex-end | center | baseline | stretch；除了auto以外，其它都与align-items属性完全一致；