CSS:布局的三个关键属性:float、position、display

时间:2021-03-20 21:56:43

  最近在出差,就我一个在这里。客户要做几个页面,涉及到了页面的布局问题,没办法自己得做了。然后就遇到了一些问题。页面不论怎么都不能按照设想的布局。

以前也没有做过网页布局方面的工作。上网上找类似的例子,看的是一头雾水。最终决定自学CSS。

  在网上下载了一本电子书《CSS权威指南》第三版。用了3个钟头看完了这本书。看的时候专拣不知道的看。譬如CSS选择器(这些了,以前就知道,并且使用jQuery就是用的CSS的选择器)、盒子模型了等,所以这些就不看的。另外在学习时,根据CSS参考手册(下载网址:http://css.doyoe.com/)编写样式,再使用360浏览器(或者firebug)进行调试,很快就能明白其中奥妙。

  这3个钟头中,对CSS有了大致的了解,也明白了CSS布局是怎么回事了。下面我将影响CSS布局的3个重要的属性说说:

  (1)display 。在学习这个属性前,要明白CSS把元素主要分为两大类:块元素、行内元素。

    常用的块元素主要有:<div>、<p>、<ul>、<li>、<h1..7>等。换行显示。

    常用的行内元素有:<span>、<a>等。在同一行显示。

    块级元素和行内元素是可以相互转换的,就是通过display属性完成的。

    display可取的值有:

    displaynone | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group 等等。

    但最重要的就是前三个。

      · none 表示不显示。

      · inline 表示作为行内元素显示。譬如<div>是个块元素,使用了这个属性值,就将和<span>一样了。

      · block 表示作为块元素显示。譬如<span>是行内元素,使用这个属性值,就和<p>一样了。

  

 (2)float 浮动

    在学习float前,得先明白什么是文档流。浏览器在解析html文档内容(这里不说css和javascript、是说单纯的html文档)时,是一流的方式解析的,反映到浏览器上,就是按照从左到右、从上到下的方式显示的。

    使用float属性后,元素会脱离文档流,按照指定的方式进行浮动。

    脱离文档流后,该元素后面的元素就会前移。占有该元素的位置,如果该与元素前的元素也浮动了,就会继续前移。

    float有left和right两种浮动方式。

   (3)position 定位

    使用position属性后,元素也会脱离文档流,按照指定的方式进行定位。

    position:static | relative | absolute | fixed 默认是static。

    relative是相对于祖先元素中,最近的是用position定位的元素,然后依据相对位置进行定位。

    absolute是相对于祖先元素中,最近的是用position定位的元素,然后依据相对位置进行定位。

    fixed是相对于<body>,我们看到的悬浮,就是使用这个值做出的效果。

理解了这3个属性后,我就写出来了一个5级的菜单,按照我希望的方式显示。然后顺利的完成了客户的几个页面。