今天完成了什么：

完成如何学习一栏和移动端布局适配。

遇到了什么问题：

“如何学习”花了很长时间去调试和匹配响应式布局的样式。最后定了

col-lg-3 col-md-6 col-12这三种布局，琢磨了我一天的时间

并在不同的分辨率下

@media screen and (max-width:768px)

@media screen and (max-width:992px)

这倆东西理解了好久才勉强会用，布局好了网页的，缩小分辨率又不一样的样式调试起来真的是头疼，最后用

用 visibility: hidden;代替display：none来使用，如果用display的话我一开始是弹性布局等分对齐的，用它的话会出现间隙过大，样式不美观，所以用visibility来代替，因为它哪怕消失了也还保留它的位置这样就美观一些。

收获了什么：

今天做适配的时候查了下各单位的在移动端的相关情况，css中仅仅通过px作为长度和宽度的单位，造成的结果就是无法通过一套样式来实现各端的自适应，总之就是兼容性不好。

max--width: 400px：如果屏幕宽度小于400像素则会怎么样；

@media="screen and (min-width: 400px) and (max-width: 600px)"如果屏幕宽度在400像素到600像素之间则怎么样

相比之下百分比计算也会困难，比如当浏览器的宽度或者高度发生变化时，通过百分比单位，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

1，子元素height和width的百分比

子元素的height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height

2，top和bottom 、left和right

但如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。 各个属性中如果使用百分比，相对父元素的属性并不是唯一的。

比如width和height相对于父元素的width和height，而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂。

 rem来实现响应式布局

了解了下

visibility有两个不同的作用

用于隐藏表格的行和列

用于在不触发布局的情况下隐藏元素

1.visible

 没什么好说的，就是在界面上显示。

2.hidden

 让元素在见面上不可视，但保留元素原来占有的位置。

3.collapse

 用于表格子元素(如tr,tbody,col,colgroup)时效果和display:none一样，用于其他元素上时则效果与visibility:hidden一样。不过由于各浏览器实现效果均有出入，因此一般不会使用这个值。

4.inherit

 继承父元素的visibility值。

明天计划:

继续完成任务