您在divcss.net的位置首页 >> DIV+CSS教程 >> 教程正文

第十三课 网页布局如何实现CSS定位

 skeeter | Div+css教程 | 2010-3-23 | 221点击 | 0评论

这一课,我们将学习网页布局中如何实现CSS定位,并以此了解CSS的display属性,position属性,以及什么是块对像,什么是内联对象,内联对象和块对象间如何进行相互转换

从这一课开始我们将接触CSS的布局，一个漂亮页面的基础是布局，以下内容将是非常重要的，如有不懂，务必反复阅读进行理解。


--------------------------------------------------------------------------------


CSS 定位和浮动


CSS 为定位和浮动（css浮动）提供了一些属性，利用这些属性，可以建立列式布局，可以将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用很多个表格（table）才能完成的任务。


定位的基本思想很简单，它允许你随意定义一个元素的位置，可以使相对于父元素、或者另一个元素甚至于浏览器。显然，这个功能非常强大。


另一方面，CSS中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局，但他在日常网页设计中使用的比重是非常大的！我们将会在后面的章节中明确解释浮动的含义。


--------------------------------------------------------------------------------


行内元素、块级元素


div、h1 或 p 等等元素常常被称为”块级元素”，这意味着这些元素显示为一块内容。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中。


还不清楚哪些是块元素、行内元素？请参考这里：什么是内联对象,什么是块对象


您可以使用 display属性 改变元素的类型。这意味着， 通过将 display 属性设置为 block，可以让行内元素（比如 ）表现得像块级元素一样。同样，将 display属性 设置为 inline，可以让块级元素（比如

）表现得像行内元素一样。甚至可以通过把 display 设置为 none，该元素及其所有内容就不再显示，不占用文档中的空间。


--------------------------------------------------------------------------------


CSS 定位机制


CSS 有四种基本的定位机制：普通流、浮动、相对定位和绝对定位。


除非专门指定（浮动、相对定位或绝对定位），否则所有元素都在普通流中定位。也就是说，普通流中的元素的位置由元素在HTML文档中的位置决定。


块级元素从上到下一个接一个地垂直布置，上下间距是由上下外边距决定的。


行内元素在一行中水平布置。可以使用左右内边距、边框和左右外边距（css边距）调整它们的间距。


在下面的章节，我们会为您详细讲解相对定位、绝对定位和浮动。


--------------------------------------------------------------------------------

CSS position 属性


通过使用 position属性，我们可以选择 4 中不同类型的定位，这会影响元素框生成的方式。


position 属性值的含义：


static （文档流）


元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。


relative  （相对定位）


相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TOP、RIGHT、BOTTOM、LEFT 个参数进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。


absolute （绝对定位）


绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT 个参数进行定位，在没有设定参数前，默认依据父级的做标原始点为原始点。如果设定此参数后并且父级元素没有定义过position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由以上4个参数决定。


fixed

 

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。 （效果类似页面中浮动广告，无论页面上下滚动，该元素都会处于相同位置）

 
提示：一般来讲，网页居中用absolute很容易出错，因为网页一直是随着分辨率的大小自动适应的，而absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置，很多人出错就在于这点上。

关键字:网页布局如何实现CSS定位,CSS定位,display属性,position属性,div+css入门教程

上一篇:第十二课 如何设置CSS边框下一篇:第十四课 如何进行CSS定位

添加评论



站长杂谈

最新动态 | SEO | 网站推广 | 网站建设

  • 传腾讯全面购康盛创想 discuz!落户腾讯 传腾讯全面购康盛创想 discuz!落户腾讯 2010-8-23 11:57:15 22次阅读

    今日有媒体爆出腾讯已经全面收购建站平台Discuz！的开发公司——北京康盛创想，进军中小网站市场

  • 侵权盗版网站黑名单即将建立 侵权盗版网站黑名单即将建立 2010-7-22 11:47:41 50次阅读

    此次行动后将建立侵权盗版网站黑名单制度。名单将在国家版权局网站上不定期发布并抄送提交三大电信...

  • 如何应对拍照备案 如何应对拍照备案 2010-7-19 10:37:03 70次阅读

    就目前而言，拍照备案已成定局。 据一名行业网站的站长透露，目前他最担心的就是需要现场拍照，因...

  • 日本称中国网购仿冒品泛滥 日本称中国网购仿冒品泛滥 2010-7-11 12:55:34 57次阅读

    据日本共同社10日报道，为掌握仿冒品的流通情况，日本经产省于2009年度在中国的主要网络商城...

好书推荐

DIV+CSS | SEO | 网络编程 | 网站设计