今天的事情：任务4

明天的事情：任务5

遇到的问题：

如图：使用vh作为高度，输入框获取焦点时，造成了弹出虚拟输入框的话，页面变形，此时 100vh是屏幕高度 - 虚拟键盘的高度

解决办法： 高度单位使用vh处，全部替换为rem。

任务总结

1 掌握了利用position float display 进行布局的方法

块级元素和行内元素

p, ul, form, div等元素被称为块级元素，这些元素显示为一块儿内容（会自动换行），span, input 等元素称为行内元素，这两者主要区别就是块级元素会从上到下一个个垂直排列，每个自占一行，而行内元素在一行中水平排列，行内元素的高度由其内容撑开，不可显示的设置其高度，

display常用的属性

在显示隐藏元素的时候经常会用到把display设为none，就是让元素脱离文档流，不显示，不占文档空间，，inline-block属性是CSS2.1新加值，可以使元素像行内元素那样水平一次排列，但是框的内容符合块级元素行为，能够显示设置宽，高，内外边距。。

可以通过不同的赋值改变元素生成框的类型，也就是说，通过将display属性设置为block，可以使行内元素表现的想块级元素一样，反之亦然。

position属性有几个常用值如下

CSS有三种基本的定位机制：普通流，浮动和绝对定位

普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式。

相对定位比较简单，对应position属性的relative值，如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现会改变。

相对定位可以看作特殊的普通流定位，元素位置是相对于他在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样。

绝对定位的元素的位置是相对于距离他最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块儿（body或html神马的）元素。

因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index属性控制叠放顺序，z-index越高，元素位置越靠上。

fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

 2 header紧贴顶部方法：

body {
    margin: 0;
}

3 居中方法：

.login {
    position: absolute;
   left: calc(calc(50vw) - calc(1ex)); /* 使得“登录”平分在屏幕中线  */
}

4 掌握了利用 magin padding 控制元素布局

5 掌握了 input 部分属性 及样式控制

6 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 值。

7、 常用表单元素 及属性

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

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

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

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

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

<isindex>:已废弃，用input标签代替。

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

<button>:定义一个按钮。

<optgroup>:定义选项组。选项组内需要放选项<option>。下拉列表<select>通常对应一个选项组，故此标签不常用。见详解。

<select>:定义一个选择列表，即下拉列表。见详解。

<option>:定义下拉列表中的选项。见详解。

html5新增：

<datalist>定义填写一个input时，提示几个datalist内的多个option用于选择。可通过input的list特性与此元素作关联。见详解。

<output>表示计算的结果。可通过for特性与其它能够影响运算的元素（如input）作关联。见详解。

常用表单元素详解

1、<input>：

常用type属性：button、checkbox、file、hidden、image、password、checkbox、radio、reset、submit、text。

html5新增type属性：

1）、search：input会呈现为搜索框（与text类型的唯一区别在于当鼠标覆盖时尾部出现叉号可快速清除输入的内容）。

2:）、tel：编辑电话号码的控件，提交时换行符会自动从输入框中去掉（普通的text并不会，故text类型验证输入值时一般需要trim()函数处理）。

3）、url：编辑url的控件，提交时换行符与首位的空格都将自动去除。

4）、email：可输入一个邮件地址。

此外，还有color、date、time、datetime、datetime-local、month、week、number、range类型。见MDN 网站。

html5中input新增的个人觉得比较有用的特性：

1）、list：关联该input对应的<datalist>的id（即datalist在form外建立，通过list属性关联即可）。

2）、pattern：一个正则表达式，用于检查控件的值，可作用于text、search、tel、url、email类型的input。

3）、form：一个字符串(为关联的form表单的id)，用于表明该input属于哪个form表单（作用类似list）。

4）、formmethod：表明使用GET还是POST，能覆盖form表单的method。仅在type为image或submit，且上面的form特性被设置的情况下才能使用。相似的有formtarget特性。

5）、readonly：一个boolean值，表明该input值是否能被用户修改，可用于信息展示等页面。作用于type为hidden、range、color、checkbox、radio、file、button的input将被忽略。

6）、maxlength：type为text、emal、search、password、tel或url（都为文本）时允许输入的最大字符个数。

7）、autocomplete：浏览器是否根据之前提交的输入情况提示之前输入的相似数据（即以option形式匹配之前的输入值），取值on或off，默认on。如在登陆页面不想显示上一个登录的用户名等时，可设置为off。

8、如何理解语义化：

语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

其实简单说来就是让机器可以读懂内容。

对于当前的 Web 而言，HTML 是联系大多数 Web 资源的纽带，也是内容的载体。在 Web 被刚刚设计出来的时候，Tim Berners-Lee 可能不会想到它现在会达到的规模以及深入到我们生活的那么多方面。也许起初的想法很简单：用来发布 Web 内容和资源的索引，方便人们查看。

但是随着 Web 规模的不断扩大，信息量之大已经不在人肉处理的范围之内了。这个时候人们开始用机器来处理 Web 上发布的各种内容，搜索引擎就诞生了。再后来，人们又设计了各种智能程序来对索引好的内容作各种处理和挖掘。所以让机器能够更好地读懂 Web 上发布的各种内容就变得越来越重要。

其实 HTML 在刚开始设计出来的时候就是带有一定的「语义」的，包括段落、表格、图片、标题等等，但这些更多地只是方便浏览器等 UA 对它们作合适的处理。但逐渐地，机器也要借助 HTML 提供的语义以及自然语言处理的手段来「读懂」它们从网上获取的 HTML 文档，但它们无法读懂例如「红色的文字」或者是深度嵌套的表格布局中内容的含义，因为太多已有的内容都是专门为了可视化的浏览器设计的。面对这种情况，出现了两种观点：

1. 我们可以让机器的理解能力越来越接近人类，人能看懂、听懂的东西，机器也能理解；
2. 我们应该在发布内容的时候，就用机器可读的、被广泛认可的语义信息来描述内容，来降低机器处理 Web 内容的难度（HTML 本身就已经是朝这个方向迈出的一小步了）。
   

画的这个图，意思是说，内容的语义表达能力和 AI 的智能程度决定了机器分析处理 Web 内容能力的高低。上面观点 1 的方向是朝着人类水平的人工智能努力，而观点 2 的方向正是万维网创始人 Tim Berners-Lee 爵士提出的美好愿景：语义网。语义网我就不多说了，简单来说就是让一切内容和包括对关系的描述都成为 Web 上的资源，都可以由唯一的 URI 定义，语义明确、机器可读。显然，两条路都的终极目标都很遥远，第一条路技术上难以实现，而第二条路实施起来障碍太多。

我们当前能够看得见摸得着的 Web 语义化，其实就是在往第二条路的方向上，迈出的一小步，即对已经有的被广泛认可的 HTML 标准做改进。我们刚开始意识到，我们必须回归内容本身，将内容本身的语义合理地表述出来，再为不同的用户代理设计不同的样式描述，也就是我们说的内容与样式分离。这样我们在提供内容的时候，首先要做的就是将内容本身进行合理的描述，暂时不用考虑它的最终呈现会是什么样子。

HTML 规范其实一直在往语义化的方向上努力，许多元素、属性在设计的时候，就已经考虑了如何让各种用户代理甚至网络爬虫更好地理解 HTML 文档。HTML5 更是在之前规范的基础上，将所有表现层（presentational）的语义描述都进行了修改或者删除，增加了不少可以表达更丰富语义的元素。为什么这样的语义元素是有意义的？因为它们被广泛认可。所谓语义本身就是对符号的一种共识，被认可的程度越高、范围越广，人们就越可以依赖它实现各种各样的功能。

HTML5 并非 Web 语义唯一倚仗的规范，除了 W3C 和 WHATWG 外，还有其它的组织在为扩展、标准化 Web 语义做着贡献。只要有浏览器厂商、搜索引擎原意支持，它们的规范一样可以成为通用的基础设施。例如 microformats 社区以及 http://Schema.org 上都有对 HTML 以及 Microdata（http://www.w3.org/TR/html5/microdata.html） 规范的扩展词汇表，Google、Bing、Yahoo! 等搜索引擎以及各个主流浏览器都不同程度地接纳了其中定义的语义扩展，并应用在了生产中。

  移动端 ios下fixed失效：

　　软键盘唤起后，页面的 fixed 元素将失效（ios认为用户更希望的是元素随着滚动而移动，也就是变成了 absolute 定位），既然变成了absolute，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。

解决办法 https://juejin.im/post/59e725865188257e0c3246bf

常见的移动端登录页header实现方式：

fixed布局

bfc布局

flex布局