设置元素宽度
width:200px; overflow: hidden;//超出文本隐藏 text-overflow: ellipsis;//超出文本省略号显示 display: -webkit-box;//设置为webkit盒模式 -webkit-line-clamp: 2;//2行显示 -webkit-box-orient: vertical;//从上到下垂直排列不设置宽度，弹性布局。
父元素设置：display:flex,子元素：flex：1
flex: 1; text-overflow:ellipsis; white-space:nowrap; overflow: hidden;原因：不同的设备，不同的设备像素比（dpr）导致的；
通过media来媒体查询
React：style-components解决方案
可设置颜色、类型、粗细，有默认值，也可通过父组件来传递参数
//定义 import styled from 'styled-components' const border = StyledComp => { return styled(StyledComp) ` position: relative; border-radius: ${ props => props.radius || 0 }rem; &::after { pointer-events: none; position: absolute; z-index: 999; top: 0; left: 0; content: ""; border-color: ${ props => props.color || '#ccc' }; border-style: ${ props => props.style || 'solid' }; border-width: ${ props => props.width || 0 }; @media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) { width: 100%; height: 100%; transform: scale(1); border-radius: ${ props => props.radius || 0 }rem; } @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) { width: 200%; height: 200%; transform: scale(0.5); border-radius: ${ props => props.radius * 2 || 0 }rem; } @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) { width: 300%; height: 300%; transform: scale(0.3333333); border-radius: ${ props => props.radius * 3 || 0 }; } transform-origin: 0 0; } ` } export default border包裹一个被加边框的元素后生成一个新的组件
//使用 import border from '@/CommonStyled/border.js' //包裹使用 const SearchInput = border(styled.div `...`) //jsx通过属性传递，ChildComponentStyle是Search组件里面的内容，可以通过{...this.props拿到父组件的属性} <Search width="1px" radius={0.16}></Search> //Search.jsx class Search extends Component { render() { return ( <> <SearchContainer {...this.props}> <SearchInput {...this.props}> <i className="iconfont"></i> <span>{this.props.message}</span> </SearchInput> </SearchContainer> </> ) } }vue：styl
//加四周边框 $border(width = 0, color = #ccc, style = solid, radius = 0) position relative border-radius radius &::after pointer-events none position absolute z-index 999 top 0 left 0 content "" border-color color border-style style border-width width @media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) width 100% height 100% transform scale(1) border-radius radius @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) width 200% height 200% transform scale(0.5) border-radius radius * 2 @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) width 300% height 300% transform scale(0.3333333) border-radius radius * 3 transform-origin 0 0 //加底部边框 $borderdown($color) position: relative; @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) &::before content: " "; position: absolute; left: 0px; bottom: 0px; background-color: $color; transform: scaleY(0.667); height: 1px; width: 100%; @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) &::before content: " "; position: absolute; left: 0px; bottom: 0px; background-color: $color; transform: scaleY(0.5); height: 1px; width: 100%; @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) &::before content: " "; position: absolute; left: 0px; bottom: 0px; background-color: $color; transform: scaleY(0.333); height: 1px; width: 100%; //使用 <style lang='stylus' scoped> @import "../../assets/style/border"; @import "../../assets/style/borderDown"; .className $border(1px,rgba(0,0,0,.08),,8px) .childclassName $borderdown(rgba(0,0,0,.08)) <style>节流
所谓节流，就是指连续触发事件，但是在 n 秒中只执行一次函数，节流会稀释函数的执行频率。
对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。
时间戳：使用时间戳，当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳(最一开始值设为 0 )，如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，如果小于，就不执行。
// 时间戳版本 function throttle(func, wait) { var context, args; var previous = 0;//定义初始基准时间戳用于计算差值 return function() { var now = +new Date(); context = this;//保存this指向，这里作为了回调函数，所以this指向事件对象 args = arguments;//保存传入的函数参数，e等 if (now - previous > wait) { func.apply(context, args);//通过apply重新定义this指向，并传入参数 previous = now; } } }使用，第一次触发立即执行，往后每间隔给定时间才执行一次
container.onmousemove = throttle(getUserAction, 1000); //continer是通过getelementbyId获取的dom，对鼠标滑过监听，事件的回调函数为getUserAction，1000为间隔时间定时器：当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。
// 使用定时器 function throttle(func, wait) { var timeout; var previous = 0; return function() { context = this; args = arguments; if (!timeout) {//如果不存在定时器则向下执行 timeout = setTimeout(function(){ timeout = null; func.apply(context, args) }, wait)//在指定时间后将定时器消除 } } }防抖
防抖的原理就是：你尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件，我才执行，真是任性呐!
function debounce(func, wait, immediate) {//immediate（布尔类型）用来控制第一次是否立即执行 var timeout; return function () { var context = this; var args = arguments; if (timeout) clearTimeout(timeout); //这里判断timeout的时候只有在timeout=null时才不执行，clearTimeout只能清除延时器但是不会将timeout制空，所以每次触发事件都会通过判断并且清除原始延时器，只有在停止触发事件后，延时器将timeout制空才不会通过判断 if (immediate) {//如果需要立即执行则通过 var callNow = !timeout;//控制执行回调函数， timeout = setTimeout(function(){ timeout = null;//在指定时间后异步延时的将timeout=null，下次触发事件下面的判断才会通过方可执行回调 }, wait) if (callNow) func.apply(context, args)//只有在延时器将timeout赋值null后才会执行回调函数 } else { timeout = setTimeout(function(){ func.apply(context, args) }, wait); } } }