基本概念
Viewport:当页面内容超过容器大小,页面上当前显示出来的区域
Block-level :实现坐标定位,如p,div. 相邻的block-level元素往往从上到下垂直排列,包含的元素要么全为block-level,要么全为inline-level
Inline-level:不能定位但可以包含其他同为inline-level元素,相邻的inline-level元素往往从左到右或从右到左排列,如I a b span 等标签。每一个元素至少包含一个Box模型即由margin、border、padding、content width/height等属性所能描述的矩形区域;而这块区域相对于布局容器的坐标top、left,往往由布局容器按照block-flow(布局block的过程)、inline-flow等规则布局该元素时确定;
而CSS对html中诸如标签frame、image、object、embed、form等对应的元素称为replaced元素,它表示这些元素的内部布局不由Css来定义,而由浏览器来实现,而这些元素从外部来看相当于block-level元素,但可通过设置display:inline将其从外部看设为inline-level元素;
确定位置
一个html标签元素的position属性可以设置为static、relative、fixed、absolute、inherit等。
所有元素缺省为static,其Containing Block布局容器元素为最近的祖先block-level元素,其属性left、top、right、bottom不起作用;它会按照普通顺序生成,就如它们在HTML的出现一般。
relative同static属性元素一样,但其left、top等属性可以有效,其坐标相对于布局容器而言;
absolute的元素的布局容器元素是最近的除了其属性不为static的祖先block-level元素;可以设置left top bottom和right
position属性为fiexed的元素的布局容器元素是往往是根布局容器,但其定位坐标需要根据ViewPort的位置作相应调整,IE工作不是很好;
绝对定位元素的唯一副作用是,因为它们生活自己的世界里,没有办法精确决定它们在哪儿结束。如果你使用上面的例子在一个少导航和多内容区域,没有什么问题,但是,特别是使用长度和宽度的相对值时,你经常得放弃在下面放置任何事物如脚注的希望。如果你真的要做,与其绝对定位它们,不如浮动它们。
确定大小
对于有定义其宽高的页面元素,则按照其定义的宽高来确定其大小,而对于象text node这样的inline-level则需要结合其字体大小及文字的多少等来确定其对应的宽高;如果页面元素所确定的宽高超过了布局容器Containing Block所能提供的宽高,同时其overflow属性为visible或auto,则会提供滚动条来保证可以显示其所有内容。
除非定义了页面元素的宽高,一般说来页面元素的宽高是在布局的时候通过相关计算得出来的。
一旦确定了其Containing Block布局容器,同时结合其自身的block-level或inline-level特性,布局时根据block flow和inline flow规则就可确定其起始位置,其中inline-level元素可在其布局容器提供的区域内自动换行;而block-level元素可在其布局容器提供的区域内自动换一个段落。
另外float属性为left或right元素较为特殊,则不遵守上面的规则,该元素让在其高度范围内的其他元素始终在其左边或右边
选div+css模板
1.选择适合自己网站主题风格的模板
如果是文字类的站就不要选那种全部是图片组成的模板,相反如果是图片站当然不要选那种整个模板都没几个图的模板。一般来讲,好的模板网站都会给出模板的用途和分类,比如博客模板,企业模板等。另外颜色和风格也要符合自己网站特点,这个就要看站长个人的口味和判断了。
2.选模板最好要选那种带内页和导航页模板
因为许多模板只是提供主页的模板,因此如果你不具备一定的网页div+css设计能力的话,即使模板再好看你也最好不要去用,否则首页做出来了,内页却需要花费大量精力去自己设计,而且很容易和主页风格出入很大,效果就大打折扣了。
DIV水平排列排查
1:在div对应的CSS样式中有没有加入: float:left 或者float:center
2.如果您用象素进行精确控制的话,计算一行的所有的div宽度有没有大于包含它的容器的宽度
3.在计算宽度时,还需要加入DIV的margin,padding等控制layout的要素的宽度
4.查看div中的内容中,有没有子Block的宽度大于该div,把该DIV撑破.
实例
<body> <div style="float:left;width:100%;"> 内容内容内容内容内容<br/> 内容内容内容内容<br/> </div> <div style="float:left;width:200px; margin-left:-200px;"> 导航导航导航导航导航<br/> 导航导航导航导航<br/> </div> <div style:"clear:float;"> 尾部 </div> </body>