008 - 相拥和独行

不二如是 · 发表于 2018-6-8 17:42:31

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

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

x

本帖最后由不二如是于 2021-6-4 17:35 编辑

上一集：007 - 前端工程狮的自我修养

在线视频：

课程思维导图

猛戳

登录/注册后可看大图

超清

1、块级和行内

<!DOCTYPE html>
<html>
<head>
<title>相拥和独行</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="小甲鱼">
</head>
<body>
<a href="http://bbs.fishc.com">论坛</a>
<a href="http://fishc.taobao.com">淘宝</a>
踽踽独行
形单影只
</body>
</html>

复制代码

为什么在代码中同样是一行一行写的标签，在浏览器中显示效果就不一样呢？

这就是本节课的重点：

元素分类

看一下w3schools的官方关于元素显示类型的定义：

定义在说：

每个HTML元素都有自己的默认显示类型，大多数默认值要不是块级要不就是行内。

一个元素在浏览器中独立占一行的就是块级元素。

多个元素在浏览器中挤在一起的就是行内元素。

2、对比

一个小尴尬

先来看这段代码：

<!DOCTYPE html>
<html>
<head>
<title>相拥和独行</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="小甲鱼">
<style type="text/css">
span{
color: red;
}
</style>
</head>
<body>
黑夜给了我黑色的眼睛
我却用它寻找光明
</body>
</html>

复制代码

上面的代码说明，我们可以在块级元素中添加行内元素。

这是肯定有鱼油会问：

我能不能在行内中添加块级呢？

这个问题很尴尬，仔细想一想，都不能叫做问题。。。

既然是行内元素了，加一个块级进去，它还会自动换行，跟没加一样。

块级中可以写行内。

行内中只能写行内，写了块级，块级还是块级。

3、为什么要有块级和行内？

HTML要求浏览器将连续的空白字符合并为一个空格。

这种做法很有道理，因为可以把HTML文档布局和内容布局区别开来。

下面代码中的文章，取自吹水阁：#Web-08讲的配文——忘了"现实世界" |【第七弹】

代码略长，鱼油可以快速滚动下去，然后复制：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="鱼C工作室">
<title>08讲</title>
</head>
<body>
"这在现实世界中完全行不通。"当你向人们介绍一个新创意时，人们总是这么说。
这个"现实世界"听起来是如此令人沮丧，貌似所有的新创意、新提案以及外来概念总是会在"现实世界"中碰壁。
在这里，能够利于不败之地的都是那些人们耳熟能详、习以为常的食物，即使这些东西已经漏洞百出或陈腐低效。
撕开这个"现实世界"的遮羞布后，你会发现栖居其中的人们都充满着悲观和绝望的情绪。他们期待看到新概念被斩落马下，他们认为这个社会还没有准备好迎接变革，也无力引发变革。他们手中的蛋糕依旧只能独享。
更糟糕的是，他们想给其他人灌迷魂汤，让人们也陷进他们的坟墓里。
如果你对未来充满期待并野心勃勃，他们就会试图说服你不要为不可能实现的想法去浪费时间。
不要相信他们。
这个世界对于他们来说，可能是"现实"的，但并不意味着你也要生活在这样的"现实"世界中。
在2010年就成立的鱼C深知这一点，我们合乎社会的一切法律规章制度，但在很多方面都没有通过"现实世界"的测评。
在"现实世界"中，你不可能让十几个人分散在963.4057万平方公里上的不同城市办公；
在"现实世界"中，你不可能不靠任何销售人员或广告投放就赢得5，60W用户的信赖；
在"现实世界"中，你不可能将自己的编程技巧透露给其他人。
问题是，在鱼C，这些事情，我们都亲力亲为，并且干得轰轰烈烈。
"现实世界"并不存在，只是一层窗户纸，只是某些特定领域的利益既得者为了保护自己的奶酪而编织出来的蒙眼纱帐。
记住，这个跟咱们一点关系也没有
<a href="http://bbs.fishc.com/forum-33-1.html" target="_blank">鱼C-吹水阁</a>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="鱼C工作室">
<title>08讲</title>
</head>
<body>
"这在现实世界中完全行不通。"当你向人们介绍一个新创意时，人们总是这么说。
这个"现实世界"听起来是如此令人沮丧，貌似所有的新创意、新提案以及外来概念总是会在"现实世界"中碰壁。
在这里，能够利于不败之地的都是那些人们耳熟能详、习以为常的食物，即使这些东西已经漏洞百出或陈腐低效。
撕开这个"现实世界"的遮羞布后，你会发现栖居其中的人们都充满着悲观和绝望的情绪。他们期待看到新概念被斩落马下，他们认为这个社会还没有准备好迎接变革，也无力引发变革。他们手中的蛋糕依旧只能独享。
更糟糕的是，他们想给其他人灌迷魂汤，让人们也陷进他们的坟墓里。
如果你对未来充满期待并野心勃勃，他们就会试图说服你不要为不可能实现的想法去浪费时间。
不要相信他们。
这个世界对于他们来说，可能是"现实"的，但并不意味着你也要生活在这样的"现实"世界中。
在2010年就成立的鱼C深知这一点，我们合乎社会的一切法律规章制度，但在很多方面都没有通过"现实世界"的测评。
在"现实世界"中，你不可能让十几个人分散在963.4057万平方公里上的不同城市办公；
在"现实世界"中，你不可能不靠任何销售人员或广告投放就赢得5，60W用户的信赖；
在"现实世界"中，你不可能将自己的编程技巧透露给其他人。
问题是，在鱼C，这些事情，我们都亲力亲为，并且干得轰轰烈烈。
"现实世界"并不存在，只是一层窗户纸，只是某些特定领域的利益既得者为了保护自己的奶酪而编织出来的蒙眼纱帐。
记住，这个跟咱们一点关系也没有
<a href="http://bbs.fishc.com/forum-33-1.html" target="_blank">鱼C-吹水阁</a>
</body>
</html>

复制代码

我们虽然对内容进行了排版，但是浏览器根本不在乎。。。

所以我们就需要通过标签的类型或者CSS样式，才能进一步设置最终浏览器显示页面的效果。

如果想达到上面的样子，只需要为每一段文本添加：

最后通过 让行内元素a，换行显示。

关于元素分类和属性的分类

随着学的知识点越多，鱼油可能遇到：

<img>明明是行内元素，怎么又是行内块了？

没错，问题就是明明只有两种类型：行内元素和块级元素。

怎么又出来一个“行内块”？

是不是小甲鱼老师讲错了？

看一下常见的块级和行内元素分类。

块级元素：

行内元素：

没错，从官方元素分类上讲，<img>的确是行内元素。

所以，咱们可爱的小甲鱼老师并没有讲错哦～

那么行内块的梗又是什么意思呢？

此处，就要涉及到未来我们要学习到的CSS3了。

在CSS3中，元素有一个属性，display，用来设置元素的框的类型。

而display属性，有10余值可以设置，其中一种值是inline-block：

具体细节，鱼油可以看CSS3宝典，先过过眼瘾，后面课程会好好讲到。（传送门）

哇塞，原来：

游客，如果您要查看本帖隐藏内容请回复

img元素默认是行内元素，往往在日常开发中，通过display设置为inline-block更易于样式设置。

至于行内块（剧透：综合行内和块级的优点）类型有什么优势，留到后面我们讲CSS时再来好好填坑～

课后作业，完成了吗？

传送门

登录/注册后可看大图

下一集：009 - 所见即所得

如果有收获，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅专辑☞（传送门）（不喜欢更要订阅

）

登录/注册后可看大图

rollerpig · 发表于 2018-6-15 23:20:52

下一集应该要讲浮动和定位了吧

NinHeaven · 发表于 2018-7-5 23:10:43

floride · 发表于 2018-7-24 16:07:42

syf040916 · 发表于 2018-8-11 01:02:05

我要看~~~~~

AVAN · 发表于 2018-9-1 23:40:30

原来

鲫鱼1 · 发表于 2018-9-13 15:49:02

无敌太刀 · 发表于 2018-10-1 19:33:54

······

782173264 · 发表于 2018-10-23 12:44:49

累啊啊啊

刹那疾风 · 发表于 2018-11-26 15:29:12

笔记每次都要捧场

cjj735243954 · 发表于 2018-12-12 20:00:36

拯救世界的同学 · 发表于 2019-1-10 10:34:46

参见大大，学习一下

甲鱼小粉丝啊 · 发表于 2019-1-23 12:18:55

wan

chenzhiqing · 发表于 2019-2-7 10:41:07

李小控 · 发表于 2019-2-13 09:33:51

辛苦了

Nevermorewin · 发表于 2019-2-14 10:46:12

罗夏_Rorschach · 发表于 2019-3-22 19:49:57

为什么

飞奔的上校 · 发表于 2019-3-23 13:11:28

紫殇 · 发表于 2019-4-16 16:51:56

666666666

天地~玄黄 · 发表于 2019-7-16 17:28:20

emmm，原来如此

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 008 - 相拥和独行

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

评分

本帖被以下淘专辑推荐: