小结一下前端html+css的经验 （四）

1.Line-height 是不错的属性，能够在竖直对齐有很大做用，可是它并非对全部标签有效，如：img  select，此时你能够想到一个属性：vertical-align:middle; 而后 margin-top:-px

 

2.letter-spacing和word-spacing这两个属性都用来添加他们对应的元素中的空白。letter-spacing添加字母之间的空白，而word-spacing添加每一个单词之间的空白

 

3.尽可能少用 来控制间距，加载的时候“闪”一下很不舒服。用标签的width，margin和padding也少用，兼容问题会少一些，更重要的是，一旦用到JQuery动画，你的那些个padding和margin，差生的动画效果用户体验不好。

 

4.z-index是个好东西，尤为复杂定位的页面，可是在ie7 容易混乱，必定要给要给浮动的层的最上层的父级模块标签也写上z-index

5.关于换行

1.word-break:break-all;只对英文起做用，以字母做为换行依据

2. word-wrap:break-word;只对英文起做用，以单词做为换行依据

3.{white-space:pre-wrap;只对中文起做用，强制换行

4.{white-space:nowrap;强制不换行，都起做用

5.{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现

6.定位：position。 

       1.static  默认的定位方式，归属文档流，从左到右，从上到下排列。

       2. relative 浮动定位，没有彻底脱离文档流，相对于父级定位，其余块的，就无论了，超出父级板块的时候，会浮动在其余元素上面。固然，也能够用z-index控制它的浮动层次。

    3.absolute  绝对定位。彻底脱离文档流，相对于浏览器中的内容定位的，如right:0，这个模块就永远沾在浏览器内容右边窗口，即便缩小窗口，仍是紧靠窗口内容右边。值得一提的是，若是该absolute的模块，不写top\left\bottom\right，它会遵照父级内的文档流格式布局，此时它后面的模块会往前走。

    4.fixed 对象定位听从绝对(absolute)方式，不一样的是，它不是相对内容定位，而是相对浏览器可视区定位，效果特别好，不支持ie6，其余浏览器都支持良好。。

7.min-height最小高度 、min-width最小宽度、max-height最大高度、max-width最大宽度：

这几个属性至关实用，尤为作手机网页的时候，不知道手机什么型号，屏幕是多大，因此这几个属性很是有用。