最近做项目所积累的一些小知识（一）

CSS篇

1.如何让一个页面有背景图片，并且背景图片铺满整个屏幕？

可以用body，的background属性来设置！例如：

background: url("123.jpg") no-repeat fixed center top / 100% 500px transparent;

　　那么现在把这个属性拆开来解释下。

1.background-image: url("123.jpg")

　　这个就是这个网页的背景图片，url("path")path就是你的背景图片的地址。

2.background-repeat: no-repeat;

　　这个属性有5个值inherit|no-repeat|repeat|repeat-x|repeat-y。

inherit：这个值就是从父类继承repeat的值；

no-repeat：这个值的意思图片不重复，如果这个背景图片很小的话就只有一张很小的图片显示在网页中间。

repeat-x:在沿着x轴方向，重复平铺

repeat-y：在沿着y轴方向，重复平铺

repeat：在x和y轴上，重复平铺

3.background-attachment: fixed;

　　这个属性有3个值scroll | fixed | inherit

scroll：随着页面滚动，图片也会动

fix：随着页面移动图片不会动

inherit：继承父类值

4.background-color: black;

　　这个属性的值就是背景的颜色，默认值是transparent。当北京有图片的时候颜色就不起作用了

5.background-position

　　这个属性的值，就是规定背景图片的位置，具体的值就是（top，center，buttom）和（right，left）的组合.还有更多的值可以查看http://www.w3school.com.cn/css/pr_background-position.asp

6.background-size

　　这个属性的值是在这过程中最重要的一个了，值为规定图片的大小。如果要平铺整个屏幕的话可以用background-size：100% 100%来实现。但是这种方法据本人测试不兼容火狐浏览器。还有2中形式就是background-size：100%和background-size：cover。这两种方法都是原来照片宽和长按照相同比例放大，直到宽或者长2者都铺满屏幕为止，按照这个图片大小放置背景图片！但是显示的话只会现实屏幕大小的图片！

更多的background属性可以查看http://www.w3school.com.cn/css/pr_background.asp。

2.如何让div内的文字垂直居中显示

首先我们先来了解下一些概念：

line-height：行高（行高指的是文本行的基线间的距离），什么事基线就是我们写英文本子的从下往上数倒数第二条线，而文字就填充在这几条格子里面，可能说的比较模糊，来看看百度牛人的图文总结吧！http://hi.baidu.com/wolongxzg/item/a39ef8299c984283af48f5b0。上面有很好的描述！说到底就是两行字之间的距离，加上字体的高度！

inline box：行内框(行高减去字体高度的二分之一，分别加到文本内容的上下部分，包含这些内容的最小的框就是行内框)

那么怎么让文本居中显示呢：

(line-height的大小等于inlinebox的高)

单行文本以div为例子，把div的height和line-height设置成一样就OK了（这里也可以把line-height的值赋给内部的元素，效果是一样的）。为什么？当div的高度和行高一样的时候，那么这个时候得出的inline box(行内框)刚好是这个div的外边框组成的。

多行文本div固定高度：首先要知道是几行的文本，假设为N,div的高为Height，那么行高就等于Height/N。至于为什么，就是上面所说的其实行内框的高度就是行高，所以height/n的行内框n刚好可以把height的div填满。而文字在行内框中都是居中的所以这几行字也是居中的（前提是字的大小是一样的）。

多行文本div高度未知：这个时候文本的行数我们也是不知道，那么可以给div添加行内距来实现，给div分别添加padding-top和padding-buttom，且两个值是相等的！或者直接随便加一个line-height就可以了。（如果是需要水平居中的话只需要加上text-align:center就OK了）

参考资料：http://www.blueidea.com/tech/web/2006/3231.asp

ps：这里注意和vertical-align的区别http://www.w3school.com.cn/css/pr_pos_vertical-align.asp（目前还没有去研究这个属性,这个属性在单元格里面是起作用和text-align是差不多的用法，但是在其它元素中是定义元素之间的的相对位置关系）。

3.div块嵌套的时候，让内div居中显示

可以用margin属性来设置，具体的代码是：

margin：0 auto；

可以让内置的div垂直居中显示！具体的详细方面可以查看http://blog.sina.com.cn/s/blog_6f96c7520100qz13.html。

4.关于内联元素和块元素

百度百科对内联元素的解释：http://baike.baidu.com/link?url=WfYuJiJ920n7SEGan01p8Vjaci4mrGMLUJWioz1_eKJd8OyrcTrGEz1hIknzQFAlZXFwuEMZ84tiCwh6U0Gkdq

对块元素的解释：http://baike.baidu.com/view/8864845.htm

而我们常见的并且经常用到的块元素就是div。（PS：有些属性对块元素和内联元素的支持是不一样的）

5.关于overflow:hidden的用法

这个的意思就是当内部的元素超出外部的时候，这部分就会被隐藏起来。但是前提就是外部元素的高度是确定的，否则外部元素的高会会跟随内部元素的高变化而变化，这里主要是对div来说的。