QQ登录

只需一步,快速开始

搜索
【活动】边做笔记边学习,还能赢取奖学金!
查看: 401|回复: 6

[系列教程] 0 0 2 7 - 块状元素 & 内联元素 的缠绵关系

[复制链接]
累计签到:360 天
连续签到:30 天
最佳答案
76 
发表于 2017-1-18 13:04:19 | 显示全部楼层 |阅读模式

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

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

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

哈哈哈,看到标题点进来的单纯鱼油,你赚到了!

26中我们,设计了一个很酷线的标题。

包括在之前25的图片边框、24的文本字体设计。都回避了一件事情,就是:

元素方位的排列


C3中的元素可以分为两大类型

块级元素(块状元素),矩形的块

行内元素(内联元素),一行或几行的内容集合


拿一个,文案界的名言吧:

文案是关于用户感受的设计

而不是创造这些感受文字的设计

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6. </head>
  7. <body>
  8.         <h1>经典名言</h1>
  9.         <p>文案是关于用户感受的设计<br>
  10. 而不是<span>创造这些感受文字的设计</span></p>
  11. </body>
  12. </html>
复制代码

效果图:
Snip20170118_73.png


简单解释下<span>元素,本身没有任何属性。

<span> 在CSS定义中属于一个行内元素,在行内定义一个区域。

也就是一行内可以被 <span> 划分成好几个区域,从而实现某种特定效果。

<h1>、<p>是块状元素。

<span>是内联元素。

光说不练假把式,用背景色渲染下,你立刻就明白了
  1. <style type="text/css">
  2.                 h1{
  3.                         color: #FFF;
  4.                         background: #000;
  5.                 }
  6.                 p{
  7.                         color:#F33;
  8.                         background: #BFE;
  9.                 }
复制代码

效果图:
Snip20170118_74.png


看到这两个,性感的大矩形框了吗?

h1、p两个的彼此相互隔开的两个矩形,就是“块状”。

再来给<span>元素,添加背景色为淡淡的紫葡萄色吧,#9F88FF
  1. span{
  2.                         color: #FFF;
  3.                         background:  #9F88FF;
  4.                 }
复制代码

效果图:
Snip20170118_76.png


看到了吗,<span>包含的这句话,字体颜色变为白色,背景色葡萄色。

这就是内联元素,说白了,就是为指定行进行添加背景色。

不管是块状元素还是内联元素,大哥都是display属性。
  1. display:block 就是块状元素
复制代码
  1. display:inline 就是内联元素
复制代码


先把<h1>、<p>设置为内联元素:
  1. h1,p{
  2.                         display: inline;
  3.                 }
复制代码

效果图:
Snip20170118_77.png


转换为内联元素后,三个小宝贝儿就前后拼接在了一起。

背景色按照字体默认大小,进行设置。

再来,只把<span>转换为,block:
  1.         span{
  2.                         color: #FFF;
  3.                         background:  #9F88FF;
  4.                         display: block;
  5.                 }
复制代码

效果图:
Snip20170118_78.png


转换为块状元素后,span成了单独一行,不在和上文紧邻。

两种元素之间可以起随意切换,但一定要注意:

块状元素可以包含内联元素和块状元素。

内联元素却不能包含块状元素。


好拗口的定义!

说白了,就是p、h1元素可以设置宽高。

span没法设置行的宽高。

例如,将p、h1宽度设置如下:
  1.         h1{
  2.                         color: #FFF;
  3.                         background: #000;
  4.                         width: 150px;
  5.                 }
  6.                 p{
  7.                         color:#F33;
  8.                         background: #BFE;
  9.                         width: 300px;
  10.                 }
复制代码

效果图:
Snip20170118_80.png


默认的块状元素,是占满整个屏幕,现在分别缩短了。

而span就无法做到这一点,因为他压根儿就不存在什么默认宽度!

他包含的元素宽高是多少,他就是多少





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

评分

参与人数 1鱼币 +5 贡献 +2 收起 理由
alltolove + 5 + 2 感谢楼主无私奉献!

查看全部评分

本帖被以下淘专辑推荐:

1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
累计签到:401 天
连续签到:2 天
最佳答案
3 
发表于 2017-3-5 16:33:00 | 显示全部楼层
本帖最后由 joker11111 于 2017-3-5 16:41 编辑

1111.png

这是个测试

看来并没有预想的测试是<span>来修饰的
2222.png

不过还是找到了一些<span>元素
3333.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-3-5 18:12
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
累计签到:360 天
连续签到:30 天
最佳答案
76 
发表于 2017-3-5 18:12:16 | 显示全部楼层
joker11111 发表于 2017-3-5 16:33
这是个测试

看来并没有预想的测试是来修饰的


测试完成了~
举一反三,title的span呢
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
累计签到:401 天
连续签到:2 天
最佳答案
3 
发表于 2017-3-5 19:40:24 | 显示全部楼层
不二如是 发表于 2017-3-5 18:12
测试完成了~
举一反三,title的span呢

还是不二厉害,哈哈哈,title的span被我吃了
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
累计签到:100 天
连续签到:1 天
最佳答案
0 
发表于 2017-4-24 14:39:49 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>块级元素&内联元素</title>
  6.         <style type="text/css">
  7.                 html,body{
  8.                         height: 100%;
  9.                         width: 100%;
  10.                         text-align: center;
  11.                         background-color: beige;
  12.                         color: red;
  13.                 }
  14.                 a{
  15.                         color: green;
  16.                         background-color: #a3f4f9;
  17.                 }
  18.                 div{
  19.                         background-color: #f5f588;
  20.                 }
  21.                 h1{
  22.                         color: #FFF;
  23.                         background: #000;
  24.                 }
  25.                 p{
  26.                         background-color:#c2edf9;
  27.                 }
  28.                 span{
  29.                         background-color: aqua;
  30.                 }
  31.                 #test{
  32.                         height:200px;
  33.                         width: 300px;
  34.                         color: #FFF;
  35.                         background: #000;
  36.                 }
  37.         </style>
  38. </head>
  39. <body>
  40. <div>
  41.         <h1>经典名言</h1>
  42.         <p>文案是关于用户感受的设计<br>
  43.                 而不是创造这些感受文字的设计
  44.         </p>
  45.         <div id="container">
  46.                 <p>块级标签
  47.                         <span>行级标签</span>
  48.                 </p>
  49.                 <p>
  50.                 块状元素可以包含<span>行级标签</span>(内联元素和块状元素)。
  51.                 内联元素却不能包含块状元素。
  52.                 </p>
  53.         </div>
  54.         说白了,就是p、h1元素可以设置宽高。
  55.         span没法设置行的宽高。
  56.         <br />
  57.         <a href="http://www.fishc.com/" id="first_Js">传送门</a>
  58.         <a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539" id="first_Js2">HTML5-庖丁解牛</a>
  59. </div>

  60. <p id="test">测试宽度和高度</p>
  61. </body>
  62. </html>
复制代码
0021块级元素 内联元素.png
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
累计签到:510 天
连续签到:30 天
最佳答案
0 
发表于 2017-7-17 23:09:10 | 显示全部楼层
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋手机版Archiver( 粤公网安备 44051102000370号 | 粤ICP备11014136号

© 2010-2017 FishC.com GMT+8, 2017-7-28 12:35 Powered by Discuz! X2.5 Theme by dreambred

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