CSS盒子模型定位方法解析.docVIP

CSS盒子模型定位方法解析 摘要：现今的网页制作不仅要有完善的网页功能，还要考虑良好的用户体验。利用DIV+CSS来布局页面已是网页设计的主流，而CSS盒子模型的定位在其应用中是一难点，该文从CSS盒子模型的几种定位方法进行解析，体现其特点。 关键词：CSS盒子模型；float定位；relative定位； absolute定位 中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2014）04-0747-02 CSS是一种叫做样式表（stylesheet）的技术。也有人称为层叠样式表（Cascading Stylesheet）。盒子模型是CSS中的一个重要概念，虽然CSS中没有盒子这个单独的属性对象，但它却是CSS中无处不在的一个重要组成部分。CSS假定所有的HTML文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框（element box），可以形象地将其看作是一个盒子。CSS围绕这些盒子产生了一种“盒子模型”概念，掌握盒子模型的原理和使用方法可以极大地丰富HTML元素的表现效果，同时对于整个HTML文档的布局也会产生很大的帮助和促进。 1 CSS盒子模型 图1 CSS盒子模型基本结构 CSS的盒子模型很简单的可以理解为一幅画（如图1），对于每幅画（content）来说，都有一个画框（border），每个画框中画和边框之间一般都有间距（padding），将各幅画挂到墙上，通常画与画之间也会有一些距离（margin）。在CSS中，一个盒子模型由内之外有content（内容），padding（填充）， border（边框）和margin（边界）这4个部分组成。 2 CSS盒子模型定位方法 定位的基本思想很简单，它允许定义元素相对于其正常位置（应该出现的位置），或者相对于父元素、另一个元素甚至浏览器窗口本身的新位置。 CSS 有三种基本的定位机制：标准流、float定位和position定位。除非专门指定，否则所有元素都在标准流中定位。也就是说，标准流中的元素的位置由元素在 （X）HTML 中的位置决定。 2.1 float定位 CSS盒子模型的float属性的值很简单，可以设置为left、right或者默认值none。默认的none值，也就是标准流通常的情况，一个元素在水平方向会自动伸展，直到包含它的元素的边界，而在竖直方向和兄弟元素依次排列，不能并排。当对一个元素设置了left或right的浮动后，元素的表现会有所不同，元素就会向其父元素的左侧或右侧靠近，同时如果没有设置元素的height和width属性，元素会根据盒子里面的内容宽度来确定。另外当浮动到的位置不足够元素的存放空间时，它会往下寻找，直到有足够存放它的空间为止。 2.2 position定位 position定位和float一样，也是CSS排版中非常重要的概念。position定位就是指定块级元素的位置，即块级元素相对于其父块的位置或相对于自身在标准流的位置。 position属性共有4个值，分别是static、absolute、relative和fixed，各属性值描述如表1。 相对定位，盒子相对于它原来的在标准流或浮动后的位置偏移指定的距离，盒子仍保持其未定位前的形状，它原本所占的空间仍保留。＼absolute＼绝对定位，盒子的位置以它的包含框为基准偏移。绝对定位的盒子标准流完全脱离，就好像盒子原来不存在一样。＼fixed＼固定定位。盒子的表现类似于absolute，只是以浏览器窗口或其他显示设备的窗口为基准进行定位。＼] 与position属性配合使用的有top、left、right和bottom，这4个属性只有当position属性设置为absolute、relative或fixed时才有效。而且，在position属性取值不同时，它们的含义也不同。 在网页布局设计中，使用比较多的还是relative定位和absolute定位。 2.2.1 relative定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”标准流中或浮动后的位置进行移动。 例如，在一个页面中设计三个大小为50px50px的DIV，都给三个子DIV设置float：left属性，页面显示如图2所示。给框2添加css类样式block2，block2的样式主要代码为： 在IE浏览器中显示的定位效果如图3所示，从图示中可以看到，对设置浮动的框2进行相对定位，相对的基准依然是“原本的位置”，并且相对定位后的框2原本的位置并没有被释放。对于框1与框3，位置没有任何的偏移。 2.2.2 absolute定位 绝对定位使元素的位置与标准流无关，因此不占据空间。这一点与相对定