今天完成的事情：

一、查看行内元素和块级元素的知识点

1、行内元素：　　

•             与其他行内元素并排。
•             不能设置宽高，默认的宽度就是文字的宽度。

2、块级元素：

•             霸占一行，不能与其他任何元素并列。

•             能设置宽高，如果不设置宽度，那么宽度将默认变为父级的100%。

• 3、在HTML的角度来讲，标签分为：

• 　　　  文本级标签：p , span , a , b , i , u , em。

  　　　  容器级标签：div , h系列 , li , dt ,dd。

• 　         p：里面只能放文字和图片和表单元素，p里面不能放h和ul，也不能放p。

•      CSS的分类和上面的很像，就p不一样：

  　　　　行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级标签，是块级元素。

  　　　　块级元素：所有的容器级标签，都是块级元素，以及p标签。

• 4、可以通过display属性将块级元素(比如div)和行内元素进行相互转换。

•              display：inline;（变为行内元素）

•              display：block；（块级标签）

•              display：inline-block;（行内块元素，元素呈现为inline，具有block相应特性）

• 二、CSS一共有三种手段，让元素脱离标准流文档（浮动、绝对定位、固定定位）

• tips:1、关于浮动，一定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就要一起浮动。有浮动，一定要清除浮动。

•        2、在页面布局的时候，每个结构中的父元素的高度，一般不会设置。

• 清除浮动的方法：

  　　1、给父盒子设置高度。（只适合高度固定的布局）

  　　2、给浮动元素后面加一个空的div，设置clear：both;

  　　3、伪元素（推荐）

•          .clearfix:after{content:".";

•                          display:block;

•                          height:0;

•                          visibility:hidden;

•                          clear:both;                          

•                          }

•          .clearfix{

•                   zoom:1;

•                  }

•         4、overflow：hidden;zoom:1；(推荐)
  

• 资料整理来源：https://www.cnblogs.com/stfei/p/9084915.html

• 三、查看web前端开发中的各种居中资料

•         1、把margin设为auto（必须给标签配上指定的宽度）

                   把要居中的元素的margin-left和margin-right都设为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。

          2、使用 text-align:center

                   只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。在IE6、7中，它是能对任何元素进行水平居中的。

          3、使用line-height让单行的文字垂直居中

                   把文字的line-height设为文字父容器的高度，适用于只有一行文字的情况。

          4、使用表格

                   如果使用的是表格的话，只要用到 td(也可能会用到 th)元素的 align="center" 以及 valign="middle" 这两个属性就可以使里面内容的水平和              垂直居中,表格默认的就会对它里面的内容进行垂直居中。如果想在css中控制表格内容的居中，垂直居中可以使用 vertical-align:middle，至于水平            居中，貌似css中是没有相对应的属性的,但是在IE6、7中可以使用text-align:center来对表格里的元素进行水平居中，IE8+以及谷歌、火狐等浏                  览器的text-align:center只对行内元素起作用，对块状元素无效。在ie8+以及chrome、firefox等浏览器中的text-align:center对块状元素无效，                只能用表格自有的align属性。

•        5、使用display:table-cell来居中

                   对于那些不是表格的元素，可以通过display:table-cell 来把它模拟成一个表格单元格，这样就可以利用表格的居中特性。这种方法只能在                      IE8+、谷歌、火狐等浏览器上使用，IE6、IE7都无效。

•       6、使用绝对定位来进行居中（已经知道它们的宽度或高度的元素）

                   绝对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的，而是比居中的位置向右或向左偏             了这个元素宽度或高度的一半的距离，所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置，这个负的margin值就取元             素宽度或高度的一半。

•            如果只想实现一个方向的居中，则可以只使用left , margin-left 来实现水平居中，使用top , margin-top来实现垂直居中。

•      7、另一种使用绝对定位来居中的方法（必须要设置元素的高和宽）

•                  left，right , top , bottom设置为0，margin:auto; (这个方法只支持IE9+,谷歌，火狐等符合w3c标准的现代浏览器。)

•      8、使用flex布局居中

•                  水平居中display: flex; justify-content: center;

                   垂直居中display: flex;align-items: center;（需要设置高度来查看垂直居中效果）

  资料整理来源：https://www.cnblogs.com/gassnake999/p/6941415.html

• https://blog.csdn.net/weixin_41459434/article/details/82658984
  

• https://segmentfault.com/a/1190000013082888
  

• 明天计划的事情：做任务4

  遇到的问题： 知识点都明白，但是在写代码的时候使用后没有反应，后面尝试过不同位置后，发现是设置的位置不对。

  收获：优化了一下任务3代码。