0 0 2 8 - 块状元素 & 内联元素 的绝对相对#’体‘位
本帖最后由 不二如是 于 2021-8-11 09:20 编辑既然在27我们确立了他们二人的关系。
那么，关系有了，就可以进一步，让他们产生位置上滴摩擦啦～
你个坏银，干嘛不点开看看呢？{:9_240:}
言归正传哈，位置，其实就是一个属性：
float
但是，他却有，很多种摆法！
你必须要掌握，我下面我列出的基本玩法，然后自行脑洞发挥～
这次，换一个名言，用一个形容”恐怖分子“的。
恐怖分子，就像一只想要大闹瓷器店的苍蝇。
本身很弱小，凭一己之力连一只茶杯也挪动不了！
但是，它可以钻进一头牛的耳朵中，不停的嗡嗡叫，让牛因恐惧和愤怒而发狂。
从而，冲进瓷器店，撞毁一切！
------------------------------------
这次，把<span>放入<p>的中间，制造更加混乱的位置{:10_254:}
<!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中的，绝对&相对定位。
相对，根据上下文变化，用金庸大师的话就是：
他强任他强,清风抚山岗。
他横由他横,明月照大江。
那绝对，就是非相对{:10_266:} ，你自己指定坐标。
来，继续在上面的代码上修改，把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;
}
效果图：
“-”的向上向左，"+"的向下向右
这位鱼油，如果喜欢本帖子，请订阅 专辑-->（传送门）（不喜欢更要订阅{:10_278:} ）
官方 Web 课程：
https://www.bilibili.com/video/BV1QW411N762 {:9_237:} 感觉如果是排版新闻什么的 应该很漂亮! SonOmiga 发表于 2017-3-5 11:13
感觉如果是排版新闻什么的 应该很漂亮!
是的，排什么重要
重要的是排盘方法 绝对定位的 父级相当于浏览器内容区，
相对定位的 父级就是包含他的标签是这样吧。 wei_Y 发表于 2017-3-29 12:52
绝对定位的 父级相当于浏览器内容区，
相对定位的 父级就是包含他的标签是这样吧。
可以这么理解
但”绝对和相对“，比起用继承来理解，不如直接从位置角度来理解。
绝对，就是自己指定坐标。
相对，按照文档流自行排版 交作业
<!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> 交作业！
clearbothУ 后面什么回帖人少了,是不是变懒了 get新技能{:10_256:}
使用<img> + float设置背景
<!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>
交作業了 .. 天天想上 . <!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> 发现如果p和span同时设置成绝对，对span做left，right等操作会以p为基准。如果不指定p为绝对，那么会以整个页面边框为基准。很有趣，慢慢理解。 交作业诶! <!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> 作业~
<!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> <!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> none 和inherit 写反了吧
页:
[1]