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

为什么80%的码农都做不了架构师？>>>   

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最大宽度：

这几个属性相当实用，尤其做手机网页的时候，不知道手机什么型号，屏幕是多大，所以这几个属性非常有用。

转载于:https://my.oschina.net/lianyi/blog/61628