数据API 案例 开发者 关于
掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
新闻动态 > 媒体报道

CSS定位详解:用4种定位方式画一个冰激凌圣代

如果你用CSS画过冰激凌圣代,那么你一定已经理解了CSS中定位的概念。

每一个学习过CSS的人,都经历过这样一个阶段:对CSS的定位概念一头雾水。在不断的实践和出错之后,才突然搞懂了各种定位方式。

这篇文章的目的,就是要让你搞懂CSS定位。

我们将会讲到下面这些定位属性:

  • 绝对定位(Absolute
  • 静态定位(Static 默认)
  • 固定定位(Fixed
  • 相对定位(Relative


我们要做的这个冰激凌圣代,由四个主要部分所组成:

  1. 玻璃杯
  2. 冰激凌球
  3. 生奶油
  4. 樱桃

HTML形式的冰激凌圣代


如果要用HTML代码来描述这个冰激凌圣代,它应该是这个样子的:

 <body>

    <div class='fullSundae'>

        <div class='cherry'></div>

        <div class='whippedCream'></div>

        <div class='iceCreamScoop'></div>

        <div class='iceCreamScoop'></div>

        <div class='glass'>

            <div class='iceCreamScoop'></div>

            <div class='iceCreamScoop'></div>

            <div class='iceCreamScoop'></div>

        </div>

    </div>

</body>

用图片形式来看是这样的:


在讲解CSS之前,我们先要观察一下:

  • 1.冰激凌球的数量受到杯子高度的限制,不能无限制的往上加。
  • 2.樱桃你想放在哪里都可以,多加几个也没问题。
  • 3.无论有多少个冰激凌球,生奶油都要在最上面的球上。你见过有人把生奶油加在两个冰激凌球之间的吗?反正我没见过。

相对/静态定位:杯子和冰激凌球


如上一张图片所示,这个冰激凌圣代最多只能有5个冰激凌球。假设这5个球的总高度为500px,每个球两两相接。也就说,我们的fullSundae div总高度也是500px。这就是CSS默认的定位方式,静态定位。我们用它来说明,这个高度与任何container div都没有关联。

很好理解,我们要给每一个冰激凌球的高度设置为100px5个冰激凌球一共500px,与fullSundae div的高度一致。而默认情况下,glass div的高度为300px

现在,glass div的高度应该要容纳3个冰激凌球,也就是说glass div的高度是fullSundae div高度的60%。我们现在就来讲解相对定位方式。你可以让glass div使用相对定位,把高度值设定为60%,这样杯子的高度就被指定为fullSundae div高度的60%。

至于杯子里的那三个冰激凌球,如果你用相对定位的方式来定义它们,它们会根据glass div的高度来自动计算自己的高度。鉴于被子里有3个冰激凌球,因此每一个球的高度应该是杯子高度的33.3%。我们现在来看代码:

 .fullSundae{

  height:500px;

  position:static;

}

.fullSundae > .iceCreamScoop{

  height:100px;

}

.glass{

  position:relative;

  height:60%;

}

.glass .iceCreamScoop{

  height: 33.3%;

  position:relative;

}

固定定位:生奶油


固定定位是四中定位方式中最简单的一个。一个固定定位的元素会始终待在一个地方,不管其他元素是否会出现变化。换句话说,生奶油会一直待在最上面的冰激凌球的顶部,无论你是要添加还是减少冰激凌球的数量,生奶油的位置都不会变。它是相对整个body实现定位的,而不是包含它的div

 

冰激凌球的变化不会对生奶油的位置产生影响。

固定定位经常出现在网页的headerfooter中,因为里面的元素位置基本不需要变化。

绝对定位:樱桃


我把绝对定位放在最后讲解,是有原因的:如果绝对定位使用的太频繁,它会导致代码很难维护。你一定要小心。但是在这个例子中,它非常适合用来定义樱桃的位置。

在这个冰激凌圣代中,你可以在任何位置放置樱桃,甚至可以放在杯口的边缘。绝对定位与静态定位、相对定位使用的规则不同。移除使用这种定位方式的元素,也不会对其他元素有任何影响。

在使用绝对定位时,你必须要明确指定元素的位置,否则它在默认情况下会出现在body的左上角。或者,如果母元素使用了相对定位,它会出现在该div的左上角。


观察上图中的冰激凌圣代,多个地方都添加了樱桃,它们不会干扰其他元素。

最后提醒一次:绝对定位元素的位置,取决于最近的使用了相对定位的母元素。如果没有使用了相对定位的母元素,其位置是由整个body所决定的。在我们的例子中,杯子中樱桃的位置,取决于glass div的高度,而不是fullSundae div的高度。

现在去练习吧,当你掌握了4中定位方式之后……给自己买个冰激凌吃吧。


掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
新闻动态 > 媒体报道
CSS定位详解:用4种定位方式画一个冰激凌圣代
发布:2016-09-01

如果你用CSS画过冰激凌圣代,那么你一定已经理解了CSS中定位的概念。

每一个学习过CSS的人,都经历过这样一个阶段:对CSS的定位概念一头雾水。在不断的实践和出错之后,才突然搞懂了各种定位方式。

这篇文章的目的,就是要让你搞懂CSS定位。

我们将会讲到下面这些定位属性:

  • 绝对定位(Absolute
  • 静态定位(Static 默认)
  • 固定定位(Fixed
  • 相对定位(Relative


我们要做的这个冰激凌圣代,由四个主要部分所组成:

  1. 玻璃杯
  2. 冰激凌球
  3. 生奶油
  4. 樱桃

HTML形式的冰激凌圣代


如果要用HTML代码来描述这个冰激凌圣代,它应该是这个样子的:

 <body>

    <div class='fullSundae'>

        <div class='cherry'></div>

        <div class='whippedCream'></div>

        <div class='iceCreamScoop'></div>

        <div class='iceCreamScoop'></div>

        <div class='glass'>

            <div class='iceCreamScoop'></div>

            <div class='iceCreamScoop'></div>

            <div class='iceCreamScoop'></div>

        </div>

    </div>

</body>

用图片形式来看是这样的:


在讲解CSS之前,我们先要观察一下:

  • 1.冰激凌球的数量受到杯子高度的限制,不能无限制的往上加。
  • 2.樱桃你想放在哪里都可以,多加几个也没问题。
  • 3.无论有多少个冰激凌球,生奶油都要在最上面的球上。你见过有人把生奶油加在两个冰激凌球之间的吗?反正我没见过。

相对/静态定位:杯子和冰激凌球


如上一张图片所示,这个冰激凌圣代最多只能有5个冰激凌球。假设这5个球的总高度为500px,每个球两两相接。也就说,我们的fullSundae div总高度也是500px。这就是CSS默认的定位方式,静态定位。我们用它来说明,这个高度与任何container div都没有关联。

很好理解,我们要给每一个冰激凌球的高度设置为100px5个冰激凌球一共500px,与fullSundae div的高度一致。而默认情况下,glass div的高度为300px

现在,glass div的高度应该要容纳3个冰激凌球,也就是说glass div的高度是fullSundae div高度的60%。我们现在就来讲解相对定位方式。你可以让glass div使用相对定位,把高度值设定为60%,这样杯子的高度就被指定为fullSundae div高度的60%。

至于杯子里的那三个冰激凌球,如果你用相对定位的方式来定义它们,它们会根据glass div的高度来自动计算自己的高度。鉴于被子里有3个冰激凌球,因此每一个球的高度应该是杯子高度的33.3%。我们现在来看代码:

 .fullSundae{

  height:500px;

  position:static;

}

.fullSundae > .iceCreamScoop{

  height:100px;

}

.glass{

  position:relative;

  height:60%;

}

.glass .iceCreamScoop{

  height: 33.3%;

  position:relative;

}

固定定位:生奶油


固定定位是四中定位方式中最简单的一个。一个固定定位的元素会始终待在一个地方,不管其他元素是否会出现变化。换句话说,生奶油会一直待在最上面的冰激凌球的顶部,无论你是要添加还是减少冰激凌球的数量,生奶油的位置都不会变。它是相对整个body实现定位的,而不是包含它的div

 

冰激凌球的变化不会对生奶油的位置产生影响。

固定定位经常出现在网页的headerfooter中,因为里面的元素位置基本不需要变化。

绝对定位:樱桃


我把绝对定位放在最后讲解,是有原因的:如果绝对定位使用的太频繁,它会导致代码很难维护。你一定要小心。但是在这个例子中,它非常适合用来定义樱桃的位置。

在这个冰激凌圣代中,你可以在任何位置放置樱桃,甚至可以放在杯口的边缘。绝对定位与静态定位、相对定位使用的规则不同。移除使用这种定位方式的元素,也不会对其他元素有任何影响。

在使用绝对定位时,你必须要明确指定元素的位置,否则它在默认情况下会出现在body的左上角。或者,如果母元素使用了相对定位,它会出现在该div的左上角。


观察上图中的冰激凌圣代,多个地方都添加了樱桃,它们不会干扰其他元素。

最后提醒一次:绝对定位元素的位置,取决于最近的使用了相对定位的母元素。如果没有使用了相对定位的母元素,其位置是由整个body所决定的。在我们的例子中,杯子中樱桃的位置,取决于glass div的高度,而不是fullSundae div的高度。

现在去练习吧,当你掌握了4中定位方式之后……给自己买个冰激凌吃吧。


电话 0512-88869195
数 据 驱 动 未 来
Data Drives The Future