think
think copied to clipboard
bytemofan
think in fe
多使用一些工具可以提高自己的工作效率，我自己常用的一些sublime text插件如下： 1、Emmet 2、 SideBarEnhancement 3、autoFileName 4、Autoprefixer 5、bracketHighlighter 6、Alignment 7、CSS Format 8、JS Format 9、git 10、Jquery 11、DocBlockr 12、JS minifier 13、Less 14、Sass 15、SassBeautify 16、SublimeCodeIntel 17、Tagify 18、HTML/CSS/JS prettify 19、markdown preview 20、babel
### *目录* - [多行文本省略](https://github.com/Mmzer/think/issues/3#mulitylines) - [移动端1px解决](https://github.com/Mmzer/think/issues/3#onepx) - [rem自适应布局方案](https://github.com/Mmzer/think/issues/3#rem) - [输入框调起时fixed失效](https://github.com/Mmzer/think/issues/3#inputfixed) ### 多行文本省略 #### 如果只是单行的话 ```css overflow:hidden; text-overflow:ellipsis; white-space:nowrap; ``` 部分浏览器还需要加上width属性。 #### 行数>1的文本省略 在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器），可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)[-webkit-line-clamp](http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-UnsupportedProperties)，这是个不规范的属性。这种方式比较是个webkit内核的浏览器。 -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。 常见的需要结合的属性： - `display:-webkit-box`:必须结合的属性，将对象作为弹性伸缩盒子模型显示. - `-webkit-box-orient`:必须结合的属性，设置或检索伸缩盒子对象的子元素的排列方式。...
[原文](http://javascriptplayground.com/blog/2017/01/npm-flowjs-javascript/) [Flow](https://flowtype.org/)是一个JavaScript的静态类型检查器，它提供了使用额外信息如期待的变量值的类型、函数功能和返回值等信息去注释JavaScript代码的能力。最近，在[Elm](elm-lang.org)这个JavaScript语言的超集做了很多类似的工作之后，我开始去探索流行的JavaScript动态类型添加问题。而且连[TypeScript](https://www.typescriptlang.org/)这个非常流行的并且被广泛应用于 Angular 2社区的语言也开始使用Flow了。 我开始使用Flow是因为它被大量应用于React社区（鉴于它是一个Facebook的项目也就不足为奇）并且它是基于React的和它是一个类型检查器。虽然现在我没有在使用React时应用Flow，但不久的将来我们将会看到大量关于它的博客文章出现，因为它很容易使用。写这篇文章并不是我对Flow是我喜爱超过了TypeScript或者声明Flow比TypeScript更好。我仅仅是分享一些关于Flow的经验——我一直对这种事情很积极。 ## JavaScript类型检查 首先，我选择了[util-fns](https://github.com/jackfranklin/util-fns)来作为例子演示. `util-fns` 是我自己写的很小的一个工具库（有点类似Lodash和Underscore，但是跟小更简洁）。它主要是一个很简单的学习和实验Flow的工程。 我选择它是因为它是我发布的npm模块，并且可以就此探索在不丢失类型的情况下如何去发布一个模块的方法。这意味着任何一个开发者运行`npm install util-fns`都能访问这类信息并且可以及时的收到更新消息。 ### 安装 Flow 为了使用Flow，我首先安装对`flow-bin` 这个npm模块的本地依赖： ``` npm install --save-dev flow-bin ``` 你也可以选择全局安装, 但我喜欢把我所有的依赖安装到当前工程里边。这样，当你想要在不同的工程里边使用不同版本的Flow，你可以覆盖当前的环境。 然后运行命令 `./node_modules/.bin/flow init`。 **注意：**...
 ## CSS 专业技巧 [原文](https://github.com/AllThingsSmitty/css-protips) 一个帮助你提高css技巧的tips集合 > 对于其他非常好的清单请查看[@sindresorhus](https://github.com/sindresorhus/)创建的清单[awesome lists](https://github.com/sindresorhus/awesome/) ### 使用CSS reset CSS reset能够帮助你统一不同浏览器的初始化样式，使得你的浏览器环境就像白板一样干净！你可以使用CSS reset库[ Normalize](http://necolas.github.io/normalize.css/)，也可以使用一个更简化的复位方法： ```css * { box-sizing: border-box; margin: 0; padding: 0; } ``` 这样所有元素的`margin`和`padding`都被剥离重置，并且使用`box-sizing`使得你可以使用CSS盒模型来管理你的布局。 [Demo](http://codepen.io/AllThingsSmitty/pen/kkrkLL) *Note*:...
[原文](https://css-tricks.com/random-numbers-css/) 最近，我误打误撞的遇到一个有趣的问题。我想要随机的去设置`animation-duration`的值。 这是一个非随机的例子: 看这个Robin Rendle ([@robinrendle](http://codepen.io/robinrendle))在[CodePen](http://codepen.io)上的例子 [CSS随机数 #1](http://codepen.io/robinrendle/pen/1acd2c123621a542aa223022d402b6eb/)。 这是我用CSS写的一个动画: ``` @keyframes flicker { 0% { opacity: 1; } 100% { opacity: 0; } } #red { animation: flicker 2s ease...
redux是一个构建大型react应用的前端架构，结合了flux和函数式编程的思想。 ### flux flux将一个应用分成四个部分： - **View** 视图层 - **Action** 视图层发出的消息 - **Dispatcher** 接收视图层发出的actions，执行回调函数 - **Store** 存放应用的状态，发生变动时，更新View 各个部分关系大概如下：  ### 函数式编程 举例： ```javascript function forEach(array,func){ for(var i = 0; i <...
[Airbnb React/JSX 编码规范](https://github.com/JasonBoy/javascript/blob/master/react/README.md) [Airbnb JavaScript Style Guide](https://github.com/sivan/javascript-style-guide/blob/master/es5/README.md) [Airbnb CSS / Sass 指南](https://github.com/Zhangjd/css-style-guide) [Ruby 代码风格指南](https://github.com/1c7/ruby-airbnb)