Day 31

今天完成的事情（这是一篇酝酿了五天的日报，我以后再也不攒日报了）

      1.基本完成任务七的第二个页面 

        2.了解了一些乱七八糟的知识，都写在收获里

遇到的问题

      1.【unsolved】hover后的选项小图间距很大

百分百宽度下的小图标

尝试增加宽度和调整位置发现不行

解决的办法是把这四个小图标单独做了一张雪碧图,然后使用百分比来定位并自适应图片

使用百分比来设置属性值，是以自身容器的长宽 减去 图片的长宽 乘以 百分比 所得的数值来确定图片的起始位置。

（容器自身的宽度/高度 - 图片自身的宽度/高度） x 百分比 

要是想使用响应式的雪碧图，必须保证所有的小图标大小一致，竖向或者横向排列，然后使用background-size:100%,再使用background-position来进行具体的定位。

      2.【solved】重做一次任务才发现了一个自己以前稀里糊涂一次成功所以没有注意到的问题

在页面最右边的button中嵌套了audio，播放器默认的样式有一个播放进度条，导致页面宽度被撑开了，布局被破坏。

上次设置了height、width为0，解决宽度被撑开的问题之后没有管能否播放，这次依法炮制才发现暂停键也整没了，而设置较小宽度并不能保证暂停键出现在图标内

如果去掉controls值，可以隐藏播放进度条，但是整个播放器也无法播放了。
把control更换成autoplay虽然解决了进度条的问题，但是又无法控制背景音乐的暂停功能。

想了很久，由于设置宽高只能留下停止键，即重播，同时电脑端最大化时右上方还会出现静音/下载选项。不会js只能这样做了吧

       3.【solved】上一篇日报里的vw，vh，vmax，vmin，在日报完成前的最后一个小时完成

收获

      1.hover时出现四个选项

A和B元素在同一个父元素内

B元素默认隐藏display:none，A元素默认显示，

当鼠标移动到A元素时可以当成是移动到父元素上，父级获得一个鼠标hover的状态，来定义鼠标移动到父级身上时，B元素的显示方式。

由于我的布局B元素已经用了display:flex，不能再设为display:none，所以尝试用visibility:hidden;  鼠标hover状态时visibility:visible，也能达到效果.。但是有区别的：

visibility属性指定一个元素是否是可见的，即使不可见的元素也占据空间。

diplay:none  元素不可见，也不占用空间。

      2.雪碧图中的zoom属性和transform属性

都可以用来调整大小

zoom与transfrom：scale还存在一些区别，可以稍微了解一下：

zoom的缩放是相对于左上角的；而scale默认是居中缩放；
zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化；
zoom和scale对元素的渲染计算方法可能有差异（需要自己动手，用高清图，仔细去看其中的区别）。

      3.bootstrap

container是它的容器

container：固定960px宽度； （如果又引入了响应式样式，则会适当调整；例如1600×900，它会使用1200px ； 

container-fluid：自适应屏幕宽度，即满屏显示；

container类所谓的自适应也是通过margin的改变来完成，container-fluid类的百分百宽度是指在固有的15px的padding前提下宽度总是当前视口的宽度。

row是其中的一行，共分为12列

可设置为col-*-$   *代表屏幕宽度类型  $代表元素所占列数

当屏幕尺寸

小于 768px 的时候，用 col-xs-12 类对应的样式；

在 768px 到 992px 之间的时候，用 col-sm-9 类对应的样式；

在 992px 到 1200px 之间的时候，用 col-md-6 类对应的样式；

大于 1200px 的时候，用 col-lg-3 类对应的样式；

bootstrap目前而言主要用的就是container容器，row行,col列进行栅格布局，然后就是nav导航，btn按钮相关的预设样式等等，之后还有组件的使用，轮播图和自适应导航

       4.无依赖的绝对定位

无依赖的绝对定位

1.不受relative限制的absolute定位,行为表现是不使用top/right/bottom/left任何一个属性,或者是不使用auto作为值

2.不依赖父元素

3.用了absolute之后float就没有作用了；

4.用了absolute之后，用display，会保留位置跟随特性，在普通元素的时候待在什么位置，绝对定位之后还呆在什么位置

5.配合margin，精确定位，适应各种浏览器

         相对定位

PS：负数表示相反的方向，所以left: 50px等价于right: -50px

       5.关于margin

margin的负值

① 当static元素的margin-top/margin-left被赋予负值时，元素将被拉进指定的方向。

② 如果设置margin-bottom/right为负数，元素并不会向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。

    如果没有设定width属性，设定负margin-left/right会将元素拖向对应的方向，并增加宽度，此时的margin的作用就像padding一样。

margin-bottom为负值的时候不会位移,而是会减少自身供css读取的高度.

拓展： 

①圣杯布局和双飞翼布局

圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上。

圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话）。

而双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。

②垂直外边距合并问题

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。

③何时用margin，何时用padding

何时应当使用margin：
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。

何时应当时用padding：
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。

       6.absolute居中

方式一：传统方式，父容器relateive，子元素absolute，然后left:50%,再margin-left:-width/2

方式二：独立使用 absolute 一

思想:将内部元素转化成行内元素，再在要居中的元素前加个空格，

 

相当一个行内元素，然后将父元素text-align:center;把行内元素居中显示，再将要居中的元素absolute,由于独立使用absolute的跟性特性，它会脱离文档流，并紧跟在空格的后面  最后通过调整margin-left的值进行居中

方式三：独立使用 absolute 二

 left:0;right:0;    top:0;bottom:0;    margin:auto;

       7.vw vh vmain vmax  

响应式布局

做法一：仅使用vw作为CSS单位

无论是文本还是布局高宽、间距等都使用 vw 作为 CSS 单位，对于需要保持高宽比的图，使用 padding-top 实现

做法二：搭配vw和rem，布局更优化

以iPhone6/7/8的手机为例，屏幕宽度为750px。1vw=7.5px，100px=13.3333vw

我们把html中的font-size设置为13.3333vw，这代表着font-size=100px，然后结合rem的特性就实现了前端css响应式布局

这样我们写1rem即为设计稿上的100px 

（设计稿/2）*0.01即得

1. 给根元素大小设置随着视口变化而变化的 vw 单位，这样就可以实现动态改变其大小。
2. 限制根元素字体大小的最大最小值，配合 body 加上最大宽度和最小宽度

然而这种方法对超大屏很不友好，又由于页面内无法设置fontsize来改变rem的大小，所以还是采用原有html{fontsize=62.5%}，中间部分直接使用vw单位

明天计划学习

完善任务七的第二个页面

注： 【unsolved】截日报发出前未解决的问题

        【solved】已解决现象但并未从根本上解决问题

        【solved】已解决