发表于： 2019-07-18 23:32:01
1 961
今天完成的事：
<audio controls autoplay class="play">
<source src="../picture/yinyue.mp3" type="audio/mp3" />
</audio>
插入音乐播放器
audio {
// 隐藏播放器
opacity: 0;
position: absolute;
top: -5px;
right: -15.5em;
}
隐藏播放器并调整其位置到按钮位置
对主体布局成四行，每行三个盒子，大小用vw做单位宽度变化时跟着放大缩小，插入小图片用
visibility:hidden;
因图片父盒子用了display：flex；会冲突不然可以用display：none；隐藏元素还可以不占据空间
@mixin icon ($left:12.7%,$top:12.7%){
width: 5vw;
height: 5vw;
background: {
image:url(../picture/vote.png) ;
position:$left $top ;
size: 300% 300%;
}
}
图片用混合器引入精简代码
明天计划的事：
完成任务13，深度思考精简代码
遇到的问题：
暂无
收获：
CSS权重
权重规则总结:
- !important 优先级最高，但也会被权重高的important所覆盖
- 行内样式总会覆盖外部样式表的任何样式(除了!important)
- 单独使用一个选择器的时候，不能跨等级使css规则生效
- 如果两个权重不同的选择器作用在同一元素上，权重值高的css规则生效
- 如果两个相同权重的选择器作用在同一元素上：以后面出现的选择器为最后规则.
- 权重相同时，与元素距离近的选择器生效
css权重优先级用来干嘛？
在同一个元素使用不同的方式，声明了相同的一条或多条css规则，浏览器会通过权重来判断哪一种方式的声明，与这个元素最为相关，从而在该元素上应用这个声明方式声明的所有css规则。
等级关系:
!important>行内样式>ID选择器 > 类选择器 | 属性选择器 | 伪类选择器 > 元素选择器
返回列表
评论