54.尚硅谷_HTML&CSS基础_内联元素的盒模型.avi原创

开始上课啊，那咱们呢，是上午是把我们这些，呃内编距啊外边距咱们给他呃给他说完了，也就是说我们整个的一个这个核模型呢，咱们就给他说的这个差不多了，但是这里边其实我们上午演示的这些所有的核模型，我们演示的都是一个什么呀，都是div对吧？呃，Div是个什么元素，诶是个块元素啊，我们一直在使用一个块元素来演示核模型，实际上没有使用谁呀，诶内联元素，诶那那我们来想想，那内联元素它是不是盒子呀？诶它也是盒子，我们说了所有元素都是盒子，那我们就要说一下什么呢？我们内联元素，我们行内元素的这个盒子和我们这个块元素的盒子，它有什么区别啊，我们来说一下内联。元素的这个盒子来，那这里边我们来写一个内链元素，我们来一什么呢？我们来一个这个死SPA吧，哎，拿死SPA举例子啊，我是一个这个span span保存，然后CTRL运行，我们来看这页面里呢，就出来这么一个SPA，诶文字就是我是一个SPA，然后呢，我们来写点东西，那这里边我们来看看它的核模型和我们这个什么呀，和我们这个块元素有什么区别，那首先为了看见它，我们先是给它设置一个背景颜色background color来什么呢？来一个这个，来一个这个井号B保存，然后我们一刷新走你诶是不是出来一个这个。

绿色呀，诶我们说了这种内联元素它有多少内容，它是不是多大个啊，诶它不像扩元素，扩元素默认什么呀，占一行，而我们内联元素它只有多大就占多大啊，这是我们说这个SPA，但这一块呢，我为了演示清楚一点啊，我在SPA下边我再创建一个什么呀，Div，为什么呀，因为我们这块需要做一个什么呀，做一个这个对比，没有对比，不然我们看不出来效果啊class我们这来一个这个box box1，然后呢，我这也多写几个SPA嘛，保存多写几个SPA，这这是一堆SPA啊，然后呢，给BOX1设置一个样式，点一个这个box一来一个这个100个像素，Hat呢来一个100个像素，然后black color们来一个这个red保存，诶现在呢是这么一个效果，我这div和我这个SPA是紧紧的什么呀，贴在一起的吧，哎，贴在一起的，那我们说了样式，那这里边呢，我给第一个SPA，我给它来一个class，来一个叫一个S1啊，我们单独给它设置，那我这块给它设置的话，就是一个点一个什么呀。

SSE，诶，那我么来说核模型都有什么呀？哎，核模型分成什么呀？分成我们三呃这么几个部分，内容内容区，我们这个内边距，还有我们这什么呀，诶诶边框还有我们这个诶外边距是不是一共这么四个部分呀？哎，这么四个部分，那我们要测试的时候，无非也就是这四个部分啊，我们先来看我们这什么呀，我们先来看我们这个内容区，内容区怎么设置啊是就是还有我们这个hat呀，我来一个100个像素，He我也来一个什么呢？100个像素保存，我们来看效果，一刷新走你。

诶，发现什么了，是不是没变化呀？诶我是给深日的S1 S1是不是正好就是我这个SPA呀，但是你发现我试完了有没有变化呀，没有变化来我再设置一个大一点的，来一个200乘以200的保存，我这一刷新走你哎呦没变化，没变化我们就不用试了，说明什么？哎，内联元素它是有内容区，但是它能不能设置宽高啊，哎，不能设置宽高啊，所以注意内联元素，内联元素不能设置我们这个外和派，哎，你说他也不是不能设置，只不过设置完了干嘛呀，没用啊，设置完没用，所以注意wise和head，它设置完了不好用啊，前提是对于这个内链来说。好，那这个外和坏的看见了，然后我们来看看什么呀，再往外是什么呀，是不是内边距呀，诶内边距来我们来设置一下，我们这个内边距设置，我们先设置一个什么呀，水平的一个那边距，水平一个那边距，我们叫一个拍定，哎拍定一个，哎，咱们直接。

写吧，PA定right，我来什么呢？来一个100个像素，然后再来一个PA定一个什么呀，拍定一个right也是一个什么呀，100个像素，这是不是叫我们这个水平的一个那边距啊，诶水平的左边的还有一个右边的叫水平的，而我们这个top还有那个bottom叫什么呀？垂直的啊，垂直的垂直方向的啊好，我们来看效果，这块我一刷新走你诶发现什么了。有了吧，哎有了，那证明我们说了水平方向内边距对于什么呀？哎，我们这个内敛元素可以什么呀，可以设置我们这个水平方向的这个那边距，诶就说这个东西是什么呀，是没问题的啊水平方向那边距，然后水平方向接着看完了，那我们来看一下还有谁呀？诶垂直那你一看我这单独拉出来了就知道了是吧？诶垂直方向的这个那边距，直接来一个叫做一个拍定一个什么呀，Top我来什么呢？来一个这个100个像素，然后再来一个pading，一个bottom也来一个100个像素啊垂直方向的一个逆边距保存，我们来看效果，这一刷新走。

诶。也行是吧，发现什么了，垂直方向的也行，诶但是你发现什么问题了，你发现什么问题了，我下边那div是不是没了呀，Div看见吗？看不见了，为什么看不见了，哎，因为被它盖住了，还被它盖住，我们把这个像这个值要设小，设置小一点来一什么呀，来一个50个像素，50个像素保存，我这一刷新走，你是不是跟这那样，那我刚才设置太大的话，Div给给它盖住了，那我们先说我们这个它支不支持垂直方向的面距，哎，我们说内联元素可以设置垂直方向内边距，但是但是什么呀，那注意了，但是它不会影响页面的布局啊，不会影响页面的布局，什么意思，我这块是不是确实设置那边距了呀，但是你会发现那边设置完那边距以后，我这东西它是不是确实下来了，但是你注意他对我这个div产生影响了吗？Div是不是还跟那待着呢呀，诶。

如果说像像其他的如果是块元素的话，我这里边设置一个内边距，它会干嘛呀，是不是把下边元素往下挤啊，哎往下挤，而这个设置完那边距，我这div就跟什么呀，是不是跟没看见一样，它是不是还跟那待着啊，哎跟那待着啊，所以注意它可以设置垂直方向那边距，但是不会影响什么样布局，也就是设置完了跟没设置实际样是一样的，只不过显示效果会有什么，有一个变化啊，有一个变化，这是我们说垂直方向的这个那边距来，那既然没效果就住了啊，那注意了，那你说上边这个拍件top有没有啊，有没有有，但是直播干嘛了，他出去了，哎他可能在这块呢，出去这块我们我们干嘛，我们看不着啊，我们看不着，同样它都是不会影响什么呀布局的，所以注意对于内边距，我们的内联元素支持水平方向的内边距，并且可以影响到什么呀布局啊，会影响布局，而我们这个垂直方向的边距内联素也可以设置，但是设置完了以后不影响什么呀布局啊，其他元素它不会挤到其他元素啊，这是我们说这个垂直方向先给它。

了保存恢复到这个原来的状态啊，原来状态内编距说完了，我们来还有什么呀，内编距外边什么呀，是不是边块啊哎为我们这个什么呀，诶元素来设置这个边框来写一个边框，我们就直接四个方向全都设置了，包点来什么呀，一个像素来一个什么呢？Red，然后来一个solid，一个像素的一个红色实现边框，我们来看效果，直接一刷新走你诶边框是不是确实出来了呀？诶来，那这里边我来换一个颜色，换一个这个录吧，保存我们你刷新诶走边框是不是确实出来了呀，如果你看清楚的话，刚才明显我这个边框设置完了以后，我这堆元素是往这边挤了一下，诶挤了一下，我们来给它设大一点来什么呢？来一个100个像素吧，哎，太粗了是吧，来一刷新走，你不是确实挤了呀，哎水平方向呢，确实把我们这个元素，哎整个的往这边什么了，往这边挤了，但是你发现什么了。

垂直方向有用吗？哎，没有，它虽然边框下来了，但是有有没有影响布局，哎，没有，所以这个边框呢，其实也是一样的啊，我还是给它改回来，改成一个EPX保存，你会发现什么呢？可以设置边框啊，可以设置边框内联元素可以设置边框，但是还是什么呀？哎，但是我们这个什么呀，垂直的什么呀，边框不会影响到我们这个页面的什么呀，布局，但是水瓶子会不会啊，哎，水瓶子会，水瓶子会把这些元素往边上挤，但是垂直方向干嘛呀，不会影响布局啊，不影响布局，好这是我们说的这个内联压素，一个边框，然后还有最后一个我们的什么呀，诶外边距啊，我们的这个marin来外边距我们还是分两步测试，第一个是我们这个水平外边距，诶，水平外边距来一个margin margin来一个这个left left来多少呢？来一个100个像素。

然后再来一个margin，一个right也来个什么呀，100个像素保存，我们来看效果这块一刷新走，诶有没有用，有用吧，哎，就是说它是可以支持我们这个水平方向的这个外联距的啊，所以这里边我们来说什么呢？诶内联元素支持我们这个水平，诶方向的这个哎外边距哎，它是支持的，哎，那这里边我们既然支持了，我们要看一个问题，那水平方向外边距，我们说了垂直方向的外边距有一个特点，它会干嘛呀，重叠会折叠对吧，那我们来说那水平方向的呢。

来class我给第二个SPA呢，来什么呢？类叫做一个S2啊S2这来一个点一个S2，那我们来说现在S1是不是我左边的元素啊，而S2是我这个右边的元素，那你来看我这个左边的元素，我给它设置了一个什么marin red是不是一个100个像素啊哎，来我这设置一个为我们这个右边的这个元素设置一个什么呀左哎外边距这来什么呢？来一个margin left也来什么呢？100个像素，我们要看的是什么？我要看这两个未问距它会不会重叠吧？诶会不会重叠保存，我们来看效果啊，如果距离没变，是不是这样距离啊，如果距离没变证明什么呀，重叠了，如果变了干嘛呀？哎，是不是没重叠呀，我这一刷新走你完了。

是不是大了呀，哎，大了啊，所以注意我们说水平方向的外弯距不会重叠，哎不会重叠，而是什么呀，而是哎取呃，而是什么呀，求和，哎，而是求和，也就是说左右边一个100，左边一个什么呀，100，那中间距离就是多少，哎，200，把这个100和这100瓦给它是不是加到一起啊，哎给他量一下。不正好是一个200像素，哎，200像素啊，所以它会给它进行一个求和啊，进行求和，所以注意只有垂直方向相邻的微问距会折会重叠，而水平方向什么呀，水平方向哎，相邻的这个外弯距不会重叠啊，不会重叠，好这是我们说的这个水平外弯距，然后还有一个就是我们什么呀，垂直对垂直外边距，其实不用试了，直接说了内联元素不支持垂直外边距，所以你这来一个margin，一个top，我来一什么呢？来一个200个像素margin bottom来一个什么呀，200个像素保存直接来看了一刷新走，你看得出来吗？没有吧，哎，没有，所以注意它支持这个水平方向的外边距，但是不知什么呀，垂直方向的设置完了压根就看不出来啊，也是看不出来，好，那这个是我们这个内联元素的这个盒子模型，简单再总结一下，首先呢，我们来说内联元素不能设置。

单核高啊，不能设置宽高，它设置完了也没用，然后第二一个我们叫什么呀，内联元素支持水平方向内边距，还有水平方向的这个边框啊边框但是什么呢？它垂直方向的内边距干嘛呀，可以设置，垂直方向的边框也可以设置，但是不会影响布局啊，不会影响布局，而外边距只支持水平方向，垂直方向压根干嘛呀就不行啊，压根就不行，而这也是我们说内联元素的一个核磁模型，反正基本上就是什么呀，基本上就是水平方向好使，垂直方向都不太灵是吧？哎，都不太灵啊好，这也是我们说的这个内联元素的一个核模型，我们来听一下。