今日完成的事情，任务八九的学习

今日收获：bootstrap4中col之间间距的实现

<div "col-xl-3 col-lg-6 col-md-6 col-sm-12 " >
       <div "best-student-content " >
           <div "best-student-box"></div>
           <p style="font-size: 1.8rem;color: black;line-height: 2rem">技术顾问：罗大佑</p>
           <p style="margin-top: 3rem;line-height: 2rem;font-size: 1.6rem;color: #999999;">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
       </div>
   </div>
</div>

即是在col中自建一个盒子，col的padding作为盒子之间的间距。

并且因为负边距效果是对齐的

2.对网站进行响应式的调整。

<div "col-xl-3 col-lg-6 col-md-6 col-sm-12 " >

发现只有xl格式适合官网布局，其他都需调整。

3.媒体查询知识的学习

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

CSS 语法

@media mediatype and|not|only (media feature) {

    CSS-Code;

}

也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

举个例子。

@media only screen and (max-width: 500px) {

    .gridmenu {

        width:100%;

    }

    .gridmain {

        width:100%;

    }

    .gridright {

        width:100%;

    }

}

在bootstrap里已经帮我们做到了媒体查询的步骤，但我认为也应该熟悉媒体查询，知其所以然。