小tips

CSS3

column-count

将 div 元素中的文本分为三列

---

正文文字两端对齐

对于英文文章，只需要设定 text-align:justify;中文，则需要添加text-justify:inter-ideograph属性。

    <div style="text-align:justify;text-justify:inter-ideograph;width:500px; border:2px solid #F00; padding:10px;">测试文字:
记得早先少年时 大家诚诚恳恳 说一句 是一句：清早上 火车站 长街黑暗无行人 卖豆浆的小店冒着热气;  从前的日色变得慢 车，马，邮件都慢 一生只够爱一个人;   从前的锁也好看 钥匙精美有样子 你锁了 人家就懂了。测试文字结束.
</div>

文字间距：

• letter-spacing添加字母之间的空白。

• word-spacing添加每个单词之间的空白

• Ps: word-spacing对中文无效。

           word-spacing:8px; letter-spacing: 1px;
  

去掉斜体I标签默认斜体样式：

#div i{ font-style:normal}  

文字溢出

p{white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}/*规定宽度内文字超出隐藏并显示省略号*/

demo
1、word-wrap:break-word;内容将在边界内换行，仅用于块对象，内联对象要用的话，必须要设定height、width或display:block或position:absolute。
2、word-break:break-all;用于处理单词折断
3、white-space:nowrap;用于处理元素内的空白，只在一行内显示。
4、text-overflow:ellipsis;超出部分显示省略号。

隐藏字体

text-indent:-9999px; （注意：只能用于block，table cells和inline-block）

h1{ width: 94px; height: 45px; background: url(images/modernizr-logo.png) center no-repeat; text-indent: -9999px;}

：after使用

#sectionsNav li:after {content: ""; display: inline-block; width: 7px; height: 7px; border:1px solid #95774c; border-radius: 50%;} 

visibility：确定元素是显示还是隐藏

     visibility="visible|hidden"//（visible表示显示，hidden表示隐藏）

display: none;的元素相当于消失，而visibility: hidden;则只表示隐藏，位置还在。

Visibility:none 和 Display:hidden 的区别:

display:none;
使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;

visibility:hidden;
使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

使用Visibility或者Display属性时注意:

当visibility被设置为”hidden”的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。

当display被设置：none的时候，这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填。

图片格式

png是无损压缩，体积大
JPG是有损压缩，体积比png小
Gif图片很小(一般几kb)
Jpeg经常在拷相片的时候看到得，该种图片格式是文件相对jpg大，因为里面存储了很多相机里的拍摄参数，像色相、饱和度、对比度等 。

Png图片多用于网页中的图标设计
Png8是类似gif的透明度，有带半透明（alpha为50%）的地方的时候以不透明处理。
Png图片如果色彩较多或复杂，则图片生成后的格式是很大的，相比较jpg的放有5~6倍之多，所以没特别要求不能以png替代jpg的使用
IE6不支持png透明特性，有png的地方会以灰色底显示，相当难看，不过ie6已经慢慢淡出了我们的视线，相信png的应用会得到更广泛。

更多其他格式介绍：http://www.colabug.com/thread-1094700-1-1.html

外边距叠加

如果父块元素和第一个子元素之间没有边框、内边距、内联内容和 间距 分开，若设置了 margin，则二者的 margin-top 会叠加；或者父块元素和最后一个子元素之间没有边框、内边距、内联内容和高度设置(height/min-height/max-height)，若设置了 margin，则二者的 margin-bottom 会叠加。

解决：可以给父元素增加 border、设置 padding、填充内容等方式来解决，还可以通过 overflow:hidden 来解决。

Margin Collapsing（Margin 塌陷）基于三种情况：
1、上下相邻的块元素
2、父元素和第一个或最后一个子元素
3、空的块元素
参考：https://github.com/dwqs/blog/issues/20

输入框图标

.kh{line-height: 30px; outline: none; font-size: 26px; padding-left: 30px; background: url(images/22.png) 315px no-repeat; }

<div class="wrap">
    卡号:
    <input type="text" class="kh">
</div>

font-size:100%

网页中我们常常看到一些公用样式里设置字体大小为100%，这是什么意思呢？查阅w3c这样解释：
%——把 font-size 设置为基于父元素的一个百分比值。

h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}

大家知道font-size具有继承性，也就是说子元素会继承父元素的字体大小，但是对于这样的标签却不是这样的，它们会采用自己固有默认的字体展现方式，如果将它们的font-size设置为100%,那么就会参考父元素的字体大小了，于是就实现了继承效果。

GBK页面引用编码为UTF-8编码的JS文件乱码

＜script type=”text/javascript” src=”test.js” charset="utf-8"></script> 

UTF-8页面引入编码为GBK的JS文件乱码

＜script type=”text/javascript” src=”test.js” charset="gb2312"></script>