Css
css换肤总结
两种可行的办法1.多套不同主题的css用less/sass变量代替颜色值，用编译工具生成主题文件theme-dark.csstheme-green.css切换文件使用，不要appendlink，直接修改原有theme的link的href，就行了//根据不同的企业用户加载不同的cssdocument.querySelec...
css购物车(抛物线)运动
抛物线动画的原理，就是用两个元素，子元素会继承父元素的运动，将父元素在横向运动，子元素在纵向运动，子元素会形成一种双向运动。而父元素在横向上是匀速运动，子元素在纵向上是变速运动，可以使用贝塞尔曲线来定义运动，二者合成，就能出现一个曲线运动。具体的曲线，跟选择的贝塞尔函数有关，调整好，就可以形成抛物线运动。ball和af...
css动画常用属性总结
transition过渡动画，有4个属性：(1)transition-property：属性名称(2)transition-duration:间隔时间(3)transition-timing-function:动画曲线(4)transition-delay:延迟animation关键帧动画，有7个属性：(1)anima...
webpack css压缩方案
css-loader原有的minimize选项在1.0.0版本已经移除，不能使用其进行css压缩。目前可行的css压缩方案有：1.postcss-loaderwithcssnanooruseoptimize-cssnano-pluginplugin2.postcsswithpostcss-clean3.mini-css...
IE9的大css文件截断问题
最近做项目调试IE9的兼容性，遇到问题，样式应用不上去，在其他浏览器中是正常的。经过查找，判定是IE9的css截断问题。1.IE9截断判定方法1.打开IEDeveloperTools，在网络面板，进行捕获，抓取到的css文件是完整的2.打开IEDeveloperTools的HTML面板，在右侧样式面板中，点击最右侧对应...
css命名冲突解决方法
css的命名冲突目前有几种解决方法：1.命名约定人为的制定一下命名规则以避免冲突，例如前缀，嵌套等2.CSSinJS在JavaScript中写CSS，使用工具编译为css，最常见的是styled-components3.使用编译工具改变css类名最常见的是CSSModules4.HTML5的stylescoped可以部...
webpack的css,less,sass中使用绝对路径
用法：使用~表示绝对路径，如下：@import"~otherfile.scss".yourClass{background:url('~img/wallpaper.png');}webpack中配置resolve的moduleDirectorires，modules，alias三种设置路径都可以，推荐alias，ali...
css中按钮的四种状态
css中按钮有四种状态1.普通状态2.hover鼠标悬停状态3.active点击状态4.focus取得焦点状态.btn:focus{outline:0;}可以去除按钮或a标签点击后的蓝色边框下面的例子中.btn1用focus按钮会按下，不弹起 .btn2用active按钮点击按下，会弹起<buttonc...
css技巧总结
1. contenteditable属性的div的placeholder<divclass="input"contenteditableplaceholder="请输入文字"></div>.input:empty::before{content:attr(placeholder);}2...
css选择器位置和数量技巧
1.除去首个元素li:not(:first-child)li+lili:first-child~li2.第1-3个元素li:nth-child(-n+3)3.除去第1-3个元素li:not(:nth-child(-n+3))4.第5-10个子元素tabletr:nth-child(n+5):nth-child(-n+1...
cssText批量修改样式
cssText所有浏览器都支持。cssText的使用 obj.style.cssText="width:200px;position:absolute;left:100px;";正如那篇文章所提cssText会清除之前元素含有的样式，所以得使用obj.style.cssText+="width:200px;pos...
css简写总结
1.font简写font-style|font-variant|font-weight|font-size|font-family.fontStyle{font:italicnormalbold12pxarial,verdana;}2.background简写background-color|background-im...
css3动画总结
1.transition的多个属性写法transition:width,height1s,1sease,ease;属性之间用逗号，设置之间用空格...
css3图片变灰
html{ filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%); filter:p...
rem布局和hotcss原理分析
rem布局的开源方案hotcss,其原理个人理解如下： 手机px=(手机页面宽度/设计稿宽度)*设计稿px 手机rem=手机px/fontSize =(手机页面宽度/设计稿宽度)*设计稿px/fontSize =...
