鱼C论坛

 找回密码
 立即注册
查看: 4195|回复: 17

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

[复制链接]
发表于 2017-1-19 12:17:17 | 显示全部楼层 |阅读模式

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

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

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

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

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

你个坏银,干嘛不点开看看呢?

言归正传哈,位置,其实就是一个属性:

float


但是,他却有,很多种摆法!

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

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

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

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

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

从而,冲进瓷器店,撞毁一切!

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


这次,把<span>放入<p>的中间,制造更加混乱的位置
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.                 span{
  8.                         color: #FFF;
  9.                         background:  #9F88FF;
  10.                 }
  11. </style>
  12. </head>
  13. <body>
  14.         <h1>恐怖分子</h1>
  15.         <p>恐怖分子,就像一只想要大闹瓷器店的苍蝇。本身很弱小,凭一己之力连一只茶杯也挪动不了!<span>但是,它可以钻进一头牛的耳朵中,不停的嗡嗡叫</span>,让牛因恐惧和愤怒而发狂。从而,冲进瓷器店,撞毁一切!</p>
  16. </body>
  17. </html>
复制代码

效果图:
Snip20170119_105.png


区块和内联,就默认你已经懂了哈~

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

在使用float属性前,有一点请注意:

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

建议,缩小点就行。
  1. h1{
  2.                         width: 133px;
  3.                 }
  4.                 p{
  5.                         width: 233px;
  6.                 }
复制代码


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


主要演示float的left、right属性,看一下全部右浮动吧:
  1. h1,p{

  2.                         float: right;
  3.                 }
复制代码

效果图:
Snip20170119_107.png


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

同时左浮动:
  1. h1,p{

  2.                         float: left;
  3.                 }
复制代码

效果图:
Snip20170119_109.png


一左一右呢:
  1. h1{
  2.                         float: left;
  3.                 }
  4.                 p{
  5.                         float: right;
  6.                 }
复制代码

效果图:
Snip20170119_110.png


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

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

仍是会左右浮动,只是各占一行。
  1.         h1,p{

  2.                         clear: both;
  3.                 }
复制代码

效果图:
Snip20170119_111.png


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

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

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

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


那绝对,就是非相对 ,你自己指定坐标。

来,继续在上面的代码上修改,把span从内联元素改为块状元素。
  1. span{
  2.               display: block;
  3.                 position: relative;
  4.                 }
复制代码

效果图:
Snip20170119_113.png


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

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

修改span为绝对定位方式:
  1.        span{
  2. position: absolute;}
复制代码

效果图:
Snip20170119_114.png


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

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

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

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

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

就像产生了一个”图层“

现在把,p也设置为绝对:
  1. p{
  2.                         position: absolute;

  3.                 }
复制代码

效果图:
Snip20170119_115.png


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

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

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


  • 让span变得不遮挡文字

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

    -1,就是显示在这些文字的下方。
    1. span{
    2.       z-index: -1;
    3. }
    复制代码

    效果图:
    Snip20170119_116.png



  • 按照坐标随意移动

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


    效果图:
    Snip20170119_117.png


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



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


官方 Web 课程:

评分

参与人数 2荣誉 +10 鱼币 +10 贡献 +6 收起 理由
charles_2268 + 5 + 5 + 3 楼主写的非常好,感谢解惑
睦ちゃん她爹 + 5 + 5 + 3 感谢楼主无私奉献!

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-3-5 11:13:09 | 显示全部楼层
感觉如果是排版新闻什么的 应该很漂亮!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-3-5 11:27:08 | 显示全部楼层
SonOmiga 发表于 2017-3-5 11:13
感觉如果是排版新闻什么的 应该很漂亮!


是的,排什么重要

重要的是排盘方法
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-29 12:52:24 | 显示全部楼层
绝对定位的 父级相当于浏览器内容区,
相对定位的 父级就是包含他的标签是这样吧。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-3-29 16:44:56 | 显示全部楼层
wei_Y 发表于 2017-3-29 12:52
绝对定位的 父级相当于浏览器内容区,
相对定位的 父级就是包含他的标签是这样吧。


可以这么理解

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

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

相对,按照文档流自行排版
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 1 反对 0

使用道具 举报

发表于 2017-4-25 10:01:25 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>float</title>
  6.         <style type="text/css">
  7.                 h1 {
  8.                         width: 133px;
  9.                         float: right;
  10.                 }

  11.                 p {
  12.                         top:100px;
  13.                         width: 233px;
  14.                         position: absolute;       
  15.                         /*当使用绝对定位时,浮动float属性就失效了*/
  16.                         /*float: right;*/       
  17.                 }
  18.                 h1,p{
  19.                         clear: both;
  20.                 }
  21.                 #span {
  22.                         color: #FFF;
  23.                         background: #9F88FF;
  24.                         position: relative;
  25.                         z-index: -1;
  26.                         /*top:100px;
  27.                         left: 100px;*/
  28.                        
  29. /*z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
  30. 注释:元素可拥有负的 z-index 属性值。
  31. 注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!
  32. */
  33.                 }

  34.                 #p1{
  35.                         background-color: beige;
  36.                         top:100px;
  37.                         width: 233px;
  38.                         position: relative;
  39.                         float: right;
  40.                 }
  41.                 #span1{
  42.                         color: #FFF;
  43.                         background: #9F88FF;
  44.                         position: relative;
  45.                         top:100px;
  46.                         right: 100px;
  47.                         /*        绝对,就是自己指定坐标。
  48.                                 相对,按照文档流自行排版,当使用top left...将内容移动时,原来的排版布局不变,内容移动了
  49.                         */
  50.                 }
  51.         </style>

  52. </head>
  53. <body>
  54. <h1>恐怖分子</h1>
  55. <p>恐怖分子,就像一只想要大闹瓷器店的苍蝇。本身很弱小,凭一己之力连一只茶杯也挪动不了!<span id="span">但是,它可以钻进一头牛的耳朵中,不停的嗡嗡叫</span>,让牛因恐惧和愤怒而发狂。从而,冲进瓷器店,撞毁一切!</p>
  56. <p id="p1">恐怖分子,就像一只想要大闹瓷器店的苍蝇。本身很弱小,凭一己之力连一只茶杯也挪动不了!<span id="span1">但是,它可以钻进一头牛的耳朵中,不停的嗡嗡叫</span>,让牛因恐惧和愤怒而发狂。从而,冲进瓷器店,撞毁一切!</p>
  57. </body>
  58. </html>
复制代码
0022float.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-7-18 02:52:08 | 显示全部楼层
交作业!
028.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-9-20 08:14:35 From FishC Mobile | 显示全部楼层
clearbothУ
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-4-30 16:23:37 | 显示全部楼层
后面什么回帖人少了,是不是变懒了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-5-5 21:18:51 | 显示全部楼层
get新技能
使用<img> + float设置背景
img.png
2018-05-05 21-18-26屏幕截图.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-6-9 14:39:06 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>028</title>
  6.         <style type="text/css">
  7.         h1{
  8.                 width:133px;
  9.                 float:left;
  10.         }
  11.         p{
  12.                 /*float失效了,因絕對位置*/
  13.                 /*float:right;*/
  14.                 width:233px;
  15.                 position:absolute;
  16.         }
  17.         span{
  18.                 color:#FFF;
  19.                 background:#9F88FF;
  20.                 position:absolute;
  21.                 z-index:-1;
  22.         }
  23.         h1,p,span{
  24.                 top:250px;
  25.                 left:100px;
  26.                 clear:both;
  27.         }
  28.         </style>
  29. </head>
  30. <body>
  31.                 <h1>恐怖分子</h1>
  32.         <p>恐怖分子,就像一只想要大闹瓷器店的苍蝇。本身很弱小,凭一己之力连一只茶杯也挪动不了!<span>但是,它可以钻进一头牛的耳朵中,不停的嗡嗡叫</span>,让牛因恐惧和愤怒而发狂。从而,冲进瓷器店,撞毁一切!</p>
  33. </body>
  34. </html>
复制代码


028.jpg

交作業了 .. 天天想上 .
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-10-20 08:03:04 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title>Page Title</title>
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <style type="text/css">
  9.         span {
  10.             color: #fff;
  11.             background: #9f88ff;
  12.         }
  13.         
  14.         h1 {
  15.             float: left;
  16.             width: 133px;
  17.         }
  18.         
  19.         p {
  20.             float: right;
  21.             width: 233px;
  22.         }
  23.         
  24.         h1,
  25.         p {
  26.             clear: both;
  27.             position: absolute;
  28.         }
  29.         
  30.         span {
  31.             display: block;
  32.             position: absolute;
  33.             z-index: -1;
  34.             top: 250px;
  35.             left: 450px;
  36.         }
  37.     </style>
  38. </head>

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

  48. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-11-21 18:00:57 | 显示全部楼层
发现如果p和span同时设置成绝对,对span做left,right等操作会以p为基准。如果不指定p为绝对,那么会以整个页面边框为基准。很有趣,慢慢理解。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-8-15 21:14:01 | 显示全部楼层
交作业诶!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-8-15 21:14:32 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>img</title>
  6.         <style type="text/css">
  7.                 img{
  8.                         z-index: -1;
  9.                         position: absolute;
  10.                         left: 100px;
  11.                 }
  12.         </style>
  13. </head>
  14. <body>
  15.         <img src="../../img/bg_cat.jpg">
  16.         <h1>一只小猫</h1>
  17. </body>
  18. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-10-30 20:15:47 | 显示全部楼层
作业~
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>让编程改变世界</title>
  6. <style type="text/css">
  7. span {
  8.   color:#FFF;
  9.   background: #9F88FF;
  10.   display: block;
  11.   position: absolute;   /* 绝对定位关于最上级元素 body */
  12.   /* position: relative; */   /* 相对于父元素 */
  13.   z-index: -1;  /* 默认为0代表没有深度 -1,就是显示在这些文字的下方。 */
  14.   top:250px;
  15.   left:100px;
  16. }
  17. h1{
  18.     width: 133px;
  19.     /* float: left; */
  20. }
  21. p{
  22.     width: 233px;
  23.     /* float:right; */
  24.     /* position:absolute; */
  25. }
  26. h1,p {
  27.   clear:both;
  28.   float: left;
  29. }

  30. </style>
  31. </head>
  32. <body>
  33.   <h1>恐怖分子</h1>
  34.   <p>恐怖分子,就像一只想要大闹瓷器店的苍蝇。本身很弱小,凭一己之力连一只茶杯也挪动不了!<span>但是,它可以钻进一头牛的耳朵
  35.     中,不停的嗡嗡叫</span>,让牛因恐惧和愤怒而发狂。从而,冲进瓷器店,撞毁一切!</p>
  36. </body>
  37. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-8-18 20:09:16 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         span {
  8.             color: #FFF;
  9.             background: #9F88FF;
  10.             display: bolck;
  11.             position: absolute;
  12.             z-index: -1;
  13.             bottom: 540px;
  14.             right: 960px;
  15.         }

  16.         h1 {
  17.             width: 133px;
  18.             float: left;
  19.         }

  20.         p {
  21.             width: 233px;
  22.             float: right;
  23.         }

  24.         h1, p {
  25.             clear: both;
  26.         }
  27.     </style>
  28. </head>

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

  33. </html>
复制代码
Snipaste_2020-08-15_13-44-34.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-1-21 23:34:04 | 显示全部楼层
none 和inherit 写反了吧
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 14:26

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表