57.尚硅谷_HTML&CSS基础_文档流.avi原创

都是说了一个over flow啊，然后这都是一些盒子模型的一个概念，然后呢，还有一个比较重要一个概念，但是这个呢，就是一个纯概念是吧，我知道一下有这么一个东西叫做一个文档，文档流啊，文档流，文档流它是一个什么什么东西呢？那我们这里边啊，诶我们先说一下什么叫文档啊，文档其实很简单，以后只要看到文档这个词，你就要知道文档指的就是什么呀，指的就是网页，哎，我一个文档叫什么呀，叫做H一个网页是不是就是一个HTML文档啊，所以我一跟你说文档就意味着什么呀，就代表的是我们整个这个什么呀，页面，每一个页面都是一个什么呀，都是一个文档啊，都是一个文档，那我们来说什么叫做文档文档流呢？哎，文档流其实说的是什么呀，是我们网页中的一个什么呀，位置啊，网页中的一个位置，那我们昨我们讲这个4S说了，我们说网页实际上是一个什么呀，是一个多层的一个结构，对吧？诶，它是一层一层摞起来的，而我们只能看到是网页最最上面。

那层对吧？诶最上面那层，那这文档流呢？文档流就什么呀，就是我们网页里边的什么呀，一层啊，就是网页里边一层，那它是哪层的？诶那我们说了文档流就相当于什么呀，我们盖房的时候，房子是不是有一个地基啊，诶这文档流呢，是我们网页什么呀？最基础的一层啊，网页最基础的一层啊好，我们说文档流处在什么呢？处在我们这个网页的什么呀，网页的这个最底层，哎，它表示什么呀？它表示的是什么呀？表示的是诶一个这个什么呀，一个页面中的什么呀，位置啊对底层它是么？整个网页什么呀，一个地基一样的东西啊，地基一样东西，所有的网页实际上都是在什么呀？在我们这个文档流里边的啊，在我们文档流里边的，那我们这里边说我们什么呢？我们，哎，我们所诶创建的这个元素默认都干嘛呀，都处在我们这个。

文档流入啊，我们有所上元素，随便我这来一个div，这div跟哪啊，哎跟文档流里，那怎么知道在文档流里啊，我们有没有让它脱离文档流啊，没有，我们只要没有对它做一些特殊处理，它就干嘛呀，永远都在什么呀，文档流里啊，永远都在文档这里，那那怎么脱文档流啊，哎，两种方式我们可以干嘛呀，我上可以让它浮动，也可以让它干嘛呀，定位那是我们这块，我们待会再说，我们先不管它，你要知道我们的元素默认就在什么呀，在文档流里啊，元素默认就是在文档流里，诶那问题就来了，那在文档流里它它有什么用啊？那接下来其实文档流其实并不重要，我们重要的是什么呀，重要的是我们这个元素在我们这个文档流中的什么呀，特点啊，元素在我这个文档流里有什么特点，那我们要分两种情况去说，第一种我们是什么呀？块元素，还有第二种是我们什么呀？诶内敛元素啊，内敛元素来我们这儿来一个div，就是一个块元素。

它来一个class，我们叫一个box，我们直接写那两个是吧，写那两是直接来一个style style我们来一个white，来一个100个像素，Hat也来什么呀，100个像素，然后来一个background color来什么呢？来一个井号BMV，然后我这复制一个，这个呢，也是100颜色换一个换成一个这个FF0保存，我现在是两个div啊两个div是不是两个快元素啊哎，两个快元素保存，然后CTRL运行什么特点，哎，是不是独占一行啊哎独占一行，所以注意块元素在我们这个文档流的词点就什么呢？哎，块元素在我们这个文档流中会什么呀？诶会独占一行啊，会独占一行也就是什么呀？诶就说块元素会什么呢？会自上向下排列啊，块元素会自上向下排列什么意思呀？我第一个div是这个绿色的，绿色干嘛呀，它是不是在最上面。

看啊，然后我下边又创建了一个黄色div，它是不是仅仅的放在我们这个绿色的一个下边啊，所以注意块元素在文档里，它默认是自上向下去排列的，那换句话说，如果我让括号元素脱离文档流，它还这么还还是不是这么排列了，哎，就不一定了啊，就不一定了啊，所以这边注意，比如说哎，括元素只有在文档流里边才会独占一行，一旦让它脱离了，它可能干嘛了，它就会变成另一样子啊，变成另一个样子，这是我们说这一个块元素，然后再来说什么呢？我们的内联SPA啊，我是一个SPA，然后呢，这边我们来给它设这个样式，直接给它来一个style，来一个颜色吧，来一个这个，来一个这个yellow green green，诶，Style我们来一个back ground color，来一个这个yellow green保存，多写几个，咱们来看效果一刷新是不是死SPA啊，诶，那紫SPA是个什么元素啊，哎，内联元素，那我们来看内联元素什么特点。他怎么排的，他会不会独占一行啊？哎，不会独占一行，所以这里边我们来说内联元素，内联元素在我们这个文档流中只占什么呀？只占内，诶只占我们这个自身的什么呀？自身的大小啊，自身的大小而什么呀，它会什么呀？诶会默认从哪啊左向右排列吧，诶从左向右排列，哎，我这写一个元素后边干嘛呀，就在它的右边再写一个，是不是还在它右边啊，诶我后边再写三。

是不是接着往往右边排啊，哎，往右边排啊，所以注意它都是什么呀，自左向右排列这个东西实际上跟我们什么呀，跟我们书写的顺序是一样的啊，跟我们写写文章啊，我们写字这个顺序是一样的啊那然后我们来看，那现在是什么呀，现在是我们这个窗口是不是足以容纳下这些SPA呀？诶那我们说如果装不下怎么办？诶装不下怎么办？来我们调整小一点干嘛了，是不是自动换到下一行啊哎，那你注意了，换到下一行还是干嘛，是不是还是自左向右啊哎，自左向右，所以这里边我们来说，如果什么呢？如果一行中哎不足以容纳所有的这个什么呀，哎，那所有的元素，所有的这个内联元素则什么呢？则会换到下一行，哎换到下一行，注意也是继续干嘛呀，哎，自左向右啊。

继续自作向右，所以注意这个东西其实没什么难的，跟我们书写的顺序是不是一样的呀，咱们写字也是第一行写满了，我是不是换到下一行的这个开头写啊，哎，开头写啊，这次我们说扩元素和内力元素特点，其实这东西我们已经知道，这一块再强调一点啊，扩元素会独占一行，自上向下排列，内元素干嘛呀，只占自身大小，默认什么呀，从左向右排列，如果一行不足以容纳所有元素，则换到下一行，继续自左向右啊，这是一个，然后我们再来看第二个特点，第二个特点是什么呢？来，那我们来看现在我们这个内联，我们这块元素啊，还是看这块元素块元素，我们这儿是不是给它设置了一个宽高啊，哎，来，我干嘛呢？我把宽高啊给它去了，第一个元素的宽高给它去了，我们来看效果，我这一刷新没了吧，诶没了以后我要看的是什么，我要看的是我们这个元素的一个。

默认的一个什么呀。默认的宽，我一看元素干嘛了，是不是没了呀，为啥没了呀，我是不是没有给它指定宽高啊，同时我这元素里干嘛呀，是不是什么也没写呀，哎，什么也没写，所以这边我来写一个，随便写一个写个A，我这一保存咱们来看。一刷新走你，诶是不是出来了呀？哎，那你来看看我这A，我这div的宽度是多少，那注意了，我有没有设置宽度，没有没有设置宽度，这宽度哪来的，哎，是不是默认宽度啊，哎默认宽度，所以这里边注意块元素元Q哎快块元素在我们这个文档流中，它的默认宽度是什么呢？来我们来看宽一点宽一点。

不就宽了呀，哎来窄一点窄一点你发现什么了，它是不是一直跟负元素一样啊，哎一样啊，所以这里边我们说块元素在文档轴里默认宽度是负元素的什么呀？诶100%，也就是说负元素多宽什么呀？块元素是多宽，但是注意啊，我说的默认默认宽度是负元素100%，但是它不是说它宽度值是100%，宽度值什么呀，宽度值是凹凸。宽度值是这个凹吐，也就是说它是什么呀，它是自动去设置的啊，默认值我们来看外的默认值是什么呀？O吐啊，它是自动去设置的啊，自动设置的，但是它自动设置的效果就什么呀，跟负元素的宽度干嘛呀，一样啊，跟负元素的宽度一样，那这时候你注意了，我们说了，现在div的宽度是不是占负元素的全部啊，诶那我们说了，当我给它设置一什么呢？设置一个这个pading pading，比如说我设置一个pading left，我来什么呢？来一个1000，诶来一个500个像素，来个200吧，200个像素，我们说了，当你设置pading life pading的时候，我们说了pading会干嘛，是不是会影响我们整个元素一个可见块大小啊，诶那我们来说，你说这回它会不会影响。

会不会影响？来我这一刷新，咱们来看啊走你诶你发现变没变，可见宽我这div是不是还是这么大呀，如果是把我这个A往里挤了呀，A往里挤了啊，所以这里边我们来说一个特点啊，这块我们附加说这么一个叫什么呢？当我们这个元素的这个高度或宽度的这个值为什么呢？为凹凸时啊，为凹凸时，凹凸是不是就自动啊，诶此时干嘛呢？此时指定我们这个内边距不会什么呢？不会影响我们这个什么呀，可见框的大小啊，不会影响可见块大小，而是什么呢？而是会什么呢？将我们这个。

诶，而是会自动修改我们这个宽度和什么呢？和这个诶高度诶以适应什么呢？以适应我们这个那边距，所以你还看这我这是paing LA设置什么呀，设置了一个200个像素，那干嘛呢？它是不是在左边加了一个200个像素啊，然后干嘛呀，给宽度，那它自己又干嘛了呀。减了200啊，减了200，所以效果是什么呀？我这A是往后走了呀，哎，往后走了啊，所以注意当我们这个是默认值的时候，它不会去改变大小，而是干嘛呀，而是去自动修正我们那个宽度和高度，前提是你的值是凹凸啊，你的这是凹凸自动设置的啊，自动设置的好，这是一个好，那我们说了括号元素在文档流中默认宽度是负元素的100%，那我们来说它的默认高度呢？诶我们来看看文档流中的这个，哎，默认高度，诶那你来看我有我有没有指定高度啊，没有吧，诶把白景先给它去了啊，没有指定高度，那我们来看现在有没有高度，是不是正好跟我这A一边大呀，诶跟我这A一边大，那这个它这高度是不是正好就是A的高度啊，所以注意我们来直接说结论叫什么呀，括号元素在文档中中高度直接写啊，高度默认被我们这个子元素撑开，或者叫什么呀，被我们这个内。

内容撑开，这么怎么说都行啊，被内容撑开，被怎样都撑开，那什么决定啊，它里边有多少内容，它的高度就是什么呀，就是多少，那比如说我这来一个，我这来咱们写一个什么呀，写一个子元素div，我给它设置一个高度，注意我有没有给负元素设置高度，没有给子元素设置一个高度，来一什么呢？来一个500个像素保存，我们来看现在一刷新走，你负元素是不是被被撑开了呀，诶被震开了啊，所以注意块元素在我们这个文档流里边的默认高度是被我们这个子元素撑开的，换句话说，子元素多高它就多高，子元素50它就是50啊，它默认是被我们这个内容撑开的啊，诶但是前提啊，说这三条的前提都是它得在什么呀，文档流里，而且都是什么呀，默认宽度，你如果给他指定了一个，是不是就按你指那个来啊，哎，没指定它就是什么呀，按照这个默认的来啊，默认的来这是一个快速，那我们说了那连线速度简单了，那连压速度。

宽度高度是什么呀？默认宽度高度，哎，是不是宽和高都是由内容撑开的呀，哎，宽和高都是被内容撑开的啊，所以注意内联元素这个宽度和这个高度，诶默认都被我们的什么呀？诶内容分开啊，内容撑开还是啊，前提是在文档流入啊，前提在文档流入诶那我们还是再强调一下，怎么就知道它在文档流里边了，如果你没有对它做什么乱七八糟的事儿，它一定是什么呀，在文档流里啊，在那里以后我们会说有一些属性，有些样式会使我们的元素脱离文档里，我们说的时候我们再去，哎，解释啊解释，但是默认只要你没有做什么特别操作，它都是在什么呀。

文档流里的啊，都是在文档里的，好保存，这里边是我们说的这个文档流啊，好停一下。