网页样式经典

《网页样式经典》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、网页样式经典绝对定位和相对定位网页制作Webjx文章简介：本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。CSS网页布局教程:绝对定位和相对定位。通过本文你绝对能理解绝对定位和相对定位了，如果你看完本篇文章还不理解绝对定位和相对定位的话，我看你就别学CSS了！哈哈！概要：本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Ma

2、rgin属性（外边距）对定位块级元素进行布局的方法。(本文的示例，请看这个附件demo。)说明：占位空间：元素在文档流中所占据的空间。物理空间：元素本身所占据的空间。下面分3种情况分别对相对定位和绝对定位进行讨论：1.只使用css第一组属性布局定位元素的情况2.只使用css第二组属性布局定位元素的情况3.混合使用第一组和第二组属性的情况图1为未定位时的初始效果，层级关系为：

3、一部分，会对文档流中其它元素布局产生影响。（说明：蓝色代表占位空间，红色代表元素）1.仅使用left、right、top和bottom属性布局相对定位元素的情况元素原本所占的占位空间仍保留，物理空间偏移。看到本信息说明该文是通过网页教学（webjx.com）整理发布的，请不要删掉！图2中，设置元素的left和top的值，对box2进行布局，可以发现除了box2偏移之外，其他块级元素的位置没有被影响，可见box2的占位空间还是存在的。层级关系为：

4、果图：图22.仅使用margin属性布局相对定位元素的情况用margin-bottom属性和margin-top属性设置负值可以改变文档流中所占空间的高度，会影响文档流中的其它元素位置。例如：margin-top:负值;margin-bottom:负值图3中，box1和box2都设置了元素margin-bottom的值，值等于它们高度的负值。box1和box2物理空间没有改变，占位空间高度为0。box3的margin-bottom值设置为0，物理空间没有改变，占位空间高度不变。再通过margin-left对box2和box3设置左偏移值。层级关系为：

5、ion:relative;margin-bottom:-102px;  

6、此信息网页教学网（webjx.com）发布目的是为了防止你变懒！webjx.com不主张采集！图4中，box2是在图3的基础上增加设置left的值产生的效果，可见margin-left的值和left的值产生了累加。(偏移量:80px=110px-30px)层级关系为：

7、e;margin-bottom:0px;margin-left:220px;效果图：图4二、用绝对定位布局块级元素设置position值：position:absolute;此属性值的设置，元素从文档流完全删除。1.仅使用left、right、top和bottom属性布局绝对定位元素的情况绝对定位的元素的偏移位置以最近的定位(包括相对定位和绝对定位)祖先元素作参照物。如果元素没有已定位(包括相对定