您的位置：首页 > Web前端 > CSS

CSS——设计页面

2011-09-17 22:21 148 查看

基本概念

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撑破.

实例

两列竖排，左边可伸缩（float:left width:100%;），右边固定的实现（float:left; width:200px; margin-left:-200px）

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航