[散修弟子]JS-1400|2018年05月13日的日报-技能树.IT修真院

发表于： 2018-05-13 11:36:04

1 573

本日：总结之前的知识点，回顾

1.bootstrap：各种各样已经设置好格式的class，通过设置一至两个class即可形成预设好的样式，然后用自己的样式表进行修改。以及非常好用的栅格系统，将屏幕分为12格，实现自适应，col-xs常用于手机，在所有宽度都会相应，col-sm在宽度大于768px时相应，md为992，lg为1200。

使用时遇到的问题：对于预设好的class内容不清楚，直接按教程使用，在修改的时候花费的时间很多，有时候会出现自定义的样式优先度没有bootstrap高的情况，还不会解决。

小符号：小箭头（向下）class=caret；

border-top: 4px solid 颜色;
border-right: 4px solid transparent;
border-left: 4px solid transparent;

清除浮动（未使用，不确定）

.xxx:brfore{display: table;content: " "}
.xxx:after{clear: both;}
.xxx{display: none;}

2.模拟下拉选框

将下拉框的ul内容绝对定位和display：none，通过菜单栏的class.active设置或者focus等将display转化为block，达到模拟下拉。

（同级元素选择： class + class{width：xxx；}）

3.自定义音频：放在<head>内，autoplay设置播放模式autoplay:自动播放一遍；controls：出现播放条；loop：自动重播；muted：有视频播放时静

4.rgba，a（0~1)控制颜色透明度

5.选中某处后在其他地方出现按钮display:none与visible:hidden

display;none会在按钮消失时高度也会消失，（当时在外部加了一个div解决，visible:hidden可以直接达到同样效果）

6.轮播图

直接从教程里弄出的代码，还未了解原理

7.flex布局

一侧定宽另一个自适应：父元素设置display：flex；子元素一个定宽，另一个设置flex：1（均分剩余空间），

三个一排两边靠边中间居中，justify-content：space-between（最后一排只有两个时，可以设置一个空的div）flex-warp：warp从上到下换行（不设置时即使div设置了宽度也依旧不会换行）

8.单行文字居中多行文字居左

div {
margin : 0 auto; // 使div框居中
width : 80vw;
text-align : center; // 文本居中显示
}
p {
width : auto;  // 必设
display : inline-block; // 不能设置为block
text-align : left; // 居左显示
}

9.框架阴影

box-shadow{x偏移 y偏移偏移距离颜色}

10.css动画

@keyframes和animation

@keyframes 自定义名{
  from {background: transparent;left: -100%;} //从from向to转换
  to {background:rgba(0, 0, 0, 0.5);left: 0;}
}
.xxxx{
  animation: 自定义名 1s; //动画播放时间
}