Day 30

今天完成的事情

      1.完成task7-1

      2.大致完成task7-2

遇到的问题

      1.【unsolved】rem在超大屏上显示几乎缩小了一半

vh代替rem：页面可能延伸，导致各种设置变形

vw代替rem：页面比例极大，同样体验不适

不知道该怎么办了

      2.【solved】设置了body {height=100%;width=100%}.右边的图标还是出了屏幕外

怀疑是有什么撑开了body的宽度，但三个标签都设置了absolute脱离了文档流也还是没能解决问题，一脸懵

屏幕宽度是417，页面宽度是417.6......这不是为难我吗

网上说在使用fixed,absolute 布局时，如果设置了左右方向的marg,pad等，在使用width:100%，最终的实际宽度等于全屏宽度+pading值，

翻来翻去也没找到padding在哪里，

最后舍弃了position，改用float，好了

最后的最后，意外发现页面可以拖动，才知道原来页面外有这么一大块空间，但超出的部分并不是html,而是

audio被隐藏掉的控制条！我找你找的好苦

      3.【solved】既有audio图标，可控，又能隐藏浏览器自带的控制进度条

设置 audio{

opacity=0

}

1、opacity=0只是透明度为100%,元素隐藏，依然占据空间。 

2、opacity=0会被子元素继承,且子元素并不能通过opacity=1，进行反隐藏。

3、opacity=0的元素依然能触发已经绑定的事件。 

4、opacity,transition对她有效(毫无争议)

       4.【solved】同一个父元素下有两个p标签，

使用 父元素 p:nth-of-type(2) 

如果少了父元素 则会在根元素下进行寻找，且容易混乱

      5.【unsolved】设置了header的高度，但background-color无效

注意到header被后面的东西覆盖了

意识到可以使用z-index，解决

footer出现了同样的问题，设置了高度和z-index，仍然不能解决问题

      6.【solved】中间的P标签总是不能水平居中设置了text-align也不行

最后将p标签设置为block。并设置宽度为父元素%,利用%实现居中

收获

      1.字体居中

① 使用text-align水平居中

② 设置line-height 为容器高，实现垂直居中

      2.vh

rem：相对单位，基准点为根元素字体的大小

1vw就是视窗宽度的1%

1vh就是视窗高度的1%

vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。
vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。

      3.用css画三角形，不能算收获吧，因为之前有学习过，很明显自己没有长记性，总结一下

法一：利用border

上下左右

根据代码渲染，0px高宽,且边框厚度为100px。显示如下

然后去掉其余三边颜色

例：border-color: transparent transparent #ffffff transparent;

(   上     右      下     左  )

即得一个向上的箭头

其他

蓝色三角形（bottom）其实从它的顶点垂直下来一条线为准，将蓝色三角形分为左右两个小三角形，左边小三角形底边受left值影响，右边小三角形底边受right值影响。

border-width: 0px 0px 100px 100px;即得上图蓝三角

法二：使用伪类

planA空心对话框实现思路：

使用::after添加一个方块，上右border黑色，然后旋转45度放在图示位置挡住原本的border;

要点：关于top,left的数据问题，需要考虑边界，正常认为是top:30px;left:90px;但是实际却会偏移，这是因为border的原因，需要把自身的border也考虑在内。

实现代码及样式数据如下

planB实心对话框实现思路：

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

通过div的伪类:after，给他添加content，调整content的边距来达到三角形效果，border-left和border-right的宽度来改变箭头的宽度，border-top的边框宽度改变箭头的长短。

      4.:nth-of-type与e:nth-of-type(n)

:nth-of-type是以"type"来区分的。也就是说：e:nth-of-type(n)是指父元素下第n个e元素， 

而e:nth-child(n)是指父元素下第n个元素且这个元素为e，若不是，则选择失败。

      5.font-weight和letter-spacing

以前一直觉得自己的字体比psd图上的字体粗壮很多，使用了font-weight：lighter 也没有什么用，今天特意去查了一下，才了解到原来也可以用数字来规定，200正好差不多是我要的细度

normal 默认值，文字正常显示
bold 文字加粗显示

bolder    定义更粗的字符。

Lighter 定义更细的字符。
bold的值有:100 200 300 400(正常) 500 600 700(bold) 800 900

字间距----letter-spacing

      6.清除浮动

为防止浮动影响后续布局，特采用伪类的方式清除浮动

      7.尝试使用列表的方式完成九宫格

一个ul下三个li，使用百分比使其占满一行

共设三个ul

明天计划学习

      1.完成hover时出现的4个操作选择

      2.开始task7-3

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

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

        【solved】已解决