深度思考：

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

POSITION是CSS中非常重要的一个属性，通过position属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移。

position属性值:

position的属性值共有四个常用的：static（静止的）、relative（相对的）、absolute（完全的）、fixed（固定的）。

还有三个不常用的：inherit（继承）、initial（最初的）、sticky（粘性的）

static(静态）：HTML元素的默认值，不受top、bottom、left、right属性影响，元素出现在正常的文档流中

Relative(相对）:相对定位。

特点：不脱离文档流的布局，受top、bottom、left、right属性影响,只改变自身的位置，

在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。

Absolute(绝对)：绝对定位

特点:脱离文档流的布局，遗留下来的空间由后面的元素填充。

定位的起始位置为最近的父元素(position不为static)，否则为html文档本身。

 fixed(固定)：固定定位。

特点：类似于absolute，但不随着滚动条的移动而改变位置。元素的位置相对于浏览器窗口是固定位置。

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

一、取决于父元素

1、(max/min-) height

如果给子元素的height属性设置为 % ，则其基数取决于父元素的height属性。

2、(max/min-) width

如果给子元素的width属性设置为 % ，则其基数取决于父元素的width属性。

3、padding

如果给子元素的padding属性设置为 % ，无论上下左右方向，则其基数都取决于父元素的width属性。

4、margin

如果给子元素的margin属性设置为 % ，无论上下左右方向，则其基数都取决于父元素的width属性。

5、border

如果给子元素的border属性设置为 % ，无论上下左右方向，则其基数都取决于父元素的width属性。

6、text-indent

如果给子元素的text-indent属性设置为 % ，则其基数都取决于父元素的width属性。

7、font-size

如果给子元素的font-size属性设置为 % ，则其基数都取决于父元素的font-size属性。

二、取决于元素本身

1、border-radius

如果元素的border-radius属性设置为 % ，则其基数都取决于元素本身的宽高属性。

2、transform:translate()

如果元素的translate()/translateX()/translateY()属性设置为 % ，则其基数都取决于元素本身的宽/高属性。

3、background-size

如果元素的background-size属性设置为 % ，则其基数都取决于元素本身的宽/高属性。

4、line-height

如果元素的line-height属性设置为 % ，则其基数都取决于元素本身的font-size属性。

5、vertical-align

如果元素的vertical-align属性设置为 % ，则其基数都取决于元素本身的line-height属性。

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

常用表单元素

                form:定义供用户输入的表单。

                fieldset:定义域。即输入区加有文字的边框。

                legend：定义域的标题，即边框上的文字。

                label：定义一个控制的标签。如输入框前的文字，用以关联用户的选择。

                input:定义输入域，常用。可设置type属性，从而具有不同功能。

                textarea:定义文本域(一个多行的输入控件)，默认可通过鼠标拖动调整大小。

                button:定义一个按钮。

                select:定义一个选择列表，即下拉列表。

                option:定义下拉列表中的选项。

表单元素的具体属性

form

<form name="" action="" method="get">……</form>

name : 表单名称；action : 用来指定表单处理程序的位置（url）；

method : 定义表单结果从浏览器传送到服务器的方式，默认为"get"（也可以是post）

input

<input type="" name="" value="" size="">

name:控件名称；value:input控件默认文本值；size:input控件在页面中的显示宽度（必须是正整数）

input常用type属性如下：

text：单行文本输入框，可以通过正整数的size控制框长度。

password：密码输入框。

radio：单选按钮，同一组的单选按钮必须要有相同的name。

checkbox：复选框，同一组的复选按钮必须要有相同的name。

button：普通按钮。

submit：提交按钮，每出现一次，一个 Submit 对象就会被创建。

reset：重置按钮，会重置当前表单中全部的内容。

image：图像形式的提交按钮，写法是“”。

hidden：隐藏域，隐藏字段对于用户是不可见的。

file：文件域，用于文件上传。

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

什么是HTML语义化？

单纯的HTML代码是不带任何样式的只是用来标记这一段是标题、这一块是代码、那一个是要强调的内容等等，

但是为什么我们只写HTML在浏览器中不同的标签也是有不同的样式呢？那是因为各个浏览器都自带的有相应标签的默认样式，

为了方便在没有设定样式的情况下友好的展示页面。

良好的语义化代码可以直接从代码上就能看出来那一块到底是要表达什么内容。

为什么要使用HTML语义化标签？

1.标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、有助于爬虫抓取更多的有效信息.简单来说，

试想在H1标签中匹配到的关键词和在div中匹配到的关键词搜索引擎会吧那个结果放在前面。

2.有利于不同设备的解析（屏幕阅读器，盲人阅读器等）满是div的页面这些设备如何区分那些是主要内容优先阅读？

3.有利于构建清晰的机构，有利于团队的开发、维护。

4.提升用户体验，例如title、alt可用于解释名词或解释图片信息。

5.网页加载慢导致CSS文件还未加载时（没有CSS），页面仍然清晰、可读、好看。

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

css固定元素位置(fixed)

固定定位是元素固定于浏览器可视区的位置。（认死理型） 主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。

固定定位的特点

1、以浏览器的可视窗口为参照点移动元素。

跟父元素没有任何关系

不随滚动条滚动

2、固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。（认死理型）

完全脱标—— 完全不占位置；

只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；

简单来说fixed元素就是一个固定的盒子不会随着拖动滚动条而消失。

查询资料中发现一篇博客中针对手机可能存在的问题

手机问题图片：

• 问题描述：设置好上下fixed，中间普通margin与上下隔开.下拉列表超过一页，点击输入框，在软键盘唤起之后页面底部的fixed元素将失效.
• 问题原因：软键盘唤起之后,页面fixed元素将失效，当页面超过一屏并滚动时，失效的fixed元素也会随之滚动.

• 问题解决：

  • 思路：如果当前层级页面不滚动，那么即便fixed元素失效也无法随页面滚动.
  • 修改：中间使用absolute与上下隔开，并且y轴设置可滚动(如果出现滚动卡顿可以加入-webkit-overflow-scrolling:touch【非标准,用于SafariMobile】)

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

Http的Headers称为消息头，里面包含：General（基本信息），

Response Headers（响应头），Request Headers（请求头），Query String Parameters（请求参数）

1.Request URL：请求的url
2.Request Method：请求的方式  
3.Status Code：响应码
4.Remote Address：远程地址，包括ip和端口
5.Referrer Policy：

明天计划：完成接下来的任务。