CSS3
column-count
正文文字两端对齐
对于英文文章,只需要设定 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;
使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”; -
visibility:hidden;
使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。
使用Visibility或者Display属性时注意:
- 当visibility被设置为”hidden”的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置。
- 当display被设置:none的时候,这时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填。
display: none;的元素相当于消失,而visibility: hidden;则只表示隐藏,位置还在。Visibility:none 和 Display:hidden 的区别:
图片格式
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>