DDR爱好者之家

CSS定位的教程
站长资源 2024/11/24 佚名
71 1538
DDR爱好者之家 Design By 杰米

1.文档流

简单说就是元素按照其在 HTML 中的位置顺序决定排布的过程。HTML的布局机制就是用文档流模型的，即块元素（block）独占一行，内联元素（inline）不独占一行。

一般使用margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“距离”。只要不是float和绝对定位方式布局的，都在文档流里面。

2.position属性介绍

  1. static，默认值。位置设置为static的元素，它始终会处于文档流给予的位置。
  2. inherit，规定应该从父元素继承 position属性的值。但是任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
  3. fixed，生成绝对定位的元素。默认情况下，可定位于相对于浏览器窗口的指定坐标。
  4. 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。不论窗口滚动与否，元素都会留在那个位置。但当祖先元素具有transform属性且不为none时，就会相对于祖先元素指定坐标，而不是浏览器窗口。
  5. absolute，生成绝对定位的元素，相对于距该元素最近的已定位的祖先元素进行定位。
  6. 此元素的位置可通过 “left”、”top”、”right” 以及 “bottom” 属性来规定。
  7. relative，生成相对定位的元素，相对于该元素在文档中的初始位置进行定位。
  8. 通过 “left”、”top”、”right” 以及 “bottom” 属性来设置此元素相对于自身位置的偏移。

3.相对定位

relative生成相对定位的元素，相对于其正常位置进行定位。

相对定位完成的过程如下：

按默认方式（static）生成一个元素(并且元素像层一样浮动了起来)。相对于以前的位置移动，移动的方向和幅度由 left、right、top、bottom 属性确定，偏移前的位置保留不动。

  <style type="text/css">     
        #box1 {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        #box2 {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: red;
            /*position: relative;
            left: 100px;
            top: 100px;*/
        }
  </style>
  <div id="box1"></div>
  <div id="box2"></div>

其中box2中的注释代码未生效前，是按照文档流进行排序呈现。

但是，当注释代码取消注释生效后，就会相对文档流中应当呈现的位置进行移动。

所以，相对定位的参照物是它本身。

4.绝对定位

绝对定位与相对定位的一大不同之处就是，当我们把一个元素设置成绝对定位，那么这个元素将会脱离文档流，其他元素就会认为这个元素不存在于文档流中而填充它原来的位置。绝对定位元素根据它的参照物移动自己的位置，而参照物则需要根据它祖先元素的定位设置来确定。

所谓根据它祖先元素的定位设置来确定简单理解为：相对于该元素最近的已定位的祖先元素，如果没有一个祖先元素设置定位，那么参照物是body层。

  1. 在祖先元素没定位的情况下，使用absolute。在这种情况下，参考物就是body。
  2. 祖先元素有定位，祖先元素只要设置了值不为position:static之外的值，都视为有定位，并且最近的祖先元素会被设置为绝对定位元素的参照物。在这种情况下，参考物就是最近的祖先元素。
  3. 在没设置left/right、top/bottom的情况下，absolute元素的位置就是该元素在文档流里的位置

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米