CSS改变了网页的设计主要体现在两方面:
(1)使人们可以轻松地改变各种元素的样式,比如字体、颜色、背景颜色等等。
(2)使人们可以轻松滴改变网站原有的布局,如三列布局的网站,我们只需改动一点点代码就能改变这三列从左到右的顺序。
之前的几篇CSS随笔,其实都是讲述第(1)点的。对于第(2)点,CSS又是如何去为我们提供这种便利的呢?
CSS2布局的原理:通过指定box相对于父亲容器、其他容器、浏览器窗口的位置来定位的。而平时我们所见的float,其实严格意义上来讲不是布局。它是在CSS1中添加新来的,源于netscape浏览器。
float
从netscape1开始,float便用来定义图片<img src="img.jpg" align="right"/>,它会使图片浮动到右边,并且使其他元素比如文字围绕该图片。以前float只能用来浮动图片或者在其他浏览器中可以用来浮动表格。在CSS中,float可以用来浮动任何元素。
对于被浮动的元素,我们要时刻注意几点:
(1)元素被浮动后,浏览器实际上将它渲染到一个专门为float元素准备的plane中了。也就是说它从普通文档流中脱离了出来。
(2)虽然已经从普通文档流中脱离出来了,但是它还任然会影响普通文档流中的其他元素的布局。这是因为其他元素要围绕着它,就像对一张图片浮动后,其他文字要围绕着它一样。
(3)浮动元素的margin不会出现margin-collapse现象。
(4)如果你要对一个nonrepeacted元素要应用float,那么你必须要为其指定width。在CSS说明书中,我们可以得知,如果不为nonreplacted元素指定width,那么浏览器会以最小宽度 (一个字符的宽度)显示该元素。对于replaceted元素(如image,input),我们是不需要指定width就可以为它浮动的。
(5)任何被float的元素,都会生成一个block box。比如,对于Inline元素,本应该生成的是inline box,但是一旦它被浮动,它就会和box leave元素一样,生成block box。所以任何要被浮动的元素,我们无需再为他display:block。因为这是多此一举。
(6)