尚硅谷前端基础 (45)

好，介绍完了文档流，接下来我们来进入到下一个话题，新建一个文件，也是一个我们3S里面比较重要的一个东西，我们叫做一个核模型，点一跟，嗯，核模型呢，我们这里边是一个我们这个CSS里边非常非常非常重要的一个东西，但是它也也并不难，它只是我们这个CSS这个世界的一个最基本的一个规则，我们一定要好好听一下啊，核模型我们叫什么呢？我们写一下叫做一个盒模型啊，或者有时候我们叫做盒子模型啊，盒子模型或者有时候也叫做框模型啊，框模型那这玩意儿说的都是一个意思啊，因为为那为什么有不同的名字呢？因为这东西都是从这个英文翻译过来的，英文叫做一个box model啊，叫做一个box model啊，盒模型，合同模型，框模型啊，Box model说的都是一个东西啊，说的都是一个东西，你要知道他们代表的是一个什么意思啊，那这边我们来说一下它是干嘛的啊。

啊，干嘛的，那我们这里边要讲，讲的是我的这个布局啊，所谓的布局就是比如说我这儿有一个div，这写一个div啊，随便写一个，我这有个div，现在默认情况下，它是在页面的一个左上角，对吧？左上角，但是既然我要布局了，我要布局就涉及到我可能要把这个元素要干嘛呢？要摆放到我页面的其他位置，哎，我可以往上摆，往下摆，往左摆，往右摆，我想摆放到一个其他位置，那这个时候问题就来了，我要怎么去摆放这个元素呢？哎，无论是你div也好，还是SPA也好，还是P也好，我只要涉及到布局，我都需要对这个元素进行一个。摆放啊，进行一个位置的一个设置，那这个时候要怎么摆放呢？哎，那这里边我们就产生一个问题，我要对这个元素进行一个布局，我要把它放到某个位置，首先我要确定什么，我得知道这个元素长什么样子嘛，哎，比如说我说我要往我家搬一个沙发，那我得知道这个沙发是什么形状的，是圆形的，是是方形的还是长方形的，我得知道它的形状对吧？然后我还得知道这个沙发的大小，对吧，大小，然后呢，呃，我才能把它摆到我的房子里，那这样我得有一个前提，我得知道它的形状和这个大小，那同样我现在想摆这个div，想摆我页面里的某一个元素，我是不是也得知道这个元素的形状，还有元素的大小啊，哎，那问题来了，那我们要说了，这元素的形状是什么形状？哎，你必须得给它一个形状，没有形状我们这儿摆不了，所以这个时候我们就说到一个核模型。

嗯，所以这里边什么呢？诶，CSS将我们这个页面中的所有元素啊，所有元素都设置为了一个什么呢？哎，一个这个矩形的一个盒子，所以你记住了页面里的所有元素，无论你是块也好，还是行内也好，你是div也好，还是P也好，还是图片也好，还是死SPA也好，你在我的页面里都是一个矩形的一个盒子，都是矩形的，都是长方形的啊，都是长方形的，那这里边我们把它想成长方形有什么好处？哎，把它想象成长方形以后，我的页面里边即使有再多元素，那其实就是几个核对吧，我有十个元素，那OK，我就十个矩形呗，我有100个元素，那我就是100个矩形呗，那这样我对网页的布局其实就是干嘛，就是把这些矩形摆放到不同的一个位置，是不是就OK了，哎，就OK了，所以我们说了将。

将我们这个元素设置为矩形以后。哎，设置为我们这个设为矩形的盒子后，哎，对我们这个页面的一个布局就什么呢？就变成了摆放，诶，将我们这个不同的盒子摆放到我们这个不同的一个位置啊，就这么一个特点，所以这个时候所谓的对于我们来说，所谓的网页布局就是摆放盒子啊，将指定的盒子摆放到指定的位置，我们即可完成对我们这个网页的一个布局，就这么简单啊，就这么简单，那这个时候我们就要说了，嗯，矩形。

那我们要想设置这个盒子的大小，就是这个矩形大小，或者我想设置这个矩形的位置，那我要怎么设置呢？哎，那我们要说一下了，所以这里边我们说了，首先你要先建立这个观念，每一个元素都是个矩形，无论是div还是SPA，还是什么ul，所以如果你要看的话，随便打开一个网站，比如说你打开京东，京东里边是不是很多元素啊，哎，我们直接来检查，打开我们开发者工具这一选，你看我这选中的一个是一个LY，现在我这选显示这个区域，就是我这个Li所占的一个空间大小，你看它是不是一个矩形，哎，你看我这是不是一个圆形按钮，同样我用鼠标选中它，你看它外边那个框是不是也是一个矩形，哎，我这登录两个字，我选中它外边是不是也是一个矩形，哎，所以注意所有的元素都是一个矩形，都是一个矩形的盒子，我们通过设置这个盒子的大小，还有盒子的一个位置就可以达到去不。

局的一个目的啊，布局的一个目的，那好，那我们怎么来设置的大小呢？哎，又怎么来设置的位置呢？设置它的位置呢？那我们来说一下我们这个每一个盒子，哎，每一个盒子都由以下几个部分组成啊，以下几个部分组成，其实盒子模型这个名称很形象啊，很形象，我们想一下什么是盒子啊，什么是盒子我们直接搜一下，我看看能不能搜到这个东西啊，我们直接搜一下box。

Bos，我们直接打开我们这个图片，你看这个是不是就是一个盒子呀，哎，你看这就是我直接跟我的这个跟那个谷歌上去搜索了，这是不是一个盒子呀？哎，这就一盒子，那盒子模型就是让你把每一个元素都想象成这样一个盒子，哎，那我们想想盒子里边有什么东西。有什么东西，诶首先盒子最里边什么？诶最里边是不是空的呀？诶那空的它能干嘛？诶盒子里边是不是能装东西，诶装东西那盒子内部装东西的这个空间在我们这儿叫什么呢？在我们的H里CSS里叫做一个内容区，英文叫做content啊，叫做一个内容区，盒子最里边的东西叫做内容区content，它是负责干嘛的，负责装我们元素的内容的，什么子元素啊，什么文字啊，都是放在我们这个内容区里啊，都做一个内容区用来装东西的啊，然后再看我们来看这儿，这儿是什么。这这是不是盒子那个边啊，哎，盒子那个边块，所以有内容区，我们还得有什么呢？我们还得有一个边块啊边框我们叫做一个这个borderder啊，Border边块说白了就是我们盒子最外边那个边缘，它是限制我们盒子范围的一个东西，你盒子大小对吧？边块出了边块，边块里边还算盒子内部出了边块，那是不是就是盒子的外边了，哎，所以这儿这个部分叫做一个边块，诶那我们说了，盒子是用来装东西的，对吧？装东西的我们想一下，我们装一个东西，这个东西是不是紧紧的贴着盒子这个边，是不是紧紧的贴着盒子这个边框，诶往往呢，不是这样，比如说我们买一个电视或者买个洗衣机，那个电视和那个洗衣机一定不是贴着那个盒子的边来的，它一定跟那个边会有一个距离，为什么要有距离？因为避免你在搬运过程当中，你要磕碰这边，如果它是紧紧贴到一起的时候，把那个电视，把那个。

冰箱里给磕坏了，哎磕坏了，所以往往在我们盒子里边，它都会有那么一个泡沫塑料这么一个东西，它把这个我们的产品，电视也好，洗衣机也好，冰箱也好，和这个盒子的边是不是进行一个隔开呀，哎，也就是说我们那个东西和我们那个盒子的边框之间是不是有一个距离啊，诶有个距离，这个距离我们叫做一个拍点，哎，叫做一个什么呢？内边距叫做一个拍点padd啊这东西待会我们还要继续解释啊，还要具体解释，现在大概先记记一下，有个印象叫做一个内边距，内边距是什么？内边距是我们内容区和我们边框之间的一个距离啊，距离，那这都是我们盒子内部的啊，盒子内部的再往外说，最外边一个，我们叫做一个外边距，我们叫做一个Mar marin外编剧是干嘛的？这些东西都属于盒子内部的，外编剧属于盒子外部的，它决定什么？哎，当然我们两个盒子摆。

到一起，我这两个盒子是挨着还是之间有一个间距，这个由什么决定，由外边距来决定，所以简单来说，内容区内边距边框它决定了我们盒子大小，而我的这个外边距它决了我们盒子的一个位置，所以所谓的盒子模型就是有一组属性用来设置我们元素的大小和位置了，就这么简单啊，那在这里边我们找一个图，我们看一下啊，找一个图往上走，我们直接搜一下box model直接找一下，那这里边的图都是显示的是我们box model，诶，盒子模型这么一个图片我们来看一下，我们直接点一个拿这个图来举例子。

哎，就拿我们的这个图来举例子，那这就是我们这个，诶一个比较相对来说比较好的一个图，我们来看一下，首先整个啊，这有一个蓝色的框，蓝色的框这是什么呢？这个是我们盒子的一个边框啊，这个是我们盒子的一个边框，那这部分就属于我们盒子最边缘了啊，最边缘往里边你看实现这部分，实现这部分叫content，你看content age叫区，内容区，内容区是什么？内容区就是我们盒子里边装东西的区域，比就说你所有的东西，所有的产品都是放到内容区里的，而我的内容区你注意它和这个边框蓝色的之间是不是有一个白色的区域啊，诶这个区域我们叫什么呢？叫内边距，是我们内容区和边框间的一个距离啊，内容区和边框之间一个距离叫内边距，所以从里到外，里边叫content的内容距，这部分叫拍定内边距，这部分叫边框。我们的boer边框外边还有一个距离，我们叫做外边距。

这是用来指令什么呢？指定我们当前这个盒子和其他盒子之间的一个距离的啊，一个距离的就这么一个概念，但是现在可能对你来说第一次接触稍微有点不太好理解，没事，我们慢慢一边写一边研究，那在这儿呢，为了演示这个东西啊，我在这儿直接创建一个div，叫做一个BOXSS1 boxss1，然后呢，在这儿我们来给他写点样式，我们这里边我们就要来说一下盒子模型相关的一些属性了，我这直接来一个点一个BOX1，给它设置样式，那现在呢，我先给它设置一个background color background color，我们来一个井号，一个BV，设置一个背景颜色，很明显现在这个东西我们是看不见的，为什么看不见呢？因为现在它是个块元素，默认宽度是100%，默认高度是被内容撑开呀，但是问题来了，他恰巧就没有内容，所以是不是就看不见它呀，哎，看不见它，所以为了看见它，我先要给它指定一个高度和宽度，比如说我来。

这个Y是一个200，然后he是一个200，那这个时候我们就看到了这么一个四四方方的一个盒子，宽是200，高也是200，背景颜色是这一个BFA这个颜色看到了吧？哎，看到了这个就是我们设置的这么一个元素，哎，那问题来了，我们这个wise和hi是干嘛的？

宽度还有高度，那宽度和高度拿我们盒子那个模型来说，我们这个盒子有内容区，外边有外边距，然后这还有一个边框，对吧？那我的这个wise和he是设置的谁的宽谁的高呢？哎，所以这里边我们注意一定注意啊，我们的这个wise和he，我们先说一下啊，我们这儿叫做一个内容区啊，内容区我们叫做一个content，哎，Content content是干嘛的？Content，我们这个内容区用来什么呢？哎，就是我们这个元素中的元素中的这个，所有的这个子元素和什么呢？和我们这个文本内容都在我们这个内容区中排列啊，都在我们这个内容区中排列，所以现在我在这写个字，写个AA，这个AA在哪儿，AAA就在内容区里。

现在我这创建一个新的元素，我创建一个SPASPA里边写个东西，这死SPA在哪？死SPA也在内容距离，所以注意我们的所有的子元素和这些文字，内部的文字都在内容区中排列，我们的内容区的大小，内容区的大小由什么呢？哎，由我们这个wise和我们这个he hed he，哎两个属性来设置啊，我们的wise设置什么呢？设置我们内容区的一个宽度t he。HD he设置什么呢？设置我们内容区的一个高度，所以这一点你要注意，默认情况下我们的wise和head，它并不是说去设置整个盒子大小，而是什么呢？而是设置的是内容区，内容区也就是盒子里边什么呀？盒子里边装东西那个区域的大小啊，装东西那个区域大小，所以wise head一定注意是设置内容区域大小的。好，我们这儿写完了，但是其实你会发现这个东西啊，它还不像一个盒子，不像一个盒子，为什么呢？因为我们说了盒子你是不是得有边儿啊，哎，你得有边，我能看见装东西，但是现在我们这个盒子没有边啊，没有边框，所以你感觉就不是那么的像盒子，所以你要注意wise和head像这个区域，它属于内容区啊，内容区，那我们现在想看看能不能把编号给设置出来，那怎么办？哎，那我们来说一下啊，来说一下我们叫做一个。

边框，边框我们叫做一个boder，需要第二边块是什么呢？诶边块属于我们这什么呢？属于我们这个盒子的一个边缘啊，盒子的边缘哎。

边框里关边框里边还属于什么呢？属于我们盒子的一个内部，而出了边框，哎，出了边框都算什么呢？哎，都是盒子的一个外部，都是废话对吧？废话边框就跟我们这国界一样，这我有个边框，边框里边就是内部边框外边就是外这么一个概念，那我们怎么设置边框，那注意了，边框设置起来比较麻烦，我们要设置边框，我们需要什么呢？我们需要至少设置三个样式啊，至少设置三个样式哪三个样式？第一个我们要设置边框，第一个我们叫做一个边块的一个宽度，你的边块多粗？哎，你的边块多细？诶是不是边块要有一个宽度哎，边块的宽度我们使用什么呢？叫做一个borderder wise来设计啊border wise边块宽度第二一个我们叫做边块的一个颜色，哎，你的边块什么颜色呀，是红的是蓝的是。

紫的还是什么颜色，所以第二一个我们叫做boder color啊，我们来指定边块的一个颜色，第三一个是我们边块的一个样式，或者边块的一个风格，叫做boer style，这什么意思呢？你的边框是实线的，是虚线的，是边点点的，还是突出的边框，这有一个边框的风格，所以你要设置边框，至少要设置我们这三个玩意儿啊，至少设置三个玩意儿，那这里边我们来看一下，我这直接写一个border border，我来一个十个像素，那意思就是我这个边框的宽度是十像素，十像素，然后再往下写，我们来一个border border是我们边框的一个颜色，我来一个。Red表示这是一个红色边框啊，红色边框，然后我们再来一个border的一个style，我们直接来一个solid solid表示什么呢？实线的，那也就是说我这三个写完了就表示是一个什么呢？实像素，红色的一个实线边框，那你再看我现在设置完了，这是不是就出现了一个边框啊，哎，那这个就是我们的这个边框，你会发现里边的叫做内容区，而这一部分叫做什么呢？叫做边框，诶我们要注意，刚才可能没看清楚，我设置完边框以后，我这个盒子有没有变大，有没有变大，看着啊，我换成一个100像度你看。

大不大？哎，是不是确实变大了，开始是不是只是这一部分呀？哎，当我设置完边块以后，整个盒子就变大了，所以这个时候先改回来十啊，所以这个时候我们要说一点叫什么呢？我们边块的大小，边块的大小它会什么呢？会影响到我们这整个盒子的一个大小，所以现在看这个盒子现在是多大的？哎，我们里边是200乘200，这是200乘200吧，哎，然后边块十像素，注意十像素，什么十像素是上下左右四个方向都是十像素，所以这是十，这儿是十，这儿是十，这儿也是十，所以现在我们整个盒子一个大小是多少？诶，是一个二百二乘以220，实际像素为什么大了？因为我们这儿内容区是200，边框还占了20，所以我们可以拿我们那工具的，你可以稍微量一下。

直接点开大。哎，我们把我们这个尺子弄出来，我们看一下啊，是不是220。哎，这边应该是没有，我们来看一下啊，这是一个，这一下这是一个，诶诶诶鼠标不太灵。往这边挪一下啊。这应该正好是一个220，刚才可能没对准，多出了一个像素，但是这里边应该是，哎，你看到这儿对齐是不是正好对到这个二百二像素，这哎你应该能看到对吧？应该能看到，所以这块我们就不再去不再去多展示了啊，正就是一个220，到时候你也可以自己拿那个尺子去去量一下，或者用什么呢？用我们这个截图工具啊，你这是从这底啊拖一下，这截图工具易拖跑了，容易跑了，它是不是也是一个二百二啊，哎，也是220，我就不拖那么准了啊，所以这里边注意我们的边块，它也会影响我们盒子的一个大小，嗯，这里边其实你会发现了我们的一个盒子的雏形，你基本上就看出它长什么样了，那这里边就是一个盒子对吧？里边就是内容区，外边就是我们这个边框，而且注意边框要涉及到我们三个属性，但是关于边块的一个细节我们要待会儿再说，接下来你需要干嘛呢？尝试着把这类东西来写一。

这记一下记什么外he设置的是内容区的宽度和高度，它只是设置内容区，它并不是设置整个盒子的大小，也就说这整个盒子并不是200乘以200的，你算的时候你还要考虑到什么，考虑到边框边块加了一个十，上下左右都是十，那这个时候我这时候变成了一个220，所以现在我整个和大小是一个两百二乘以220，这个个一定能给它转过来啊，所以待会儿尝试着把这东西写一下，当然待会我们还要讲一个pading，我们会说我们加了拍Ding以后，盒子又会进一步被撑大啊，被称大好，那这里我们是一个盒子模型的简介，我们先说这么多，停一下。