首页 > Web开发 > 详细

2016.3.14__CSS 定位__第六天

时间:2017-08-19 12:14:36      阅读:266      评论:0      收藏:0      [点我收藏+]

假设您认为这篇文章还不错。能够去H5专题介绍中查看很多其它相关文章。

CSS 定位机制

CSS中一共同拥有三种基本定位机制:普通流、浮动、绝对定位。


假设不进行专门指定。全部的标签都在普通流中定位。


块级元素从上到下一个接一个的排列,框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。

能够使用水平内边距、边框和外边距来调整它们之间的间距。


position属性

通过position属性。我们能够选择4种不同类型的定位,这会影响元素框生成的方式。
包括4个属性值:staticrelativeabsolutefixed

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

  • relative : 元素框偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍然保留。
  • absoulte : 元素框从文档流中全然删除,并相对于其包括块定位。

    元素原先在正常文档流中所占的空间会关闭。就好像元素不存在一样。

    元素定位后生成一个块元素,而不论原来它在正常文档流中生成何种类型的框。

  • fixed : 元素框的表现相似将position设置为absoulte,只是其包括块是浏览器窗体。


代码展示

position: static;

staticposition属性的默认值。无特殊定位。均为正常定位。


position: reletive;

HTML代码:

<p class="p1">
    我是p1
</p>
<p class="p2">
    我是p2
</p>
<p class="p3">
    我是p3
</p>

CSS代码:

.p1 {
    position: relative;
    left: 30px;
}
.p2 {
    position: relative;
    right: 30px;
}

效果图:
技术分享

解释:

  • position: relative;參考的是自己原来得位置。
  • 第一行文字设置postion为relative,这并不会造成什么反应。可是我们还给p1设置了left: 30px;。这就会使元素距离左側产生30px的间距。

  • 相同。第二行文字设置right: 30px,会使元素距离右側30px的间距。就产生了跑到屏幕外面的情况
  • 第三方没有做不论什么处理。正常显示
  • 注意,一定要设置好position: relative;,否则toprightbottomleft是不起作用的。


position: absoulte;

HTML代码:

啦啦啦啦啦
<h1 class="h1">我是h1大标题</h1>

CSS代码:

.h1 {
    position: absolute;
    top: 100px;
    left: 100px;
}

没有设置CSS样式的样子:
技术分享

设置了CSS样式后的样子:
技术分享

解释:

  • postion: absolute;參考的是自身的包括块,也就是自己的父视图
  • 当设置了position: absolute;属性之后,标签的位置就变得绝对了。这个时候我们设置toprightbottomleft当中的不论什么一个属性。都能够设置标签的位置。
  • 注意,一定要设置好position: absolute;,否则toprightbottomleft是不起作用的。


position: fixed;

HTML代码:

<p class="one">
    我是p one
</p>
<p class="two">
    我是p two
</p>

CSS代码:

.one {
    position: fixed;
    top: 100px;
    left: 30px;
}
.two {
    position: fixed;
    top: 50px;
    right: 30px;
}

效果展示:
技术分享

解释:

  • position: fixed;參考系是浏览器的窗体
  • 当给标签设置了position: fixed;属性之后。这些标签就仅仅会相对于浏览器窗体进行位置的设定。忽略网页的滚动
  • 相同。假设不设置postion: fixed;属性。而是直接设置toprightbottomleft都不会起作用

參考文章:http://www.w3school.com.cn/css/css_positioning.asp

关于界面排布优先级的问题 z-index

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style media="screen">
    div{
      width: 100px;
      font-size: 50px;
      position: absolute;
      height: 100px;
    }
    .a{
      background-color: red;

      left: 0;
      top: 0;
        /*设置优先级。数字越大,放置越靠前*/
      z-index: 3;
    }
    .b{
      background-color: blue;
      left: 40px;
      top: 40px;
      z-index: 2;
    }
    .c{
      background-color: green;
      left: 80px;
      top: 80px;
      z-index: 100;
    }
  </style>
</head>
<body>
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
</body>
</html>

关于界面元素框偏移
偏移前:

技术分享
偏移后:
技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .wrap{
        width: 300px;
        height: 300px;
        border: 1px solid red;
        margin: 100px;
        padding: 100px;
        position: relative;
        padding-left: 0;
    }
    .inner{
        width: 200px;
        height: 200px;
        background-color: green;
        padding: 50px;
        position: relative;
    }
    .content{
        width: 50px;
        height: 50px;
        background-color: red;
        position: absolute;
        left: 0;
    }
    </style>
</head>
<body>
    <!-- 
    position:absolute;默认是相对于窗体进行定位
     -->
    <div class="wrap">
        <div class="inner">
            <div class="content"></div>
        </div>
    </div>
</body>
</html>

2016.3.14__CSS 定位__第六天

原文:http://www.cnblogs.com/zhchoutai/p/7395706.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!