尚硅谷前端基础 (44)

好，说完了我们这个颜色单位，那么关于我们这个CSS的一些基础知识呢，我们就说的差不多了，包括我们的一些选择器啊，包括我们一些呃，什么像素啊，百分比啊，什么em啊，这些单位都说完了，那接下来我们按我们的进度来讲，往下我们应该开始学习什么呀。学习我们那个声明块里边的各种各样的声明，然后也就是我们这些各种各样的样式，对吧，我们应该往下进行了，那这里我们这个样式相关的样式会有非常非常非常非常多，所以这里边我们先来，哎，给他进一个新的内容啊，我们按一个一个这个也是一个新的分类去讲这个东西啊，所以在这儿呢，我来新建一个文件夹，这是我们这个零三，我们叫做一个这个layout。哎，叫做一个layout layout，我们叫做一个布局啊布局什么是布局呢？因为我们这个CSS里边它有很多很多这种样式啊，什么背景的呀，什么什么各种各样的吧，哎，字体的呀，各种各样的样式，那这里边我们如果说一块给它垒，诶一块儿像我们之前就那么散着去说的话，这东西会很乱，所以这时候我们把这些样式分成几组，对吧？那我们先说最重要的就是一个layout，也就是我们这个布局相关的一个样式，其实主要难点CSS也就是在布局，这你的页面的布局给它搞定了，剩下的就都都简单了，那什么是布局啊，布局好理解，就是我想把一个东西摆到左边，哎，又一个东西摆到右边，还有一个东西摆到下边，那这是不是就布局啊，哎，我们怎么去实现我想要这个效果，我怎么把一个元素放到我们页面里的任意一个位置，这就是我们说的一个布局，那关于布局我们先说第一个知识，直接新建一个文件，我们叫做一个零一。

我们叫做一个文档流，养一猫啊，文档流还是啊，这东西比较简单，它也就是一个基本概念，网页我先给它关掉啊，也是一个基本概念，什么叫文档流，文档流啊，文档流，呃，文档流呢，叫做一个英文翻译过来叫做一个这个normal no ma，诶normal flow啊normal flow叫做一个正常流啊，你可以叫正常流，常规流，或者我们一般也可以叫它是一个文档流，什么叫文档流？之前我们介绍CSS，我们提到过，我们的网页是一个什么呢？呃，网页是一个什么呢？是一个这个多层的一个结构啊，网页上有很多层啊，它是什么呢？它是一层，呃，落着一层啊，一层落着一层啊，落着落着落是哪个落呀？

呃，一层我就写这个，呃，写这个第四吧，应该不是这个字啊，一层摞着一层啊，一层摞着一层，应该是一个提手旁那个摞吧，你看一下哎，落了一层就是一层压一层，我们举个例子，就像那个，就像那个蛋糕一样，我们说通过什么呢？通过我们CSS，我们可以分别为每一层啊，每一层来设置我们这个样式啊，来设置我们这个样式，那我们作为用户来讲，诶作为用户来讲，它只能什么呢？诶只能看到我们这个最顶上的一一层啊，最顶上的一层，所以我们用户看到，虽然它本身是一个立体结构，但是作为我们用户来讲，我们只能看到它的最上边一层，所以对我们来说，它实际上也是一个平面的这么一个效果啊，也是一个平面么一个效果，那既然分这么多层，这么多层，那我们肯定有最底。

层，或者说肯定还有最上层，有一层，二层，三层，四层，对吧？肯定会有很多层，那每一层都叫什么名呢？哎，那我们这里边不可能为每一层都起个名，而我们说了，而我们要给一个最底层那个东西要起个名啊，所以这些层中啊，这些层中最底下的，最底下的这个一层，呃，最底下的一层我们称为什么呢？诶我们称为文档流啊文档流，所以简单来说，文档流是我们这个网页的一个什么呢？基础啊，网页的基础，最底下的一个层就叫文档流啊，最底下能叫文档流，那我们所创建的元素，我们所创建的元素，它默认都是在我们这个文档流中进行排列的啊，默认都是在文档流中进行排列的，所以关于文档流，呃，它是一个概念，你要记住的两点就是首先。

第一个文档流是一个位置，是我们网页的最底层，它是一个位置是网页的最底层，第二一个我们所创建的元素默认都是在文档流中的默认，没有特殊情况，就是我不给你特别特别声明的，那它都是在文档流里的，懂意思吗？所以文档流对我们人来讲，那可能就像我们人，我们人一出生默认都是在什么呀，都是在地球上出生的，对吧，你不可能一出生在火星出生的对吧？现在来讲一默认都是在地球上出生的，所以文档流诶对于网页就像我们说的这什么呀，哎，这个这个这个地球是吧，对于我们这个人来说，那我们对于我们来说，我们出生就在地球上，而我们的元素就在这个文档流中啊，所以文档流跟元素的关系，就像人地球跟这个人的关系，所以每一个元素默认都在文档流上啊，默认都在文档流上，所以以后我们要说这个元素的时候，你要注意元素实际上对于我们来说。

函素主要什么呢？诶，主要有两个状态，两个状态哪两个状态一个是在文档流中啊，一个是在文档流中，还有一个是不在文档流中，哎，不在文档中，不在文档流中，我们可以叫它是什么呢？叫做脱离文档流，这一点对于我们来说是很重要的概念啊，在文档流中一个特点，不在文档中这个元素又是一个特点，就像我们人，你在地球上是一个特点，当你脱离地球，你上了火星了，上了月球了，你又会变成另一个特点，当然可能没有那么形象是吧，但是就类似的，就是你在地球跟你不在地球是两个情况，同样我们一个元素在文档流里和不在文流中，它的状况也不一样，那现在现在啊，我们先不管元素在不在，那默认情况下现在都在，所以不在的情况我们暂时不需要考虑，所以对于我们现在来说，我们就来。

考虑一下元素在文档流中有什么特点，哎，所以这里面我们来说元素在我们这个文档流中，诶有何特点，有什么特点，有哪些特点呢？我们分两个元素来说，一个是我们的块元素，还有一个是我们叫做行内元素，这两个元素特点我们在这直接来展示一下，在这里边我们先说块元素啊，我这写一个div，这是我是DIV1，然后再复制一个啊，复制一个，这来一个我是DIV2，这是我们这个两个块元素。

我直接给它运行一下，运行起来以后，我们看这是DIV1，这是div，两个div是不是都拿上来了，哎都拿上来了，那首先我们来看它有什么特点，有什么特点，哎，现在这两个块元素，它是不是等于在我们的页面里它独占一行啊，哎，独占一行，所以第一个特点就是块元素，块元素会在我们这个页面中独占一行，这个也是我们之前一直说的啊，一直说的，那为什么会独占一行，首先前提是它得在文档流里，二一个它得是块元素啊，它得是块元素，诶有同学说了，老师你现在这个块元素啊，我们来看一下啊，这块我们先写上，然后我们来看个问题，在这儿呢，我整一个div，我整一个样式啊，我整一个样式，我们先演示一下这个东西啊，Style标签我给给这个呢，来一个class叫BOX1，这个呢我给它。

把一个class叫做一个BOX2 box2写上以后呢，在这儿我们来给他们设置样式啊，我这直接来一个点一个BOX1 box1呢，哎，我们现在要看什么呢？我给它设置一个背景颜色，Background color background color，我直接来一个yellow，来一个黄色，这时候我们来看效果，现在我们来看注意了，BOX1是一个块元素，我是不是没有给它指定宽度啊，哎，我没有给它指定宽度，那这个时候它的默认宽度我们来看看是多少，841你看是多少。

黄的这条就是八五十一，它的宽度多少？诶默认宽度是不是跟我们这个屏幕一边宽呀，哎，默认宽度你看我屏幕宽了它就宽了，我窄了它是不是就窄了，也如说它实际上跟我们浏览器窗口是一样的啊，跟我们浏览器窗口是一样的，所以这里边啊，我们要说的第二点，它的默认宽度是什么呢？默认宽度是我们这个负元素的一个全部，也就是说它会什么呢？诶会把我们这个，诶会把它的这个负元素撑满，也就是说负元素多宽它就多宽，那对于BO1来说，负元素就是body，所以它的宽度现在就是body的宽度啊，就是body的宽度，所以这是我们说第一个默认宽度，那默认高度呢？诶默认高度你看着啊，我不写字。不写字包子间有没有了，没了看不见了，我把字加上，它是不就这么高啊，换句话说是不是字多高它就多高，哎，字多高它有多高，所以这个时候我们来说一下它的默认高度啊，注意什么叫默认宽度，就是在这儿我没有写外，没有写he叫默认，你写了就不叫默认，对吧？默认高度是什么呢？诶是被我们这个内容撑开，或者叫做被子元素撑开，也就是说它里边有多少东西它就多高啊，它里边有多少东西它就多高，这个是我们说一个元素啊，默认宽度还有默认高度，诶那同学可能会说了，老师啊，那现在它的默认高度是100%，也就是说他已经把第一行给它占满默认宽度啊，默认宽度是负元素全部，也是说他已经把负元的宽度全都给占满了，那你如果把它的度调小一点，比如说在这儿我设置一个Y是100像素，Y是100像素，那意味着。

啊，现在他是不是就没把复元素占满呀，没把复元素占满这块后边就有位置了，那他是不是就应该能上去啊，哎，注意我都不用说了，上没上去没上去，为什么？诶，你可能会响了啊，因为它还这么宽，所以上边那地儿是不是还容不下它，好，我们把爆也调整小了，我直接点一个BOX2 box2呢，White我也来一个100BACKGROUND color background color我们来一个这个red来一个红色，这时候你来看他俩都是100，它是100，它也是100，上边这个地方是不是足以容纳下我们的div啊，容纳下我们的BOX2，但是你看BOX2有没有上去。

哎，没有上去，它也不可能上去，所以你就记住了，我们的块元素在文档流中总会独占一行，无论你的宽度是多宽，你是宽呀还是窄呀，它都会独占一行，这就是块元素一个特性，为什么能窄，待会儿我们再去解释，但是你要知道它会有这么一个特性，块元素它就是会独占一行啊，独占一行，好，这个是我们说块元素在文档流里边的个特点，我们再总结一下，第一点，块元素会在页面中独占一行，默认宽度是负元素的全部，默认高度是被内容撑开，哎，高度呢，就是我里边元素有多少，它的高度就是多少啊，高度就是多少，好，这个是我们说的一个框，有当然啊，默认的你不指定是这么多，如果你指定了，那就该是多少是多少了，这个是我们说的一个块元素，块元素说完了再来说我们的行内元素，行内元素典型的就是SPA，我是。

绊一，我是死绊一，然后在这儿我直接给他复制一下，再来一个我是死绊二，然后呢，我给死SPA呀，设置个样式，我们简单点写，我直接给它设置一个background color，我们来一个井号，一个B，设置一个背景颜色，现在死SPA看到这儿了，航天元素，航天元素什么特点，它会不会独占一行，哎，所以注意啊，我们来说一下。

行内元素，行内元素不会什么呢？不会独占我们这个页面什么呢？一行它只占什么？哎，只占自身的一个大小，换句话说，行内元素在我们这个页面中，哎，自左向右水平排列啊，自左向右水平排列，这是我们航天员错点，我下边再写一个，再写一个，那这时候它接着往右写，再写一个，它是接着往右写呀，哎，自左向右水平排列，而对于我们块元素来说，它是什么呢？是自上向下，诶垂直排列，所以我们的行列元素的特点就是只占自身大小啊，只占自身大小，那我们来看一下现在的问题是我这一行，我这有这么几个SPA，我这一行现在是不是还有富裕呢，能装下这个死SPA，那假如说我这一行装。

布呢装不下呢，哎，那这时候我们来看效果，我这来叠一下叠一下。看到什么效果了，哎，当我一行容纳不下所有的span的时候，它是不是换到第二行啊？哎，当换到第二行，所以这里边我们接着说，如果一行中，一行之中，诶不能容纳下我们这个所有的行内元素，则我们这个元素会什么呢？会换到我们这个第二行，诶第二行继续什么呢？诶继续自左向右排列，继续自左向右排列，说白了它就是和我们的书写习惯一样，哎，跟我们书写习惯一致，说白了我们写字怎么写的，从左往右写，写完了以后，第一行写满了，换到第二行，是不是继续从往右写，第二行写完了，换到第三行，继续从左而写啊，这跟我们书写习惯是一致的，换句话说，在我们中国，目前我们习惯是自左向右啊，一行一行写，但是其实在有些。

大家可能像日本可能还是自上向下竖着写呢，对吧，或者在一些这种阿拉伯国家，可能还是自右向左写呢，都会有，所以在这些国家的浏览器中，它的排列方式可能跟咱们中国就不一样了，它可能是就是自由向左排或者自上下排了，但是这个东西都不是我们现在所考虑的一个问题，因为对我们来讲，大部分情况下，我们的浏览器都是默认是一个自左向右的，所以那些不是我们考虑一个范围，所以你要注意行内元素的排列规则是什么样的，然后再来说它的默认宽高，这时候我们来说行内元素的一个默认宽度和高度总是被什么呢？诶都是，诶被我们这个内容撑开啊，都是被我们这个内容撑开，所以它就不像我们这块元素，它的宽度会是100%，不是这样，它就是什么呢？哎，我有多少字儿，我有多少内容，我的宽度就是多少，我的高度就是多少，就这么简单啊，就这简单好。

好，那这里边我们又系统的总结了一下块和行内元素一个特点，但是这儿还没说完，我们说的是块和行内在文档流里边的特点，也就是说我们说的是它在我们地球上一个特点，那当我们这个块元素和行列元素，它也就是说它是可以从文档流里边脱离出去的，那当它脱离了文档流以后，是不是就不再具有这些特点了呢？诶，那一定是有变化的，所以我可以先预告一下，对吧？当我们块和行内元素脱离了文档流以后，就不再区分什么块和行内了，那它们又是一个什么特点呢？诶，别着急，往后我们会涉及到这个，现在你先把这个东西给它记住，后边我们再去一页一页的说，啊好，这里是文档里相关的一些信息，我们先来听一下。