今天完成的任务：

  完成如下图所示内容的布局，首先使用boostarp进行布局，因为是要写pc端的网页，所以栅格布局中就用到了三种不同的规格，col-sm-3平板电脑（大于等于768px，小于992px）、md中型台式电脑（大于等于992px、小于1200px）、lg大型台式电脑（大于1200px）。

  之后，因为第二行的字体不能设置居中，所以要把logo图标和“高校”设置在同一个小盒子内，并设置taxt-align:center使其居中。栅格布局第四部分“12400”使用了一个<h4>利用其加粗变大并且独占一行以及引用文件内<h>标签自带的margin-top、bottom值。还有12400前面的图片没有加，可以给12400这个盒子内加个图片，然后单独用<span>给字体设置个float：right。

图片下部分的布局：

  两种布局方法：

    第一种：设置八个div盒子，设置宽度百分之二十四，margin-right、left：3% 然后设置浮动float：left使四个div盒子占一行。

   缺点：脱离了文档流，布局字体在图片的右边很难实现，需要单独给每一个字体所在的盒子设置margin、padding值。

   第二种：栅格布局，给圆形切图设置float：left脱离文档流并且使字体和切图在一个行内，也可以使用display：inline或者position：absolute。然后给字体单独设置一个div盒子，并且设置padding 以及margin-left、margin-top调整字体与盒子的上下内边距以及字体所在盒子和切图的距离。

遇到的问题：

 1，如下图所示：我是在栅格布局内同时设置了八个盒子每个盒子设置clo-sm-3，根据栅格布局的布局规则，本来在第五个盒子进行自动换行的时候，并没有进行换行，而是跑到了第三第四的盒子的下面。

解决方法：

    方法1，在字体所在盒子输入换行<br>以及&nbsp;&nbsp;进行占位使五、六两个盒子脱离，并另起一行进行布局。（感觉像是因为字体div的内容不足，所以五、六两个盒子才有机可乘）

    方法2，给字体所在的盒子设置padding上下内边距值，原理和解决方法1所说的占位一样。

收获：

  1，进一步的熟练了栅格布局的用法。

  2，通过布局了解到display：inline等元素，了解了display：inline和display：block的区别：一个是内联元素（前后没有换行符），一个是块级元素（前后自带换行符）   例如代码：

  <span style="display:block">79837583749</span><span>7982374224</span>

    按照正常来说上边的两个span应该是在同一行显示的，但是span本身就是内联元素，自身带有display：inline，加了display：block的span就会独占一行，也就相当于多了两个换行符。

  <div style="display:inline">2515125</div><div style="display:inline">6436345</div>

     这段代码因为是div盒子，会独占二行，但是加了display：inline之后，两个div会显示在一行。

明天的计划：

     进行任务八下半部分的编码编写。