尚硅谷前端基础 (58)

好，讲完了这个练习呢，我们继续回到我们的这个正常的这个正常的课程当中来啊，还是强调一下这三个练习呢，整体来说都并不是特别难做的时候呢，诶一定要细心一点啊，慢慢去做一下，哎，甚至可以做哎多做两遍，那接下来呢，我们这个布局这块核模型啊，当然我们这块布局还没有到真正意义上的一个布局，主要还是讲的是一些核模型的一个概念，那当然这里边的东西还有一些东西我们没有说完，所以接下来我们还是接着回到这儿，我们要补充一些问题啊，我们来新建一个文件，我们这儿叫做一个。1111呢，我们叫做一个，哎，叫做一个盒子的一个尺寸啊，盒子的尺寸，哎，盒子的一个大小，盒子一个大小呢，我们就直接写一下啊，我写一个这个点一个BOX1，嗯，点一个BOXS1，创建这么一个元素，那这里边我们就可以直接给它通过这个style标签来给它设置一下样式啊，我们点一个这个BOX1 box1呢，Y是100 hi是100，然后这是来一个这个background color background color，我们来一个这个BFC啊，井号一个BFCBFV啊，然后在这我们直接给它再设置一个pading pading呢我就来一个十像素，然后呢，我们再来一个borderder啊，Borderder直接来一个十像素的，然后来一个red，然后来一个这个solid啊，然后在这里面我们直接让它运行一下。

Open。好，打开这个页面以后，我们看到啊，我这个啊Y是写成十了，改成100，那现在我就创建好了这么一个大个这么大的一个盒子，那现在我就要问你了，这个盒子它的大小是多大，它的可见宽的大小是多大，哎，那可见宽大小我们说了，我们说默认情况下，默认的这个情况下，我们这一个盒子的这个可见框的大小有什么呢？诶有我们的内内容区啊叫什么呢？哎，内边距和我们边框哎共同决定，也就是说它是由我们的盒子的这三个部分来决定的啊，这三个部分的大小加一块是我们合作的一个可见花的一个大小，内部的话，诶内容区是一个100对吧，内容区是一个100，那个那边距呢是一个十啊上下四个方向，上下左右四个方向是十，然后边框也是十，所以现在的话，像我们这个盒子的大小应该是一个一百四乘以一百四的。所以如果。

你拿你的截图工具，你简单量一下啊，从那个最最边缘的边框这量一下。拖到我们最下边，这一定是一个正好是一个一百四乘以一百四啊，一百四乘一百四的大小，那这个就是说它实际上是把我们的这个，哎，这几个值给它加一块儿了，也就是说我们的内容区内边距和边块三个属性共同决定了我们整个盒子可见块的一个大小，那这个东西注意了，默认情况下是这样，也就是说意味着我们是可以修改的啊，修改的，所以这里边我们说一下，在我们盒子模型里边一个属性叫做一个box sing box sing box就是盒子塞ing，就是一个尺寸啊尺寸我们先看这个值，这个值叫做一个content box，你看我设置完了这个content box以后，这个东西有没有任何反应，哎，没有任何变化，那这个属性是干嘛的box sing，哎，它用来设置什么呢？哎，用来设置我们盒子尺寸的一个计算方式，也就说你的盒子大小是怎么计算的，换句话说。

及时设置什么呢？设置就是我们这个wise和这个he，它指定的什么呢？诶的一个作用范围啊，的作用的作用啊，就是wise和he的作用，那这里边我们来说一下可选值，可选值我们的第一个就叫做一个content box啊，Content box con TNT content box content什么意思？Content叫做一个内容content box叫做一个内容盒子啊，内容盒子啊，那这叫做一个默认，默认值我们的宽度和什么呢？和高度，用来设置我们这个内容区的一个大小，所以如果你的box setting是一个content box，那就意味着你的宽度和高度指定大小是内容区，也就是中间这一块区域的大小，那这个时候整个盒子大小你就需要把内容区那边距，还有我们的边框加在一起来计算，那还有一个值我们叫什么呢？哎，我们叫做一个border box border box啊看效果啊，改完了看效果看效果。

干嘛了，我整个盒子是不是变小了，哎，变小了啊，我们来看一下啊，我们来看一下，我们来看现在它是多大个。这个东西量起来太麻烦了啊，我们来拖一下，现在是不是就是变成一个100乘以。

100这么一个大小啊，我拖的稍微有点差一点啊，但是实际上大小就是一个100乘以100这个大小，这不太好拖，所以这个时候你注意了，我们叫做一个包ER box叫做一个边框盒子，它是一个可选值，那这个时候当你设置完这个borderer box，把这个box setting设置为borderer box以后，现在的wise和he就不再是修改内容区的大小了。哎，Borderer box它是干嘛的？哎，我们这个宽度和这个高度它是用来什么呢？用来设置我们这个整个盒子的一个可见框的一个大小啊，可见框大小，也就是说这个wise和head它们的一个大小，实际上指的是什么？指的是我们内容区内编距，哎，我们写一下width wise指的是什么呢？哎，指的是wise和这个hi，诶，指的是什么呢？诶指的是我们这个内容区和内边距和什么呢？和我们这个边块的一个。

总大小啊总大小，当你设置完这个borderer box的时候，它就是这样一个效果啊，就是这样一个效果，那也就是说这个时候这个100就指的什么是整个盒子大小，那里边你要注意了，当我设置完bother box以后，Y和head的属性规定就是整个盒子一个大小，这个时候你再去吃如果啊，如果没有边框，没有内内容，没没有内边距，那么外和汉就是内容区大小，当你只你看着啊，我把这给它去掉，我把边块和这个内边距去掉，你会发现我盒子大小有没有改变，没有改变，如果没有边块，没有内边距，那么外和害的同样也还是内容区大小，但是加当我加上边块以后，当我加上边块以后，实际上你看之前我们加边框加上内容区，我们的这个边框它应该是往往外扩的，对吧，往外扩的，但是当我是一个box塞进以后，我的边框是往里挤的啊，往里挤的，所以当设置完这个border。

Box以后你再设置边框，再设置拍顶，实际上它会减小内容区的空间，哎，所以说白了，它会自动调整内容区的空间，以适应我的这个盒子一个大小，那所以box塞的那个borderer box一个好处就是你写完了以后，你如果是用了它，用了它的话，那其实很大程度讲，我们就不再需要去计算我这个盒子大小了，因为我Y和氦的写多大，这个盒子是不是就是多大呀，就这么一个作用啊，我们的一个box塞ing，我们说了一下我们这个盒子的尺寸比较简单啊，我们来一下。