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 =...
css文本溢出显示省略号
1.单行文本溢出省略号overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100px;2.多行文本溢出省略号WebKit浏览器或移动端的页面在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用Web...
css书写规则总结
1.JavaScript钩子使用的class不能是cssclass，要加j或j-前缀2.选择器 2.1css选择器尽量简短，层级要少，最好是1-2层 例如：.nav{}优于ul.nav{} 2.2不要依赖于html层级结构 例如：.nava{}优于.navlia{} 2.3不用Id选择器，复用度太低 2.4...
css3d总结
3d舞台设置 perspective(景深):length,可以设置overflow:hidden3d舞台下->3d元素容器 设置transform-style:preserve-3d,不可设置overflow:hidden(其如同transform-style:flat;) &nb...
css 文字换行
换行word-wrap:break-word新起一行对长单词进行断句word-break:break-all本行对长单词进行断句不换行，强制一行white-space：nowrap table中的文字自动换行(中英文),两种方法：table{word-break:break-all;word-wrap:bre...
