CSS网页布局心得（样式优先级，块级元素，内联元素，display，position，float）

文章涉及的知识点：CSS，样式优先级，块级元素，内联元素，display，position，float

1. 使用top;right; bottom;right时，要注意是对于哪个元素进行定位，要保证定位元素有固定位置。

2. 设置width=# % ; height=# %;的时候同样需要保证父元素是有固定大小的，这个父元素的大小也许是从html或是body一路继承下来的。另外，一般只设置width，height大小由div内的元素撑开。

3. css 优先级为越近越优先，但是可以在分号前加！important 调整为最高优先级。

4. 块级元素和内联元素

   • 块级元素（能自动换行的，每个占一行）：p, ul, form, div 等；
   • 行内（内联）元素（每个占一小块，默认挤在一行）：span,input 等；高度由内容撑开，设置height是没用的。

5. display:

   • none（元素不显示）；
   • block（元素显示为块级元素）；
   • inline（元素显示为内联元素）；
   • inline-block（行内块级元素：ie8以上及其他主流浏览器都已经支持，不自动换行但是能调节高度等属性）。

6. position：

   • static（处于普通文档流中，忽略top,right,bottom,left和z-index，可用于快速消除定位）；
   • relative（处于普通文档流中，相对定位，相对元素本来的正常位置进行定位，可用top,right,bottom,left和z-index进行相对定位，默认z-index大于0，无论元素在何位置，都在文档流中占据原来的空间）
   • absolute（脱离普通文档流，普通流中的元素排版会忽略该元素，可用top,right,bottom,left和z-index进行定位，默认z-index大于0，会自动将元素设为块级，对于第一个position属性不为static的父类）；
   • fixed（脱离普通文档流，固定定位，可用top,right,bottom,left和z-index进行定位，会自动将元素设为块级，定位原点为浏览器窗口，常用于固定悬浮的div，但旧版本ie浏览器不支持，兼容性常是问题）
   • inherit（从父类继承position属性的值，ie浏览器不支持）。

7. float：none(默认)/left/right/inherit（脱离普通文档流，排版时不占据空间，直到碰到包含框或者另一个float框为止，float会自动将元素设为块级）对应的清除float的语句为clear：both/left/right；或者 overflow:hidden；或者 zoom:1；

刚刚上手前端，试着自己写了个页面，发现还是对排版这块理解比较模糊。根据这次的经验先总结了几点CSS网页布局的要点，希望能再接再厉，早日脱离萌新orz。