0 0 2 8 - 块状元素 & 内联元素的绝对相对#’体‘位

不二如是 · 发表于 2017-1-19 12:17:17

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2021-8-11 09:20 编辑

既然在27我们确立了他们二人的关系。

那么，关系有了，就可以进一步，让他们产生位置上滴摩擦啦～

你个坏银，干嘛不点开看看呢？

言归正传哈，位置，其实就是一个属性：

float

但是，他却有，很多种摆法！

你必须要掌握，我下面我列出的基本玩法，然后自行脑洞发挥～

这次，换一个名言，用一个形容”恐怖分子“的。

恐怖分子，就像一只想要大闹瓷器店的苍蝇。

本身很弱小，凭一己之力连一只茶杯也挪动不了！

但是，它可以钻进一头牛的耳朵中，不停的嗡嗡叫，让牛因恐惧和愤怒而发狂。

从而，冲进瓷器店，撞毁一切！

------------------------------------

这次，把<span>放入<p>的中间，制造更加混乱的位置

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
        <title></title>
        <style type="text/css">
                span{
                        color: #FFF;
                        background:  #9F88FF;
                }
</style>
</head>
<body>
        <h1>恐怖分子</h1>
        <p>恐怖分子，就像一只想要大闹瓷器店的苍蝇。本身很弱小，凭一己之力连一只茶杯也挪动不了！<span>但是，它可以钻进一头牛的耳朵中，不停的嗡嗡叫</span>，让牛因恐惧和愤怒而发狂。从而，冲进瓷器店，撞毁一切！</p>
</body>
</html>

效果图：

区块和内联，就默认你已经懂了哈～

float属性，主要是用在将图片浮动在文字左边或者右边的一个属性。

在使用float属性前，有一点请注意：

必须要设置下h1、p的文本宽度，因为默认的两个充满网页，无法产生浮动！

建议，缩小点就行。

h1{
                        width: 133px;
                }
                p{
                        width: 233px;
                }

float属性，只有四个值

right	元素向右浮动
left	元素向左浮动
inherit	默认值。元素不浮动，并会显示在其在文本中出现的位置
none	规定应该从父元素继承 float 属性的值

主要演示float的left、right属性，看一下全部右浮动吧：

h1,p{

                        float: right;
                }

效果图：

看到了不，h1、p，按照从右到左，全部紧靠在页面右边。

同时左浮动：

h1,p{

                        float: left;
                }

效果图：

一左一右呢：

h1{
                        float: left;
                }
                p{
                        float: right;
                }

效果图：

由于浮动的设置，h1和p这两个块状元素，不再是默认的各占一行。

如果你还想让他们各占一行，那么就用clear。

仍是会左右浮动，只是各占一行。

        h1,p{

                        clear: both;
                }

效果图：

知道怎么玩，float属性后，来了解下CSS中的，绝对&相对定位。

相对，根据上下文变化，用金庸大师的话就是：

他强任他强,清风抚山岗。

他横由他横,明月照大江。

那绝对，就是非相对

，你自己指定坐标。

来，继续在上面的代码上修改，把span从内联元素改为块状元素。

span{
              display: block;
                position: relative;
                }

效果图：

span，根据上下文变化而变化，自行调整了位置。

默认情况下，块状元素都是采用relative相对定位方式

修改span为绝对定位方式:

       span{
position: absolute;}

效果图：

厉害了，竟然连位置都变了。。。

虽然绝对定位的元素号称“绝对”，但是实际要有参照物。

像刚才直接，设置绝对定位，产生的结果就是：

span在绝对定位下，不会占用段落空间，其前后文字自动衔接在了一起。

span浮动在段落下方，遮挡住剩余文字。

就像产生了一个”图层“

现在把，p也设置为绝对：

p{
                        position: absolute;

                }

效果图：

图层效果，是不是更清楚了。。。

由于标题，往往不会这么脑残设置浮动在文本上，我们用相对定位就好。

看一下，如何妙手回春，修复span

让span变得不遮挡文字

设置z-index属性为-1，默认为0代表木有深度。

-1，就是显示在这些文字的下方。
```
span{
      z-index: -1;
}
```
效果图：
按照坐标随意移动

可以通过设置绝对定位元素的top、left、botton、right等属性来移动span
```
span{
 top:250px;
              left: 100px;
}
```
效果图：

“-”的向上向左，"+"的向下向右

这位鱼油，如果喜欢本帖子，请订阅专辑-->（传送门）（不喜欢更要订阅

）

官方 Web 课程：

SonOmiga · 发表于 2017-3-5 11:13:09

感觉如果是排版新闻什么的应该很漂亮!

不二如是 · 发表于 2017-3-5 11:27:08

SonOmiga 发表于 2017-3-5 11:13
感觉如果是排版新闻什么的应该很漂亮!

是的，排什么重要

重要的是排盘方法

wei_Y · 发表于 2017-3-29 12:52:24

绝对定位的父级相当于浏览器内容区，
相对定位的父级就是包含他的标签是这样吧。

不二如是 · 发表于 2017-3-29 16:44:56

wei_Y 发表于 2017-3-29 12:52
绝对定位的父级相当于浏览器内容区，
相对定位的父级就是包含他的标签是这样吧。

可以这么理解

但”绝对和相对“，比起用继承来理解，不如直接从位置角度来理解。

绝对，就是自己指定坐标。

相对，按照文档流自行排版

shishunfu · 发表于 2017-4-25 10:01:25

交作业

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>float</title>
        <style type="text/css">
                h1 {
                        width: 133px;
                        float: right;
                }

                p {
                        top:100px;
                        width: 233px;
                        position: absolute;        
                        /*当使用绝对定位时，浮动float属性就失效了*/
                        /*float: right;*/        
                }
                h1,p{
                        clear: both;
                }
                #span {
                        color: #FFF;
                        background: #9F88FF;
                        position: relative;
                        z-index: -1;
                        /*top:100px;
                        left: 100px;*/
                        
/*z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
*/
                }

                #p1{
                        background-color: beige;
                        top:100px;
                        width: 233px;
                        position: relative;
                        float: right;
                }
                #span1{
                        color: #FFF;
                        background: #9F88FF;
                        position: relative;
                        top:100px;
                        right: 100px;
                        /*        绝对，就是自己指定坐标。
                                相对，按照文档流自行排版,当使用top left...将内容移动时，原来的排版布局不变，内容移动了
                        */
                }
        </style>

</head>
<body>
<h1>恐怖分子</h1>
<p>恐怖分子，就像一只想要大闹瓷器店的苍蝇。本身很弱小，凭一己之力连一只茶杯也挪动不了！<span id="span">但是，它可以钻进一头牛的耳朵中，不停的嗡嗡叫</span>，让牛因恐惧和愤怒而发狂。从而，冲进瓷器店，撞毁一切！</p>
<p id="p1">恐怖分子，就像一只想要大闹瓷器店的苍蝇。本身很弱小，凭一己之力连一只茶杯也挪动不了！<span id="span1">但是，它可以钻进一头牛的耳朵中，不停的嗡嗡叫</span>，让牛因恐惧和愤怒而发狂。从而，冲进瓷器店，撞毁一切！</p>
</body>
</html>

aswyamato1989 · 发表于 2017-7-18 02:52:08

交作业！

逢源try一try · 发表于 2017-9-20 08:14:35

clearbothУ

华丽转身123 · 发表于 2018-4-30 16:23:37

后面什么回帖人少了,是不是变懒了

MSK · 发表于 2018-5-5 21:18:51

get新技能

使用<img> + float设置背景

rock5442107 · 发表于 2018-6-9 14:39:06

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>028</title>
        <style type="text/css">
        h1{
                width:133px;
                float:left;
        }
        p{
                /*float失效了,因絕對位置*/
                /*float:right;*/
                width:233px;
                position:absolute;
        }
        span{
                color:#FFF;
                background:#9F88FF;
                position:absolute;
                z-index:-1;
        }
        h1,p,span{
                top:250px;
                left:100px;
                clear:both;
        }
        </style>
</head>
<body>
                <h1>恐怖分子</h1>
        <p>恐怖分子，就像一只想要大闹瓷器店的苍蝇。本身很弱小，凭一己之力连一只茶杯也挪动不了！<span>但是，它可以钻进一头牛的耳朵中，不停的嗡嗡叫</span>，让牛因恐惧和愤怒而发狂。从而，冲进瓷器店，撞毁一切！</p>
</body>
</html>

交作業了 .. 天天想上 .

soulwyb · 发表于 2018-10-20 08:03:04

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        span {
            color: #fff;
            background: #9f88ff;
        }
        
        h1 {
            float: left;
            width: 133px;
        }
        
        p {
            float: right;
            width: 233px;
        }
        
        h1,
        p {
            clear: both;
            position: absolute;
        }
        
        span {
            display: block;
            position: absolute;
            z-index: -1;
            top: 250px;
            left: 450px;
        }
    </style>
</head>

<body>
    <h1>恐怖分子</h1>
    <p>
        恐怖分子，就像一只想要大闹瓷器店的苍蝇。本身很弱小，凭一己之力连一只茶杯也挪动不了！
        <span>
            但是，它可以钻进一头牛的耳朵中，不停的嗡嗡叫
        </span> ，让牛因恐惧和愤怒而发狂。从而，冲进瓷器店，撞毁一切！
    </p>
</body>

</html>

QiaoaiMen · 发表于 2018-11-21 18:00:57

发现如果p和span同时设置成绝对，对span做left，right等操作会以p为基准。如果不指定p为绝对，那么会以整个页面边框为基准。很有趣，慢慢理解。

克里斯保罗 · 发表于 2019-8-15 21:14:01

交作业诶!

克里斯保罗 · 发表于 2019-8-15 21:14:32

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>img</title>
        <style type="text/css">
                img{
                        z-index: -1;
                        position: absolute;
                        left: 100px;
                }
        </style>
</head>
<body>
        <img src="../../img/bg_cat.jpg">
        <h1>一只小猫</h1>
</body>
</html>

你在意在便在 · 发表于 2019-10-30 20:15:47

作业~

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>让编程改变世界</title>
<style type="text/css">
span {
  color:#FFF;
  background: #9F88FF;
  display: block;
  position: absolute;   /* 绝对定位关于最上级元素 body */
  /* position: relative; */   /* 相对于父元素 */
  z-index: -1;  /* 默认为0代表没有深度 -1，就是显示在这些文字的下方。 */
  top:250px;
  left:100px;
}
h1{
    width: 133px;
    /* float: left; */
}
p{
    width: 233px;
    /* float:right; */
    /* position:absolute; */
}
h1,p {
  clear:both;
  float: left;
}

</style>
</head>
<body>
  <h1>恐怖分子</h1>
  <p>恐怖分子，就像一只想要大闹瓷器店的苍蝇。本身很弱小，凭一己之力连一只茶杯也挪动不了！<span>但是，它可以钻进一头牛的耳朵
    中，不停的嗡嗡叫</span>，让牛因恐惧和愤怒而发狂。从而，冲进瓷器店，撞毁一切！</p>
</body>
</html>

huanghuiyv · 发表于 2020-8-18 20:09:16

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        span {
            color: #FFF;
            background: #9F88FF;
            display: bolck;
            position: absolute;
            z-index: -1;
            bottom: 540px;
            right: 960px;
        }

        h1 {
            width: 133px;
            float: left;
        }

        p {
            width: 233px;
            float: right;
        }

        h1, p {
            clear: both;
        }
    </style>
</head>

<body>
    <h1>恐怖分子</h1>
    <p>恐怖分子，就像一只想要大闹瓷器店的苍蝇。本身很弱小，凭一己之力连一只茶杯也挪动不了！<span>但是，它可以钻进一头牛的耳朵中，不停的嗡嗡叫</span>，让牛因恐惧和愤怒而发狂。从而，冲进瓷器店，撞毁一切！</p>
</body>

</html>

宇治松千夜 · 发表于 2021-1-21 23:34:04

none 和inherit 写反了吧

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 2 8 - 块状元素 & 内联元素的绝对相对#’体‘位

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

[庖丁解牛] 0 0 2 8 - 块状元素 & 内联元素 的绝对相对#’体‘位

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

[庖丁解牛] 0 0 2 8 - 块状元素 & 内联元素的绝对相对#’体‘位