今天完成的事：

task12完成 做了自己的页面 修改之前的task10 

明天要做的事：

修改之前的代码 

遇到的问题：

1.task10下面的合作企业设置框架的时候总是有边距，怎么找都找不到，和基柯师兄探讨之后是inline-block自带的4px的向右外边距，解决办法有两个 1设置margin-left:-4px;第二是设置font-size:0;

2.和正春师兄探讨了bootstrap框架的使用，container是定宽1170px的 而container-fluid是百分比设宽，在任务10之中要全屏宽度设置背景颜色的话可以在container外面包裹一个div(看陈建强师兄和刘思远师兄都是在container之外再去包裹一个container-fluid。。。。。。。。。。。。)

收货：

响应式布局的知识点

1.在头部引入

<meta name="viewport" content="width=device-width, initial-scale=1" />

（网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。）‍‍

2.设置媒体查询@media

/* 屏幕可见视口宽度≤ 1200px */

@media only screen and (min-width: 1200px) {

}

/* 992px≤屏幕可见视口宽度<1200px */

@media only screen and (min-width:  992px) and (max-width: 1199px) {

}

/* 768px≤屏幕可见视口宽度<992px */

@media only screen and (min-width:  768px) and (max-width: 991px) {

}

/* 768px<屏幕可见视口宽度*/

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

}

3.图片自适应

 ‍‍给图片添加一个包裹它的盒子(盒子尺寸大于图片) 然后设置max-with:100%-------img { max-width: 100%;}

‍‍4.字体

 使用相对单位 rem 减少使用固定单位px‍

5.使用流动布局

 float（我在任务中使用感觉并不好）

   float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

 另外，绝对定位（position: absolute）的使用，也要非常小心。‍‍‍‍‍‍

6.bootstrap响应工具

 .visible-xs-*  .hidden-xs

‍‍7.使用百分比宽度而不是绝对宽度（定宽）‍‍

8.使用 Word-break：break all 来使长文本换行

这几天下来为响应式搞得焦头烂额，总结的不全，欢迎补充

感觉自己之前的任务用了好多position定位（缩放起来。。。）是不是要全部重写一遍啊，感觉css的氛围没有js和产品他们的氛围好（天天开会，总结，讨论什么的，我记得以前css也有），估计是人太少了

再次感谢陈建强师兄和柯毛组合的耐心讲解。

我的主页：http://119.10.57.69/ptt008/lusirhome/home.html

我的任务12：http://119.10.57.69/ptt008/task12/task12-2.html