今天完成的事情：

完成了任务二任务三

git部分用到很少 还不太熟悉  利用Webstorm建立本地仓库ADD然后push到github算是学会了

熟悉了基本的流程

任务4看到的知识点整理如下

<button> 标签定义一个按钮。

<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。

请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

例如

--------------------------------------------------------------------------------------------------------------------

<input> 标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

例如

虽然看样子<input>标签能实现按钮功能，但是重点在于这段话：

在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

<button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。

我想这应该就是两者的区别

盒子与定位

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

position 属性值的含义：

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

上面的资料过于术语话，要看好几遍对照着实例才大概能理解其中含义

用我自己能看懂的话记下笔记

这样子写一遍就能建立一个很清晰的印象

relative

相对定位   相对于块原本的位置作移动  它原本占据的位置仍然保留

写法例子

{

position:relative;

left:-20px;

}

块向左移动20px

absolute

绝对定位   直接在页面任意位置占据位置 元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

写法例子

{

position:absolute;

left:100px;

top:150px;

}

fixed

固定定位  和绝对定位不同的是定位在你页面窗口的固定位置 不受滚动条影响 很多网站的流氓悬挂广告就是这样

这样一想如果让浏览器不显示这个标签的内容那不就可以去除那些烦人的广告了？！

{

position:fixed;

left:5px;

top:5px;

}

注：脱离文本流的意思是脱离文本流的东西会显示在最上层覆盖住下面的东西！

如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。属性auto可以自动选择是否有滚动条！

clip:rect(0px 50px 200px 0px)可以设置元素的形状 矩形

Z-index可被用于将在一个元素放置于另一元素之后。

我的理解是可以使脱离文本流的元素像图层一样上下移动从而成为背景或者遮盖

写法为

Z-index：-1

CSS 实现元素垂直居中的一些方案解答

https://www.zhihu.com/question/20543196

https://www.cnblogs.com/hutuzhu/p/4450850.html

accept、alt、checked、disabled、maxlength、name、readonly、size、src、type、value这11个属性是input元素的传统元素属性

autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、min、multiple、novalidate、pattern、placeholder、required、step、width这19个属性是HTML5新增的元素属性

遇到的问题：

（编码实战）首先布局header，让header紧贴顶部（1小时）

（编码实战）为header内部布局，保证3块文字分别居于header的左中右，并垂直居中（1小时）

heder应该是指顶部的登录

紧贴顶部不太明白？写的块本来就是贴着顶部的啊！

目前的解决思路写一个大div里面套三个div

大块设置宽度100%自适应然后垂直居中内容 设置背景颜色字体大小

然后再调整单独块中的内容

不知道这个思路对不对？

input元素表单毫无头绪 30个属性看完一脸懵

（编码实战）布局表单内容，至少包含input和button

这一步做不下去啊！！！

可能是我看的还不够明白。。。

登录框和按钮应该就要靠这实现，只能明天去骚扰师兄了。。。

明天计划接着做任务4