鱼C论坛

 找回密码
 立即注册
查看: 3578|回复: 14

[庖丁解牛] 0 0 2 7 - 块状元素 & 内联元素 的缠绵关系

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

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

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

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

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

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就无法做到这一点,因为他压根儿就不存在什么默认宽度!

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

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


官方 Web 课程:

评分

参与人数 5荣誉 +19 鱼币 +24 贡献 +14 收起 理由
542624047 + 5 + 5 + 3 无条件支持楼主!
上帝也幽默 + 5 + 5 + 3 无条件支持楼主!
睦ちゃん她爹 + 4 + 4 + 3 感谢楼主无私奉献!
隨鈊乄鎍慾 + 5 + 5 + 3 感谢楼主无私奉献!
alltolove + 5 + 2 感谢楼主无私奉献!

查看全部评分

本帖被以下淘专辑推荐:

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

使用道具 举报

发表于 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
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-3-5 18:12:16 | 显示全部楼层
joker11111 发表于 2017-3-5 16:33
这是个测试

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


测试完成了~
举一反三,title的span呢
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-3-5 19:40:24 | 显示全部楼层
不二如是 发表于 2017-3-5 18:12
测试完成了~
举一反三,title的span呢

还是不二厉害,哈哈哈,title的span被我吃了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

使用道具 举报

发表于 2018-4-15 08:57:51 | 显示全部楼层
还有一个行内块元素inline-block
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-6-7 20:47:22 | 显示全部楼层
  1. <!doctype html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>027</title>
  6.         <style type="text/css">
  7.         h1{
  8.                 color:#FFFFFF;
  9.                 background:#000000;
  10.                 width:150px;
  11.                 border-left:8px solid #8FF880;
  12.         }
  13.         p{
  14.                 color:#F33;
  15.                 background:#BFE;
  16.                 width:300px;
  17.         }
  18.         span{
  19.                 color:#FFF;
  20.                 background:#9F88FF;
  21.                 display:block;
  22.         }
  23.         </style>
  24. </head>
  25. <body>
  26.         <h1><i>經典名言</i></h1>
  27.         <p>文案是关于用户感受的<sub>设计</sub><br>
  28.         <s>而不是</s><span>创造这些感受文字的<sup>设计</sup></span></p>
  29. </body>
  30. </html>
复制代码


027.jpg

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

使用道具 举报

发表于 2018-10-18 00:10:23 | 显示全部楼层
  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.         h1 {
  10.             color: #fff;
  11.             background: #000;
  12.             width: 150px;
  13.         }
  14.         
  15.         p {
  16.             color: #f33;
  17.             background: #bfe;
  18.             width: 300px;
  19.         }
  20.         /* h1,
  21.         p {
  22.             display: inline;
  23.         } */
  24.         
  25.         span {
  26.             /* display: block; */
  27.             color: #fff;
  28.             background: #9f88ff;
  29.         }
  30.     </style>
  31. </head>

  32. <body>
  33.     <h1>经典名言</h1>
  34.     <p>文案是关于用户感受的设计<br> 而不是
  35.         <span>创造这些感受文字的设计</span></p>
  36. </body>

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

使用道具 举报

发表于 2018-11-21 17:21:27 | 显示全部楼层
交作业,没有额外改什么,就不放图片了。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         h1{
  8.             color: #FFF;
  9.             background: #000;
  10.             width: 150px;
  11.         }
  12.         p{
  13.             color:#F33;
  14.             background: #BFE;
  15.             width: 300px;
  16.         }
  17.         span{
  18.             color: #FFF;
  19.             background:  #9F88FF;
  20.              /*display: block;*/
  21.         }
  22.         /*h1,p{
  23.             display: inline;
  24.         }*/
  25.     </style>
  26. </head>
  27. <body>
  28.     <h1>经典名言</h1>
  29.     <p>文案是关于用户感受的设计<br>
  30.     而不是<span>创造这些感受文字的设计</span></p>
  31. </body>
  32. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-2-13 13:20:47 | 显示全部楼层
如果一句有多个span,并且想让多个span拥有不同样式该怎么做呢?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-10-29 10:19:32 | 显示全部楼层
作业~
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>让编程改变世界</title>
  6. <style type="text/css">
  7. h1 {
  8.   color:#fd79a8;
  9.   background: #dfe6e9;
  10.   width: 150px;
  11.   /* ext-align: center; */
  12. }
  13. p {
  14.   color:#ff7675;
  15.   background: #ffeaa7;
  16.   width: 300px;
  17. }
  18. span {
  19.   color:#a29bfe;
  20.   background: #636e72;
  21.   /* display: block; */
  22.   /* height: 500px;
  23.   width: 200px; */
  24. }
  25. h1,p {
  26.   /* display: inline; */
  27.   text-align:center;
  28. }

  29. </style>
  30. </head>
  31. <body>
  32. <h1>经典名言</h1>
  33. <p>文案是关于用户感受的设计<br>
  34. 而不是<span>创造这些感受文字的设计</span></p>
  35. </body>
  36. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-3-10 18:41:22 | 显示全部楼层

作业

本帖最后由 小脑斧 于 2020-3-10 18:42 编辑
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>你大哥还是你大哥</title>
  6.         <style>
  7.             h1,p{
  8.                 display: inline;
  9.             }
  10.             p{
  11.                 background: yellow;
  12.                 color: rgb(15, 15, 117);
  13.             }
  14.             h1{
  15.                 background: rgb(54, 49, 49);
  16.                 color: seashell;
  17.             
  18.             }
  19.             span{
  20.                 background: rgb(17, 58, 20);
  21.                 color: rgb(145, 145, 168);
  22.             }
  23.         </style>
  24.    
  25. </head>
  26. <body>
  27.         <h1>经典名言</h1>
  28.         <p>文案是关于用户感受的设计<br>
  29. 而不是<span>创造这些感受文字的设计</span></p>
  30. </body>
  31. </html>
复制代码



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

使用道具 举报

发表于 2020-8-18 19:59:33 | 显示全部楼层
无条件支持楼主!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-3-29 18:05

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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