一、中间 自适应，左右两边 宽度固定 方法1：box容器 Flex布局，center设置为 flex:1123456789101112131415161718192021222324252627282930313233343536373839404142<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> ...
transition分为以下 六个阶段： enter, enter-active, enter-active-to, (开始 进入阶段的)第1帧 属性值，到 (默认属性值 的过渡阶段)，移除enter动画， leave, leave-active, leave-active-to (开始 离开 阶段的)第1帧 默认属性值，到 (属性值 的过渡阶段)，移除leave动画 2种使用：1<transition name="slide"></transition> 1234567 /* 正常状态下detail组件默认为transformX(0) */.slide-enter,.slide-leave-to { transform : translateX(100%);}.slide-enter-active,.slide-leave-active { transition: all .6s;} 不考虑过渡速率，与下同， 123456@keyframes slideMove{ ...
var arr = [1, 2, 2, 3, 4, 4, 5, 6, 7, 7, 4, 3, 5, 7, 11, 12, 11];var newArr = []; //方法1最优 set对象【Set是没有重复值的数据集合，传入一个需要去重的数组，Set会自动删 // newArr = Array.from(new Set(arr));// console.log(newArr)//方法2时间短，占空间。newArr.indexOf【遍历原数组的各项，每次判断新数组中是否存在该项，不存在就把当前项添加到新数组中。此法效率高，但占空间】/* arr.forEach(function (item, index) { if (newArr.indexOf(item) === -1) { newArr.push(item) }}); * / /* arr.forEach((item, index) = ...
转载地址：https://www.cnblogs.com/qin-tian/p/5910288.htmlhttps://my.oschina.net/leipeng/blog/221125https://www.cnblogs.com/leejersey/p/3991398.html 说起清除浮动，大家肯定会想起 clear: both ，的确，这是 CSS 中清除浮动的属性，clear 有 both/left/right/none/inherit 几个属性值，分别代表在元素左右两侧不允许出现浮动元素/左侧不允许出现浮动元素/右侧不允许出现浮动元素/不清除浮动/继承父元素的值。注意：clear属性只是在block元素是起作用，如果你把clear:both用在一个inline-block或inline元素上，clear:both是不会起任何作用的。】 浮动的兄弟元素 如何避免 对其兄弟元素造成影响？？？直接为 浮动元素的 兄弟元素 设置 clear: both ； 设置了 clear: both （当然在 ...
https://www.cnblogs.com/renshengruge/p/6369762.htmlhttps://www.cnblogs.com/leejersey/p/3991398.html CSS2.1的盒模型中规定的内容——Collapsing margins： 所有毗邻的两个或更多盒元素的 上下margin 将会合并为一个margin共享之。 毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。 解决办法：【触发BFC】 给父元素加上 padding替代margin/1px透明border/1px的padding/overflow:hidden(IE要添加zoom:1)， 或者给父元素/子元素设置为 float或position:absolute/fixed.或display设置为：inline-block、 inline-flex、 inline-grid、 或table-caption等【或设置父元素为flex、grid、table-cell也可，但子元素不行】 ( ...
各种选择器 优先级1.第一优先级：!important会覆盖页面内任何位置的元素样式，权值为 无穷大2.内联（行内）样式，如style="color: green"，权值为1,0,0,03.ID选择器，如#app，权值为0,1,0,04.类、伪类、属性选择器，如.foo, :first-child, div[class="foo"]，权值为0,0,1,05.标签、伪元素选择器，如div::first-line，权值为0,0,0,16.通配选择器，如*{}，权值为0,0,0,07.继承 的样式没有权值。（补充，<td align="right">，<img width="10">等标签 属性的 自带样式，优先级 不高于 继承样式） 权重 计算规则【重要：以上数字，非 十进制！eg：0,0,0,5+0,0,0,6=0,0,0,11 小于0,0,1,1】在层级选择器（子代，后代，兄弟，通用兄弟选择器）中。被 多类 选择器 选中的某元素，计算权重时， 分类别、按 ...
