带来一篇CSS网页制造教程:overflow属性

一般来说还需要用Photoshop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。
网页制造poluoluo文章简介：overflow属性有四个值：visible(默许),hidden,scroll,和auto。一样有两个overflow的姐妹属性overflow-y和overflow-x，它们很少被接纳。
依据CSS的盒模子观点，页面中的每一个元素，都是一个矩形的盒子。这些盒子的巨细、地位和举动都能够用CSS来把持。关于举动，我的意义是当盒子表里的内容改动的时分，它怎样处置。好比，假如你没有设置一个盒子的高度，该盒子的高度将会依据它包容内容的必要而增加。可是当你给一个盒子指定了一个高度或宽度而内里的内容超越的时分会产生甚么？这就是该增加CSS的overflow属性的时分了，它同意你设定该种情形下怎样处置。

overflow属性有四个值：visible(默许),hidden,scroll,和auto。一样有两个overflow的姐妹属性overflow-y和overflow-x，它们很少被接纳。
让我们分离看一下这几个值，并会商一写配合用法和技能。
Visible

假如你不设置overflow属性，则默许的overflow属性值就是visible。以是一样平常而言，并没有甚么来由出格的设定overflow的属性为visible除非你想掩盖它在别的中央被设定的值。

这里必要记着的主要的事变是，只管盒子表面的内容是可见的，内容其实不会影响页面的事情流。好比：

一样平常来讲，你最少不必为内里的内容为笔墨的盒子设置流动的高度，如许就不会碰到这类情形了。
Hidden

默许值visible的相反的值就是hidden。它会将一切超越盒子的一切内容都给埋没失落。

这对对付利用静态的内容，并且大概会因为内容溢出而引发一些结构上的成绩切实其实很有效。只管云云，请记着用此办法埋没的内容将完全的看不到(除非往检察源代码)。好比一个有效设置他们的扫瞄器的默许字体比你预期的要年夜些，你会将一些笔墨推到盒子的表面然后完整的埋没之……
Scroll

设置一个盒子的overflow值为scroll将会埋没失落衬着到盒子以外的内容，可是它将会供应一个转动条在盒子外部转动，从而能够检察剩下的内容。

值得注重的是，利用scroll将会同时发生程度和垂直两个转动条，就算内容只必要个中一个。
Auto

overflow的auto值很像scroll，它独一办理的是在你不必要的时分也会呈现转动条的成绩。

扫除浮动

设置overflow的一个更盛行的用途是，说也奇异，扫除浮动。设置overflow其实不会在该元素上扫除浮动，它将扫除本人。意义就是，使用了overflow(auto或hidden)的元素，将会扩大到它必要的那末年夜以包抄它内里的浮动的子元素(而不是叠了起来(collapsing))，假定不决义高度。就像如许：

关于此成绩，经由测试，IE6会主动扩大父层元素的高度，而IE8和FF等扫瞄器加上overflow:auto后，便可扫除浮动。——神飞
这里有更多关于浮动的细节文章关于浮动的统统。
跨扫瞄器的懊恼

就像CSS中的良多东东，overflow有良多的跨扫瞄器的蹊跷的事变。好比这些：
转动条在盒子内里仍是表面?

Firefox将其放到盒子表面，而IE则将其放到内里。我以为只要IE是对的(它应当在内里的)。

看分明这个分明的分歧。
IE8扩大盒子的bug

IE8有良多风趣的新bug，包含一些十分严峻的埋没在网页中的。这里有更多先容。
损坏浮动结构

IE6,7和8城市歪曲默许的overflowvisible值并将程度的扩大一个盒子一婚配内容(好比图片)。这对利用浮动列结构的布局十分疾苦，并且单个扩大的列就可以够将别的列挤下往并使结构乱失落！

现实上，这个我在考证的时分发明，只要IE6才会呈现这类情形，而IE7、IE8和别的扫瞄器体现分歧。假如人人又碰到这类情形，请告知我，多谢！——神飞
转动条能用CSS把持吗？

IE已往在较老的版本中同意如许，可是以后就收敛了。好比很多表单位素，转动条就不同意利用CSS把持。我在它是不是是件功德情上没有任何详细的定见，可是我能够说，在网站的一切内容上利用转动条是很丑恶的和大方的。假如你必要一个丑化的转动条，你也许必要寻觅JavaScript来摹拟。
IE技能

不管是不是必要，IE城市一向显现一个垂直的转动条，这对防备程度跳动是有些感化的，但并不是老是可取的。要想在IE中移除它，能够在body元素中设置overflow为auto。PS:此种情形也较少发明，不外在body的款式中增加overflow:auto的办法，倡议思索接纳

缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。

不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

可以使用 CSS 检查工具进行设计。

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

学Dreamweaver技术的过程其实是一个增加信心的过程。