今日完成的事：

今天继续做的任务8.之前做的时候，对于header的写法，我使用的是给container设置了widtn：100%，也导致了和main的内容一直没法对齐，今天忽然想到可以给header设置width：100%，然后再用header包裹住container，尝试了下，果然是可行的：

然后之前第二个页面的时候，那个土豆网的照片和文字一直不能同行的问题，是我忘记给加display：flex了。

今天在做的时候，发现很多之前疑惑的问题，现在基本有一种恍然的感觉：

媒体查询

媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。

断点 768px  992px 1200px       container:两边padding：15px     row：两边负margin 15px     col列：两边padding：15px

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.container-fluid {                                //将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.row:before,
.row:after{display: table;content: " ";}    //清除浮动  包住里面的 col

@media (min-width: 768px) { .container { width: 750px; } } 
@media (min-width: 992px) { .container { width: 970px; } } 
@media (min-width: 1200px) { .container { width: 1170px; } }

@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  ...
  ...
  ...
}

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/
/*==========  Mobile First Method  ==========*/
/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
/*==========  Non-Mobile First Method  ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

明日目标：

争取做完任务8

遇到的问题：

继续加油

收获：

系统重装后，ps的确是很好用，截取图片省了很多时间