想自学教程的朋友,就来教程巴巴。
教程巴巴
当前位置: 主页 > 图文 > 网页制作教程 >

十天学会DIV+CSS 第三天 二列和三列布局(2)

发布时间:2011-03-10 21:20 点击:
分享到:
【评论本教程】 【挑错本教程】
------分隔线----------------------------

从上图的例子可以看出,块级元素默认占据一行,相当于在它之前和之后各插入了一个换行;而内联元素span没对显示效果造成任何影响,事实也是如此;em只是让字体变成了斜体,也没有单独占据一行。这就是块级元素和内联元素,正因为有了这些元素,才使我们的网页变得丰富多彩。

如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。也就是说,可以用css的display:inline将块级元素改变为内联元素,也可以用display:block将内联元素改变为块元素。

五、float属性

回到我们的例子当中,理解了块级元素和内联元素,对理解浮动就容易多了。float是个重点,希望大家都能理解。上例中用float让元素向左浮动,在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素;且要指明一个宽度,否则它会尽可能地窄;另外当可供浮动的空间小于浮动元素时,它会跑到下一行,直到拥有足够放下它的空间。