QQ登录

只需一步,快速开始

登录 | 立即注册 | 找回密码
查看: 634|回复: 7

[系列教程] 0 0 2 8 - 块状元素 & 内联元素 的绝对相对#’体‘位

[复制链接]
最佳答案
96 
累计签到:473 天
连续签到:1 天
发表于 2017-1-19 12:17:17 | 显示全部楼层 |阅读模式

马上注册加入鱼C,享用更多服务吧^_^

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

x
本帖最后由 不二如是 于 2017-2-24 13:15 编辑

既然在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


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







这位鱼油,如果喜欢本系列HTML帖子,请订阅 专辑传送门)(不喜欢更要订阅
p蝚q p蝚q gnon="k gno8;阅读模式
mbw xl xl2 class; }<7893chasaquo; >喜5ml"庖丁解牛|不: 393fon属 " >本rn; >)
1.> 务必选择【 color=r】;2.> <给他们【苧ee】作为奖励;> >3. 善用【ht: lass】功能歉里可能有您樱蘲=ro4. 粘贴绦请点击2-24縩g>的 <> 按钮,否则亩远绦可能会被“吃掉fon法

MsoN/onllas【招生】15PB:信息c-f-教育第23期报名煌法开班时间" al年11月20日)。 15PB做信息c-f-人才入&l转站《IT领域培养输送c-f-人才。培养黑客/dd>、软件逆向、编程相关人才n法: 1江。詔>
)rn;礱abbdd"seI
阅读>当前rn;" />|n>v og&rviet.id="pD=vie parsD=newthreenuit=men-= p'鱼C论坛');retu举报o">阅读膇gnore_
li>