尚硅谷前端基础 (52)

好，接下来我们来继续，那我们。说了这么半天了是吧，我们说这个核模型，那你看我们其实演示核模型的时候，一直都在用这个div去演示啊，一直在用div演示，那我们就要考虑一下了，那。行内元素就没有核模型吗？或者说行内元素有没有核模型？哎，当然会有，我们开始讲的时候就说了，CSS把所有元素都想象成了是一个矩形的盒子，那既然说是所有元素，行内元素也属于所有元素，所以这些元素它也算是核模型的这个哎范畴里，所以这个时候我们要看一下我们的行内元素的核模型跟我们这块元素它有什么区别，在这里我直接来新建一个文件，哎，我们叫做一个该零九，我们叫做一个行内元素的一个核模型，这样一条有什么区别呢？呃，其实大体上呢类似，但是有一些细节地方我们需要注意一下啊，我们直接创建一个SPASPA写一个我是死SPA啊，我是死SPA保存一下，然后在这我们直接运行。

看一眼SPA写完了，我们直接写一个style标签，Style标签呢，我给他来一个class啊，Class class我给他叫一个S1，然后下边我给他整一个div，点一个BOX1，为了对比一下，我们都写上，我这先写点S1 S1呢我们给他一个background background color，我们给它来一个这个yellow黄色的背景，然后下边是我们这个BOX1 box1我们给他来一个是一个200 hi是一个200BACKGROUND color background color background color，我们来一个井号，一个BF这一保存，我们来看看效果啊，我们来先说什么呢？我们从里往外说，我们先说我们这个内容区啊，先说内容区啊，我们先写上，这个是我们叫做一个行内元素的一个核模型，主要看区别，内容区我们是外height外，我来一个100HE我来一个100啊，都写上100，我们看效果有没有。

好，直接看有没有用，哎，没用啊，没用，所以注意直接给结论我们的内联元素，哎，我们行内元素吧，我们统一一下啊，行内元素不支持设置我们这个宽度和高度，所以注意这个外和he对于我们的行内元素来说是没有任何作用的啊，它没用啊，写上也没用啊，写这没用，那注意那是不是说就意味着我行内元素没有内容去不是，只是它不能通过宽高来设置内容区的一个大小，它的内容区大小就是由它里边的内容决定的，我们不能手动去修改，就这么简单，所以啊结论行内元素不支持设置宽度和高度，所以你给它设置没用，你看是不是还这么宽啊啊还这么高啊，他就是被内容撑开的，然后再来看我们的拍定，我直接写一个PA定，我们直接设置了啊，我来一个这个100个。

速易保存我们来看生没生效，生效了啊，你看这是100，这是100是不是生效了，诶拍定可以生效，但是你注意我上边的下边的实际上是不是也生效了，但是你看啊，我下拍定已经到这儿了，但是你看它有没有影响我这个BOX1的位置，哎，没有影响box c的位置，所以这个时候注意了我们这个行内元素，行内元素可以设置我们这个拍顶，但是但是但是我们这个垂直方向的一个拍顶，它不会不会影响我们页面的一个布局啊，垂直方向的拍定不会影响页面布局，所以你看我这及时给它设置了拍定，它有没有把这元素往下挤啊，没有挤就不会影响布局，它它可能会盖住一些元素，但是它不会影响到元素的一个布局，这么一个点啊，这是第二一个，然后第三一个，我们再看外边的是谁呢。

我们的边框我直接来一个borderder，其实看完拍进你都理解了，Borderder我们来一什么呢？来一个哎，100个像素，然后来一个solid的，我们来一个red，红色一个实验边框还是borderer，能不能设置，能设置同样上下的borderer，有没有吉他，哎，没有吉他啊，没有吉他，所以也是这么一个结论，行内元素哎，可以设置我们这个borderder，同样我们这个垂直方向的borderder，哎，它不会什么呢？不会影响页面的一个布局，你爱怎么怎么设，你爱怎么设置怎么设置，它就是布局不会不会乱啊，这是一个特点啊borderer，那margin也是一样的啊，Margin也是一样的，我直接写什么，我就不再回来写了啊，也是行内元素，哎，可以设置我们这个marin，也是Mar g marin，哎，也是垂直。

方向的这个marin，哎，它不会影响我们这个布局，所以你看这我写一个，我直接写一个marin，我们来一个这个100个像素，这时候你看它的确挪了对吧，同样我这再加一个，我加一个咱们对比看一下，Margin设置完了，的确左边的右边都有作用，但是上下有没有作用，没作用，因为垂直方向不会影响布局，并且你还看到啊我们这margin这它有一个margin，因为我这是四个方向的嘛，左右都有，它这左边也会有一个margin，你看这margin有没有合并，哎没有合并，注意它这里边就是什么了，就是取合了左边这100这儿100，那加一块就是200，所以水平方向相邻的半边距，它不会出现合并的问题，就是两个marin加一块求和，哎，你100我100，我俩就200就完事了啊，它是跟垂直号有一个区别啊，这里边注意一下就完事了，所以其实总的来说我们行内元素。

的一个核模型，跟我们块元素其实呃，区别还是很明显的，首先不支持宽度还有高度，然后pading margin都可以设置，但是垂直方向的它并不会影响一面的布局，你爱怎么设置怎么设置，你也能设置，但是它不会影响布局，这就是我们最终的一个结论，其实这个你可以总结一下，总结成一句话就完事了啊，就是垂直方向的问题啊，水平方向基本上都一样啊，但是宽高不行啊，空高不行，好，那这里我们说完了，我们接着往下说一个东西，说一个什么呢？说一个我们这个A标签，我写一个超链接，我写一个这个井号，哎，井号写一这吧，Java script javaci PT啊，冒号分号写一个它这是什么呢？这是一个这个超链接，超链接的话，我在这我给他设置一个样式啊，我们直接来一个AA，我们给它来一个background color background color，我们来一个。

这个orange设置一个背景颜色是一个橙色，对吧，这是我们超链接，超链接在这儿呢，我可以点它了，但是现在呢，诶我觉得这个超链接呀，太小了，我想给这个超链接呢整的大一点，哎整大一点，那比如说我就给超链接设置一个Y一个100 high呢也来一个100，哎宽高都设置成了一个100。但是有没有用啊，哎，很明显看到对超链接有没有用，没用，因为我们的超链接它是一个行内元素啊，它是一个行内元素，行内元素能不能设置宽高啊，不能设置，刚说的对吧，行内元素不支持设置宽度和高度，所以这个东西你对于超链接来说没用，一点用都没有，但是问题来了，现在我就出现这样一个需求，我就需要一个100乘以100的一个大个的正方形超链接，我还真的就必须得设置，不设置就不行，必须得设置，那怎么办呀？但是问题又来了，它就是一个行内元素，行内元素就不能设置宽高，哎呀，那我还就想设置，那怎么办呢？那你就需要把一个行内元素变成块元素，它是不是就可以设置了，哎，就可以设置了，所以这里边我们就要说一个。

新的属性叫做什么呢？叫做一个display display display什么意思，叫做显示，它用来什么呢？诶，D类用来设置我们元素显示的一个类型，也就是说它是块元素还是行内元素，我们来说一下它的可选值有什么？有第一个我们要说的是一个阴暗表示什么呢？将我们这个元素设置为我们这个行内元素，所以在这我如果直接写一个this play，我来一个in line，这个时候我们发现有没有区别，没有任何区别，给你抛光线了，是不是告诉你设置完in line这个就就不行了，哎，就不行了，所以这个时候display in line就是把元素设置为行内元素，而A本身就是恒内元素，所以你写不写是不是没区别啊？哎，没区别，下一个值我们叫blck block，这个是什么呢？

将我们元素设置为我们这个块元素啊，块元素，所以在这儿我直接把赖改成block，这个时候你再看，首先很明显的是这堆死SPA是不是给挤下去了，诶给挤下去了，然后宽高干嘛了，诶也生效了，所以这个时候它就变成了一个叫做块元素啊，叫做块元素，也就是说你可以通过display把一个块元素转换成一个行内元素，这么做很少啊，很少把块转成行内，也可以通过display把一个行内元素转换成块元素，这是都是没问题的啊，可以通过来设置我们显示的一个方式啊，In line表示行内，Block表示块，还有一个是二者的结合，我们叫做一个in line block叫做一个什么呢？叫做一个行内块元素，将我们元素设置为叫做一个行内块元素，所以看着啊。

我写一个，我这儿来一个in line block，我们来看什么特点，首先改完了，看看宽高生没生效，生效了，然后它有没有独占一行，哎，没有独占一行，也就是说行内块元素的特点就是什么？行内块特点就是既可以设置我们这个宽度和高度，它又什么呢？哎，又不会独占一行，又不会独占一行，哎独占一行说白了，他们的特点和那个图片那种，哎，那种替换元素有点像，哎你可以设置宽度，也可以设置高度，并且它不会独占一行，兼具了块元素，还有行内元素两种元素的一个特点，啊，这个是我们说的一个in line block，但是in line block in line整的时候，它其实英由于它兼具了两种元素的特点，所以它也兼具了两种。

元素一个缺点，所以你用的时候需要注意，后边我们再讲的时候，你需我们需要去强调一下，这儿可以举个例子，我这写一个再写一个，你看我这写完了一个A以后，你会发现我这个两个A之间有一个缝隙，有一个缝隙如果是块元素是不应该有缝隙的，但是我这写了一个行内块，它出现了一个缝隙，为什么会有这个缝儿，就是因为它是一个行内块元素，你可以把它想象成就是一个字儿，就是一个字儿，那既然是一个字儿，你看我这两个字之间是不是有这个换行了，哎，换行在这就显示是一个空格，你把这换行一删，这for就没了啊，这for就没了，所以有的时候它的特点跟这个文字有点像，但是后边我们会说一下它的一个注意事项，但是行内块我们在开发的时候还是能不用，还是尽量避免去使用一下，使用，但是也不是说不能用，但是有一些情况你用完了会导致你的这个网页一些地方很怪异，或者用起来很麻烦。所以这个东西。

我个人来讲，我不是特别喜欢用，但是你要知道它有这个东西啊，In line block，诶in line block，还有in line block，还有一个我们提一嘴不掩示，叫做一个table，这是什么呢？将我们元素设置为一个什么呢？设置为一个表格table，表格table我们还没讲，没关系，你知道一下有这么一个东西就行了啊，这我不演示了。还有一个我们叫做一个钠啊，叫做一个那叫什么呢？元素不在我们这个页面中显示啊，元素不在我们这个页面中显示，所以如果我把这变成一个迪斯普雷纳，我们看效果，迪斯雷纳一保存什么玩意儿，这A是不是就没了？哎，第斯列钠可以用来隐藏一个元素啊，隐藏一个元素，诶有同学说老师你隐藏干嘛呀，你不写不就完了吗？哎，还是这个问题，如果我不写，就永远出不来了，而我隐藏了以后，我还可以用一些技术手段让它出来。比如说比较典型的是这个用。

动法的话，你看我京东我这儿有一个菜单，当我点进去，它是不是出现了一个这个下单菜单啊，那这个菜单就是一个什么，就是开始隐藏，当我鼠标移出去以后，它显示出来，那我如果没有设置隐藏，那这个东西是不是也显示不出来呀？哎，所以比斯雷娜可以用来去隐藏一个东西啊迪伦娜，哎，那完了就消失了啊，那完了就消失了这么一个效果啊，我们给它注掉它就它就回来了啊隐藏一个元素Dis斯雷纳，那我们隐藏一个元素，除了Dis display还有一个值，我们叫做一个viibility VI viibility这个是什么呢？我们来说一下visibility，它用来用来设置我们元素的一个显示状态啊，显示状态我把这display啊，我先换成block，换成block，换成block啊，然后我把这个visibility啊，我们先换一个值，叫做一个viible VI。

是它的一个默认值，可选值，我们第一个值叫做一个viible，这是一个默认默认值元素在我们这个页面中正常显示，也就是说它不会什么呢？不会隐藏啊，不会隐藏正常显示，你看这两个超链接是不是都出来了，哎，都出来了啊，所以这个值叫做一个visible啊，Visible还有一个值，刚才我们看的叫做一个hid，叫做一个hidden，哎，你看跟那个overflow那个值很像，有一个hidden hidden什么意思呢？隐藏啊，隐藏元素在我们这个页面中隐藏，哎，干嘛呢，不显示，乍一听好像跟这个display none是一样的，对吧？我们看效果啊，我们看效果，我直接来一个visibility，我们来一个这个hidden hidden啊易保存，看超链接还有没有了，没了没了，但是你要注意他这个位置是不是依然站着呀，如果迪斯雷难的话，那就是什么呀，那没了就是就是没了，哎，连位置都。

不占，但是我们的visibility hidden它干嘛呢？它虽然隐藏了，但是这个位置依然会保留，所以hidden什么意思？元素在页面中隐藏不显示，但是但是依然占据我们这个页面的一个位置，所以这个就是他们两个的一个区别，隐藏完了。

就没了，就是你毫无感知，感觉不到它的一个存在，而visibility hidden OK是隐藏了，隐藏了以后，但是他还依然占据那个位置，所以VI display display像什么呢？这人就就消失了，人间蒸发，找不着了。而这个visibility hidden他有点像什么呢？哎，有点像那个哈利波特，穿上这个隐形斗篷，OK，隐没隐形，隐形了，但是如果你要摸，你还能摸到它，它还占据这个位置啊。所以两种隐藏原素的方式啊，目前来讲两种，一个是display，一个是withability，两种方式注意了Dis discipline，那不占据位置，Visibility hidden占据位置，一般情况下我们用会比较。比较多一些，但是还是根据实际情况去掌握，而彼此play不仅可以用来隐藏，还可以用来设置我们元素的一个显示的一个类型啊，显示类型好，这节课我们说了是行内元素的核模型的一些特点，然后说了两个样式，一个是display，一个是VI ability，还是自己来看一下，哎，马上我们就可以通过做一些练习来对我们的知识进行巩固了啊，不要着急，还是要去记一下，继续巩固一下我们之前的知识，前面有忘的赶紧趁现在再去回顾一下，往下我们再进行就要去实战了啊好，这节课我们先说这么多，停一下。