今天完成的事情

1. 1. 任务四-深度思考
2. 2. task4跟随深度思考 & 师兄建议进行修改

•     -  输入栏左侧换用label
•     -  输入限制 电话11位，密码16位
•     -  根据HTML结构的语义化修改index.html
•     -  尝试main下再加一个div.content用来包裹滚动的内容

明天计划的事情

•  任务五计划及完成一部分
•  float学习(周六学习)
  •  张鑫旭《CSS世界》相关章节
  •  张鑫旭 float系列
•  深度思考：手机分辨率和网页px的区别(TODO:周末补学)
  • link1
  • link2
  • link3

遇到的问题

• 暂无

收获

完成深入思考问题

1. 1. position定位有哪几种？各有什么特点 参考：CSS 相对|绝对(relative/absolute)定位系列

•     1) static：默认定位
  •     不可层叠,不脱离文档流
•     2) relative：相对当前位置定位
  •     不可层叠,不脱离文档流
  •     相对其正常位置进行定位,通过left、right、top、bottom位移
•     3) absolute：绝对定位
  •     - 包裹性：让元素由原来宽度变成自适应内部元素的宽度
  •     - 破坏性：脱离文档流，令原本占据的空间坍塌(布局破坏)
  •     - 定位：相对最近的非static父级定位,如果没有则继续向上查找直到body,通过left、right、top、bottom位移,可通过z-index进行层次分级
  •     - 会生成一个块级框
•     4) fixed：固定定位
•            - 包裹性：让元素由原来宽度变成自适应内部元素的宽度
•            - 破坏性：脱离文档流，令原本占据的空间坍塌(布局破坏)
  •     - 相对于浏览器viewport定位,通过left、right、top、bottom位移,可通过z-index进行层次分级
  •     - 会生成一个块级框
•      5) inherit：从父类继承position属性的值

2. 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. 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. 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. 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. 6. 常见的移动端登录页header有哪些实现方式？

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