CSS网页布局教程:绝对定位和相对定位

鲁宏君

鲁宏君

2016-02-19 23:43

下面图老师小编跟大家分享一个简单易学的CSS网页布局教程:绝对定位和相对定位教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

CSS网页布局教程:绝对定位和相对定位。通过本文你绝对能理解绝对定位和相对定位了,如果你看完本篇文章还不理解绝对定位和相对定位的话,我看你就别学CSS了!哈哈!

概要:

本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性(偏移属性)和Margin属性(外边距)对定位块级元素进行布局的方法。(本文的示例,请看这个。)

说明:

占位空间:元素在文档流中所占据的空间。
物理空间:元素本身所占据的空间。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

下面分3种情况分别对相对定位和绝对定位进行讨论:
1.只使用css第一组属性布局定位元素的情况
2.只使用css第二组属性布局定位元素的情况
3.混合使用第一组和第二组属性的情况

图1为未定位时的初始效果,
层级关系为:
div
  div box1
  div box2
  div box3
效果图:
CSS网页布局教程:绝对定位和相对定位_网页教学网
图1

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

一、用相对定位布局块级元素
元素设置position值: position:relative
此属性值的设置,元素没有脱离文档流,还是普通流定位模型的一部分,会对文档流中其它元素布局产生影响。(说明:蓝色代表占位空间,红色代表元素)

看到本信息,说明该文章

展开更多 50%)
分享

猜你喜欢

CSS网页布局教程:绝对定位和相对定位

Web开发
CSS网页布局教程:绝对定位和相对定位

CSS中关于相对定位和绝对定位

Web开发
CSS中关于相对定位和绝对定位

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS网页中的相对定位与绝对定位

Web开发
CSS网页中的相对定位与绝对定位

css布局定位系列:相对定位

Html CSS布局 Div+CSS XHTML
css布局定位系列:相对定位

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS层的应用及其定位(绝对定位和相对定位)

Web开发
CSS层的应用及其定位(绝对定位和相对定位)

网页布局教程:边距和绝对定位

Web开发
网页布局教程:边距和绝对定位

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

W3C标准以及XHTML和HTML

W3C标准以及XHTML和HTML

认识浏览器:Netscape 浏览器

认识浏览器:Netscape 浏览器
下拉加载更多内容 ↓