Category Archives: Frontend

如何解决inline-block元素的空白间距 css 完美解决

有关于使用inline-block来代替float的讨论也蛮多的，最常说的就是使用inline-block来代替float进行布局，或者使用inline-block来实现元素的居中效果。前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的居中效果，不过留下了一上问题，就是使用inline-block的元素之间会存在“4px”的空白间距。那么今天我们就一起来说说这个“4px”的问题。 1 2 3 4 5 6 7 <ul>   <li>item1</li>   <li>item2</li>   <li>item3</li>   <li>item4</li>   <li>item5</li> </ul> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 *{   margin: 0;   padding: 0; } ul {   list-style: none outside none;   padding: 10px;   background: green;   text-align: center; } ul li {   display: inline-block;   *display: inline;   zoom: 1;   background: orange;   padding: 5px; } 上面的demo效果，明显的可以看出，在inline-block的元素之间存在“4px”的空白： 上面截图是：IE8-9、Firefox、Safari等浏览器下的效果，换句话说，这种现像只有在这几种浏览器中才会出现。下面我们就来说说解决这个“4px”(Chrome下是8px)的几种方法： 方法二：很多地方讨论使用负的margin来解决，比如说： 1 2 3 4 5 6 7 ul {         font-size: 12px;     }     ul li {         margin-right: -4px;         *margin-right: 0;     } 这种解决方法并不完美，如果你的父元素设置的字号不一样，可能你的“-4px”就不能解决问题。况且在Chrome中你需要另外设置一个负的margin值才能实现同等的效果。 当然有些文章介绍使用"-0.25em"来解决，这也是跟元素的字号有极大的关系。所以我个人建议不使用负的margin来解决这样的问 方法三：设置父元素字体为0 第三种方法设置父元素的字体为“0”，然后在“inline-block”元素上重置字体需要的大小。 1 2 3 4 5 6 7 8 9 10 […]

CSS实现单行、多行文本溢出显示省略号

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。 实现方法：

效果如图： 但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。 接下来重点说一说多行文本溢出显示省略号，如下。 实现方法：

效果如图： 适用范围： 因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端； 注： -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性： display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。 实现方法：

效果如图： 适用范围： 该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。 注： 将height设置为line-height的整数倍，防止超出的文字露出。 给p::after添加渐变背景可避免文字只显示一半。 由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8需要将::after替换成:after。   from:http://www.daqianduan.com/6179.html

React Native 开发之 IDE 选型和配置

React Native 发布一年多了，有不少公司已经在线上产品中或小范围试水，或大范围应用，很多公司或开发者都在为 React Native 的生态系统作出自己的贡献。 React Native 的开发基本上是 Javascript ＋ 系统原生开发语言（Java，Objective-C，Swift），原生语言的开发所用的 IDE 没有多余的选择，Android 平台只能使用 Android Studio（不要告诉我你还在使用 Eclipse），iOS 平台只能使用 XCode，而开发 Javascript 的 IDE 选择就多了，从 FaceBook 官方推荐的 Atom＋Nuclide，到与 Android Studio 同系列的 Javascript IDE WebStorm，再到功能强大的 Sublime Text 3，以及微软推出的 Visual Studio Code 和 decosoftware 专门为 React Native 打造的开源 IDE Deco，甚至 Vim，NodePad++ 等等，都可以用来开发 React Native，唯一的前提能够支持识别 Javascript 语法，识别 JSX 和 React Native API 的智能提醒。接下来我们就来介绍最常用的五款 IDE 的配置和选型。 Atom＋Nuclide   Atom 是由 Github 打造的下一代编程开发利器，支持 Windows、Mac OS X、Linux 三大桌面平台，免费且开源。Atom 支持各种编程语言的代码高亮，同时具备强大的代码补全功能，能够极大的提高编程效率，Atom 本质上是一个文本编辑器，而不是一个 IDE，因此在用来开发 React Native 时需要配合 Nuclide 一起使用。 Nuclide 是 Facebook 基于 Atom 的基础上开发的一个插件 IDE，可以用来开发 React Native，iOS […]

HTML&CSS编码规范

目录 HTML 语法 HTML5 doctype 语言属性（Language attribute） 字符编码 IE 兼容模式 引入 CSS 和 JavaScript 文件 实用为王 属性顺序 布尔（boolean）型属性 减少标签的数量 JavaScript 生成的标签 CSS 语法 声明顺序 不要使用 @import 媒体查询（Media query）的位置 带前缀的属性 单行规则声明 简写形式的属性声明 Less 和 Sass 中的嵌套 Less 和 Sass 中的操作符 注释 class 命名 选择器 代码组织 黄金定律 永远遵循同一套编码规范 — 可以是这里列出的，也可以是你自己总结的。如果你发现本规范中有任何错误，敬请指正。通过 open an issue on GitHub 为本规范添加内容或贡献力量。 不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。 HTML 语法 用两个空格来代替制表符（tab） — 这是唯一能保证在所有环境下获得一致展现的方法。 嵌套元素应当缩进一次（即两个空格）。 对于属性的定义，确保全部使用双引号，绝不要使用单引号。 不要在自闭合（self-closing）元素的尾部添加斜线 — HTML5 规范中明确说明这是可选的。 不要省略可选的结束标签（closing tag）（例如，</li> 或 </body>）。

HTML5 doctype 为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。

语言属性 根据 HTML5 规范： 强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。 更多关于 lang 属性的知识可以从 此规范 中了解。 这里列出了语言代码表。

IE 兼容模式 IE […]

ISO 2 Letter Language Codes

The codes below, which are sorted alphabetically by language (not language code) are to be used with the core lang attribute to identify the language contained inside the element that the lang attribute is applied to. Table 1. Language Codes Language Code Abkhazian AB Afar AA Afrikaans AF Albanian SQ Amharic AM Arabic AR Armenian HY Assamese AS Aymara AY Azerbaijani AZ Bashkir BA Basque EU Bengali, Bangla BN Bhutani DZ Bihari BH Bislama BI Breton BR Bulgarian BG Burmese MY Byelorussian BE Cambodian KM Catalan CA Chinese ZH Corsican CO Croatian […]

JS离开页面执行函数 onbeforeunload与onunload事件

阅读目录 onbeforeunload定义和用法 onunload定义和用法 在最近的项目中，需要做到一个时间，就是用户离开页面的时候，我需要缓存页面其中一部分的内容，但是我不需要用户刷新的时候也缓存，我只希望在我用户离开的时候 执行这个函数。百度之，有onbeforeunload与onunload这两个事件，但是onbeforeunload在用户刷新的时候也会执行。搞得我弄的挺久的，所以想在这里做一个小小的总结   onbeforeunload与onunload事件 onbeforeunload定义和用法 onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。 该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。 对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 "确定要离开此页吗？"。该信息不能删除。 但你可以自定义一些消息提示与标准信息一起显示在对话框。 注意： 如果你没有在 <body> 元素上指定 onbeforeunload 事件，则需要在 window 对象上添加事件，并使用 returnValue 属性创建自定义信息(查看以下语法实例)。 注意： 在 Firefox 浏览器中，只显示默认提醒信息（不显示自定义信息）。 使用方法： 1、 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>test</title> </head> <body onbeforeunload="return test()">      </body> <script type="text/javascript">     function test(){         return "你确定要离开吗";     } </script> </html> 或者： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8"> […]

Flex 布局教程：实例篇

上一篇文章介绍了Flex布局的语法，今天介绍常见布局的Flex写法。
你会看到，不管是什么布局，Flex往往都可以几行命令搞定。

Flex 布局教程：语法篇

网页布局（layout）是 CSS 的一个重点应用。
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

Flex 布局示例

from:http://static.vgee.cn/static/index.html

jquery判断元素是否隐藏的多种方法

第一种：使用CSS属性 代码如下: var display =$('#id').css('display'); if(display == 'none'){ alert("被你发现了，我是隐藏的啦！"); } 第二种：使用jquery内置选择器 假设我们页面有这么个标签, 代码如下: <div id="test"> <p>仅仅是测试所用</p> </div> 那么,我们可以用以下语句来判断id为"test"的标签是否隐藏: 代码如下: if($("#test").is(":hidden")){…} //前提是已经将jQuery的库导进来了 这样,我们就能够很简单地判断一个元素是否隐藏,并根据其状态来设置动画,比如: 复制代码代码如下: if($("#test").is(":hidden")){ $("#test").show();    //如果元素为隐藏,则将它显现 }else{ $("#test").hide();     //如果元素为显现,则将其隐藏 } jQuery判断元素是否显示 是否隐藏 代码如下: var node=$('#id'); 第一种写法 代码如下: if(node.is(':hidden')){　　//如果node是隐藏的则显示node元素，否则隐藏　　node.show(); }else{ node.hide(); } 第二种写法 代码如下: if(!node.is(':visible')){　　//如果node是隐藏的则显示node元素，否则隐藏　　node.show(); }else{ node.hide(); } if(node.is(':visible')){　　//如果node是显示的则隐藏node元素，否则显示 node.hide(); }else{ node.show(); } jQuery判断对象是否显示或隐藏 Js代码 复制代码代码如下: // jQuery("#tanchuBg").css("display") // jQuery("#tanchuBg").is(":visible") // jQuery("#tanchuBg").is(":hidden") Js代码 代码如下: $(element).is(":visible") // Checks for display:[none|block], ignores visible:[true|false] Js代码 代码如下: $('element:hidden') $('element:visible') Js代码 代码如下: $(".item").each(function() { if ($(this).css("visibility") == "hidden") { // handle non visible state […]