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，就是显示在这些文字的下方。
1. span{
2. z-index: -1;
3. }
复制代码
效果图：
按照坐标随意移动

可以通过设置绝对定位元素的top、left、botton、right等属性来移动span
1. span{
2. top:250px;
3. left: 100px;
4. }
复制代码
效果图：

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

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

）

官方 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 - 块状元素 & 内联元素的绝对相对#’体‘位