23.尚硅谷_HTML&CSS基础_内联和块元素.avi原创

但是讲了一下我们这个HBO的这一个这个基本的使用，然后呢，接下来我们来说这么几个这个标签啊，再补充几个标签，我们这里边要说两个概念啊，说两个概念，诶我们叫什么呢？诶叫做一个块和我们这个内联啊，块和我们这个内联，什么叫块和内联呢？其实是两个东西，别在这写了，我们叫什么呢？块元素和我们这个内联元素，和我们这个内联元素，那什么叫块元素，什么叫内联元素呢？那这里边我们要先说两个标签，我们两个比较常用的标签，一个叫做什么呢？叫做div，还有一个叫什么呢？一个叫做SPA啊，这两个我们会都会用的比较多，我们先说一下这个div，我们来看div有什么特点啊，Div这里边我来写个字叫什么呢？我是一个这个div保存，然后直接在我们这个火狐里运行，一打开以后，是不是看到一个这么一个东西啊，你会发现这东西你写到这跟没用div是不是没啥区。

别啊，诶没啥区别，那这里边我们需要对比一下，我再写两个CTRLCCTRLV，我是不是写了两个电位啊，诶来我们再看效果，我这一刷新你发现什么效果，上边一个是不是下边一个呀，两个第你会发现这两个字干嘛了。是不是各占一行啊，哎，各占一行，那我们来说一下这个div，你说div是什么呢？诶div就是一个块元素，那什么叫块元素呢？所谓的这个块元素就是什么呢？就是会独占一行的一个什么呀，独占一行的元素，你看我们现在这个div，他是不是就这么我是一个div这么几个字啊，但是你会发现他会发发现什么，他后边其他元素还过得来，过不来了，是不是过不来了，哎，他自己会独占一行啊，独占一行，那这里边我们来看一下，我们要看的更明显一点干嘛呢？我们分别给这两个div，给它设置一个什么呀，背景颜色啊背景颜色那这里边我直接写一个这个带我们就直接写那两样式了，怎么设置背景颜色呢？叫做一个background，一个什么呀，Color，诶，Background color background背景color是一个什么呀，颜色，给它来一个什么呀？来一个这个red啊，来个red，然后把这东西CTRLCCTRLV粘过来，这来什么呀？来一个这个。

Yellow啊，这一个是黄色的div，一个是什么呀？红色div我这一保存，然后一刷新走，你发现什么了，我这div是不是整个从左边到右边到头来呀，这黄的是不是也是从左边从右边一直到头来呀？诶虽然它的内容只有这么点，但是注意它也会干嘛呀，独占一行，所以注意块肌元素的特点就是什么呀，会独占一行，那有同学说了，老师他独占一行是不是因为它太宽了，后边没有地方了呀，那我如何把这个D位变得什么呀？变得窄一点是不是就行了呀？哎，咱们来看看啊，来我给它设置一个宽度，宽度叫什么呀？叫做一个外外，我来一什么呢？我来一个200个像素，200个像素以后，它的宽度是不是变窄了呀，我们来看效果啊，我这一刷新走，你是不是变窄了呀，大家注意第二个元素上来了吗？没上来，但同学说了，那是不是因为第二个元素太宽了呀？诶，那咱们干脆干嘛呀。

第二个元素我们也给它设置一个什么呀，宽度现在是不是两个都是200呀，来保存，我们来看一刷新。上来了吗？诶，那我们先说这一块位置是不是足以容下这两个元素啊，但家注意这元素它有没有上来，没有上来，所以注意块级元素即使它再窄，它也会干嘛呀，也会独占一行啊，也会独占一行，所以注意什么叫块元素啊，块元素就是嘛呀，会独占一行的元素，无论无论它的这个什么呀，诶内容多少有多少，它都会什么，它都会独占，哎，一整行啊，独占一整行，这叫什么呀？这个块元素可以说就是什么呀，老霸道了是吧？哎，别人不能和他干嘛呀，在一起叫什么呀？这叫卧榻之侧是吧？体容他人酣水是吧？哎，其他的元素都过不来，所以叫快元素会独占一行，那我们说我们还看过哪些块元素P，诶我们说我们这写个P元素，我们来看这来一个P，我是一个这个P标签。

直接复制啊，Ctrl shift复制保存一刷新走你干嘛了，是不是也是独来一行啊，诶还有谁呀？诶还有我们什么呀？诶H1是吧，诶H1我们这个H1啊H2啊H3等等这些是不是都是啊，哎，都是啊，这些都是我们这个快元素，刚才同学说BR，其实BR也可以说什么呀，也是元素啊，也是元，因为都会独占一行啊，多占一行，但是这不是特别明显，我们就不理它了啊这是我们说元素，诶那我们说完半天了，我们说这个BV它是个快元素，那我们说了这P是快元素，是表示一个什么呀段落H1是个快元素，是表示标题，H2是快元素表也是表示标题，H3是不是也表示标题啊？那这个什么玩意儿啊，Div也是一个块，Div表示什么意思呀？Div表示什么意思呀？诶div什么呀，Div这个标签它可以说什么呢？它没有任何语义啊，没有任何语义就是一个什么呀，就是一个这个纯粹的。

什么呀，诶快元素啊，一个纯粹的快染素，并且什么呢？并且不会为它里面的这个什么呀，诶元素设置任何的什么呀，默认样式，不像我们P元素，你看P元素它这不上边有一个距离啊，但是你看div有没有距离啊，没有距离，所以注意div没有设置任何默认样式，那它是干嘛的呀？诶div元素主要用来对我们这个页面进行什么呀，进行布局的，什么叫布局呀？诶举例子我们说了，你上网的时候看到网页可能它会会有这么一个结构，最上边可能是一个什么呀，有一个这么一个，诶广告啊，或者它这个logo，然后呢，下边是一个什么呀，有一个导航条，导航条，然后左边可能有一个什么呀，有一个侧边栏，也可能是一个导航条，然后这是一个什么呀，能是一个内容是吧，然后这儿可能是一个边栏啊，放一些新闻什么的，然后这里边可能底边是一个什么呀，是一个这个底部。

放一些版权信息，你会发现我们整个网页是不是分成这么一一块一块的呀，诶那这些分的一个区域就干嘛呀，就是使用我们这个div来分区的，所以这些东西呢，Div主要是用来干嘛的呀，对我们页面进行布局的啊，所以注意div不像我们这个P元素，不像我们H1，它没有什么呀，没有语义，如果非得说有语义的话，它表示的就什么呀，表示一块区域啊，一块区域啊，这是我们说的块元素，然后我们说了块元素会独占一行，然后我们这来一个HR，那下边一个概念我们叫什么呀？叫做内联元素，内联元素我们是相对来，相对于这个块元素来说的，我们来看谁呢？一个元素叫做什么呢？SPA来我是一个SPA保存，我们来看效果，一刷新SPA是不是跟这的呀？诶SPA跟这儿呢，那我怎么看它的特点呀，我得干嘛呀，我得再写一个，再写一个干嘛呀，我看看他是不是独占一行吧，诶独占一行保存，我们来一刷新走你干嘛了，这两个是。

并排过来了，哎，并排过来了啊，那这里边儿我们来说败。SPA是一个什么呀？是一个内联元素啊，是一个内联素，或者也可以叫什么呀，叫做恒内元素啊，我们说内联元素跟说这个行内元素都是什么呀？一个意思啊，一个意思，那我们来说所谓的什么呢？所谓的行内元素指的是什么呢？哎，指的你看我这SPA他有没有说占一整行啊，那他占多大地儿啊。是不是只占自身大小啊？哎，它有几个字是不是占多大地儿啊？哎有几个地儿有几个字就占多大地儿，哎指的是什么呢？哎纸占什么呀？哎自身大小的一个什么呀？元素它不会什么不会占用，哎一整啊，不会占用一整行，所以这里边就是什么呀，它们的区别就是我们的块元素会独占一整行，而哪两元素只会独占什么呀？不会独占，它只占什么呀，自身大小，也就是说它后边是不是可以跟着其他元素，哎跟着其他元素，诶那问题又来了，假如说我这个span太多了。

CTRLC啊复制几个是不是太多了呀，我们来看效果啊，一刷新诶这这你发现什么了，是不是一行容不下了，容不下以后干嘛呀，是不是自动换行呀，哎，自动换行啊，所以当一行容不下的时候，它会自动换行啊这是我们说这个内联元素一个特点，它只会占用什么呀，自身的一个大小啊，自身一个大小，那我们来说我们常见的内敛元素什么，我们学过什么呀，常见的这个诶内敛元素，当然我们现在学还没学全，我们学什么了，是不是A就是啊，哎，A就是好像除了A，诶对G也可以说是一个内联元素，但是这个IG呢，有点小区别啊，和传统的联元素有点小区别，等会我们讲这个核模型我们再说啊，MG也可以说是一个内联元素，包括我们这个FFRI啊，这些都可以说是一个内联元素，包括我们这个死SPA啊，都可以说是一个内敛元素，他们只占自身的一个大小，诶，那我们来说死SPA它有没有什么语言，诶，死SPA和我们这个div一样。

SPA也没有任何的什么呀，语义，那没有语义，这个标签是用来干嘛的呢？我们说SPA标签专门用来干嘛呢？诶选中我们这个文字，然后什么呢？然后为这个文字来设置样式啊设置样式什么意思呢？那比如说现在啊，我这里边有一段文字来，诶我是一段文字，现在假设干嘛呢？我想通过CSS来为这一段文字来设置样式，那这里边我们就面临一个问题怎么办？我要想为这段文字设置样式，我要不然我是不是在标签里边写一个style属性啊，要不然我是不是就通过选择器来选中这段文字啊，但是问题来了，这段文字我现在能选中吗？

不能选中吧，诶因为没有标签去把它括起来，那所以这时候干嘛呢，像这种文字我就可以干嘛呀，用SPA给它。圈起来，然后干嘛呢？我是不是可以通过SPA，我在这儿来一个什么呀，STEM就可以来给他设置什么了，是不是设置样式了，但是如果没有这个SPA，我们能不能设置啊，哎，就不能设置了，所以死SPA呢，主要是用来干嘛的，为我们这个元素，为我们这个文字来设置样式的啊设置样式的好，那这一块我们说了两种元素，一个叫块元素，一个内量元素，块元素典型的就是我们这个div，内联元素典型的就是我们这个死败，那我们来说它们俩的一个作用啊，来说一下块元素主要用来什么呀？页面中的什么呀，布局啊，主要用来对页面进行，哎，主要用来做我们这个页面中的一个布局，而我们的什么呢？我们内联元素，诶，主要用来为我们这个文本来干嘛呀，诶为主要用来选中文本设置什么呀，设置我们这个文本的一个样式的啊，设置我们文本的样式的，那这里边我们要再说一遍，一般什么呢？一般情况下，一般情况下纸干嘛呢？

只使用我们的这个块元素去干嘛呢？去包含内联元素，而不会使用我们的内联元素去干嘛呢？去包含一个块元素，那什么意思？一般我们会这么写，我在div里放一个什么呀，放一个SPA这个东西是什么呀，是正常的，但是我们一般不会怎么写呀，不会在紫SPA里再放什么呀，Div，所以注意我们一般用块去包裹内联，但是轻易绝对不会用内联去包裹什么呀块，因为我们都是用块去干嘛呀，去布局的啊，去布局的啊，一定要注意啊，这是一个问题，然后呢，再说一个问题，还有什么问题呢？诶你们说A元素有一个特点，A元素干嘛呢？可以包含任意元素啊，A元素可以包含任意元素，什么意思啊，我这是不是一个div啊，来，我给它套一个A。

行不行，行不行，保存我们来看效果，直接一刷新，诶来看这div是不是变变模样了，我这一点你看是不是整个div都变成一个超链接了，哎，整个这个div就可以点击了，注意A可以包含任意的元素，什么元素都行，不论是快元素还是内类元素，你是H1也好，H2也好，是D也好，各种各样的包括是P也好，都可以用我们这A伽嘛药套上啊，都可以用A这套套上，但是但是什么呀，除了它本身啊，除了它本身A元素可以包含任意元素，除了它本身什么意思啊？诶A里边干嘛呀，再放一个A，我是一个超链接这玩意儿行不行不行啊，这个是错的啊，这个是错的，保存来看效果一刷新走你，哎哟。

这打脸了是吧？行了，他咋行了呀？哎，浏览器是不是会最尽最大的可能去给你正确解析啊，虽然你写的不讲究，但是他给你解析出来了吧，我们来看看他怎么解析的啊，他解析的肯定特别有意思，来直接选中这个A一看，哎哟。这是一个A，这是不是又一个A啊，你会发现浏览器他把我这一个超链接是不是给我解析成两条链接啊，换句话说，他把我里边这超链接是不是给我摘出来了，诶给我摘出来了啊，所以这块注意啊，我们这个超链接它这么一个特点啊，它要干嘛呀？诶它可以包含任意元素，你看我这div是不是都在这A里边了，但是注意它就是不能包含它什么呀，它自己啊，不能包含它自己，所以注意啊，A可以包含任意元素，不能包含它本身还有一个特点叫什么呀，还有一个我们的P元素，P元素我们说是什么呀。

块元素啊，P元素是个块元素，P元素虽然是个块元素，但是它有个特点，它干嘛呢？它不可以包含任何其他的块元素啊，P元素中不能包含任何其他的块元素，什么意思？来我这写一个P标签，P标签里放个死SPA行不行？哎，一点问题也没有，因为死SPA是不是那两锁，哎，那锁我这保存一刷新来直接fire bug看一眼死SPA一点开P里边放SPA没问题吧？诶，但是如果你往P这个里边放了一个什么呀。Div这玩意行不行？Div是什么呀？块元素啊，我们说了P元素里边不能放任何的块元素啊，不能放任何矿元素来我这一刷新害的虽然也显示了是吧，但是我们来看它是怎么显示的，完了是不是把D给摘出来了呀？诶把D给拿出来了，所以它并没有真正的放在这个P元素里边，所以注意啊，P元素里边不能放任何的矿元素啊，不能放任何矿元素，只能放这个内联元素，好，那这个就是我们说一个块元素，还有一个这个内敛元素，或者叫做行内元素，但是注意啊，块元素和内联元素这两个概念实际上在H5里边已经给去除了，严格来讲在H5里边已经没有块元素和内联元素这个概念了，哎，为什么没有了，H5里边使用了一个非常非常复杂的一个东西，叫做什么呢？叫做一个内容模型来解释这个块元素，有这个内敛元素，它这个内容模型它好像分了是八种还是九。

内容模型，然后把我们这个变得干嘛呀，极为复杂，那个东西我们现在就没有必要去搞清楚，没有必要去研究它了，所以你呢，你就按照我给你这个思路，给你这个东西去记，我们还是习惯的去称什么呀，块元素还有什么呀，内链元素，你就记住这些特点就OK了啊，块元素独占一行，内联元素只占它自身的一个大小，块元素主要用来布局，内联元素主要用来选中文字，一般只用块元素去包含内联，而不会用内联去包含块A可以包含任意元素，包括快元素，包括内来元素，但是不能含什么呀，它自身，而P元素不能包含任何的什么呀，快元素都不能说其他的快元素了，P元素里边你也不能放什么呀，哎，你说往P里边再放一个屁，哎，行不行啊，哎不行啊不行，好这里边注意啊，P元素里边不能放任意的抗元素啊，不能放任意抗元素，好这是我们说内联还有这个。