48.尚硅谷_HTML&CSS基础_盒子模型-边框.avi原创

我们这个盒子模型，然后呢，那我们就需要干嘛了呀，需要在我们这个页面里来看看这个盒子模型这些什么，内边距呀，内容区呀，边框啊，外边距到底是一个什么东西，那这里边我们来新建这么一个HL文件，我们叫一个零九，叫做一什么呢？叫做一个盒子模型啊盒子模型，那这里边盒子模型那我就来整一个，随便整一个，整一个什么呀，Div给它一个class叫做一个BOX1，我们说了任何元素都是一个核，那我们说了div是不是哎也是一个核，但这div我整完了，我CTRL运行，我看见看不见呀，看不见，因为里边是不是没有东西啊，那我想看见怎么办呀？诶我需要给它设置一下样式，但我们这点一个BOX1BOX1，我这来什么呢？给它设置一个这个宽度，我来什么呢？100个像度，来一个高度，来一个100个像素，那我们来说Y表示什么呀。宽度head表什么呀，表示的是高度啊，表示高度，所以这里边我们使用Y来设置什么呢？使用我们这个Y来设置我们这个盒子内容区的宽度，使用什么呢？使用我们这个he来设置我们这个盒子内容区的一个高度，那注意为什么要突出是内容区，我们待会再说啊，待会再说我们先看这个效果，Wise设置完了，Has也设置完了，但是设置完了以后干嘛呢？还是看不见，为什么呀？哎，默认是不是透明的呀，所以这里让我们最好给它设置一个背景颜色，设置我们这个背景颜色，直接来一个background color，来一个井号BFA这么一个豆沙率来保存易刷新走，你是不是出现这么一个100乘100的盒子呀？哎，我们会发现，那我们现在问你了，我这盒子才多大个啊，哎，是不是100乘100呀，我刚才宽设了100高是不也。

是100啊来，我们来简单量一下啊来。

是不是正好是一个100乘100啊，当然也会有一些误差啊，这是量的误差，但是一定是什么呀，100乘以100的啊，所以这块现在我们这个盒子大小就是一个什么呀，就是一个100乘以100的一个盒子，但是换句话说了，这东西其实看来看去吧，它像不像一个盒子呀，其实还是不像盒子，它还是就像一个小小小方块是吧？哎，小方块，那如果你说这东西要是一个盒子，我们这个盒子最好是不是得有一个得有一个边块啊，哎，得有一个边块，所以现在我就需要盒子这什么呀，是不是这个边块显出来呀？诶，那问题就来了，我们怎么来给盒子设置。边框呢？诶怎么来给设设置边框呢？那这里边我们来说一下，诶为我们这个元素设置边框，那怎么设置边框呢？那我们来说一下边框要为一个元素设置边框必须什么呢？必须指定我们说三个样式啊必须指定三个样式，一定要注意边框相关的有三个样式，缺一不可，哪三个样式呢？第一个我们叫做boer的一个什么呀？边框我们想有什么呀？诶边框with边框的一个wise叫做borderer wise这是什么呀？诶边框的一个宽度，换句话说你要指定边框，你这边框多宽，你是这么宽还是这么宽，这东西是不是不一样啊？哎，Y表示我们这个边框的一个什么呀？宽度啊宽度，那wise除了wise还有什么呀？诶border是不是还有颜色呀？哎，Bo叫做一个color，这是指定我们这个边框的一个颜色。也就是说你。

你这个边框到底是黑色还是红色还是绿色，哎，我们这个边框的一个颜色，然后再来看颜色宽度还有什么呀？诶我们想想这我这边框既然是我页面里的边框，我这边框可以是什么呀？我可以是实线的对吧？我还可以什么呀？诶，我还可以是虚线的对吧？我甚至还可以什么呀，我还可以是双线的边框对吧？我还能什么呀？还能是这种点的边框，那问题来了，那你到底想用哪个风格的边框，你是不是得告诉他呀？所以还有第三个叫什么呢？Borderder style，诶，这是我们这个边框的一个样式啊，边框的这个样式，所以注意边框相关的，我们有这么三个属性，Wise color，还有什么呀，Style啊，Style，那我们现在来尝试写一下啊，来写一个来什么呢？Order，来一个这个这是什么呀？这是设置我们这个边框的一个宽度，诶那宽度我们。

这是多少呢？我们设置了一个呀，大一点来一个什么呀，十个像素或者这样，我来一个什么呀，100有点大，我们就十吧，哎，十个像素宽度的一个什么呀，边框啊，那现在我这一保存，你说有没有，有没有，哎，没有，我们说了三个样式是不是缺一不可呀，少一个都不行，都必须得干嘛呀，设置来，咱们接着整边框的宽度，有了我们再整一个我们这个边框的设置，我们这个边框的一个什么呀，颜色，颜色我们叫一个border color啊边块颜色我来一什么颜色，咱们来一个这个yellow，不是，诶这都是绿色的是吧，不要它了，来一个什么呀，来一个红色啊，Red表示一个红色的一个边框，诶，那我们说了，那你说我刷新有没有啊，没有，是不是还少一个什么呀，Border style，哎，Border style，来接下来再来设置我们这个边框的一个样式来叫一。

什么呢？Border style border一个style样式，我设什么呢？叫做一个solid solid表示什么呀？叫做实线的啊，这是一个实线的变化，好，那现在我指定这么三个样式实现式在干嘛呢？再给我这个class为BOX1的这个。元素设置了一个十个像素颜色为红色的一个实线边框，我们来看看有没有保存，咱们这一刷新来走你干嘛了，是不是边框就出来了，哎，就多了一个十个像素的这么一个边框，所以注意边框我们说三个样式缺一不可，必须全都得有啊，全都得有那好，那现在我们这要看一个问题了，诶我一设置边框，我这盒子它大小变没变呀，诶咱们这样啊，我先把这style去了，STYLE1去一保存一刷新是不是没了呀？诶然后把style给加上，我们来看看效果啊，现在我这一刷新走你诶。

好像整个盒子是不是变大了呀？诶来我们看看，咱们简单量一下，看看大没大啊，刚开始是我一量是不是100乘100啊，这一量我来看诶变成多少了，是不是一百二乘以一个一百二啊，哎，变成了一个一百二乘120，发现我整个盒子变变大了，那这是为什么呀？诶我左边我是不是给它加了一个十个像素的边框啊，那我们想想中间是一个100，左边加了十，右边加了十，是不是变成一百二了，上边加了十，下边加了十，是不是高度也变成一百二了？哎，你看我们设置完边框以后，实际上整个盒子的大小干嘛了？

是不是发生变化了，诶，那我们来说一下，那现在我这个盒子还是不是一个100乘以100的盒子了，不是了，诶那不对啊，你这个宽还有这个高不指定的是100吗？为什么不是100乘100了，诶一定要注意我们这个wise和he，它设置的只是什么呀，盒子内容区的大小，而不是什么呀，而不是盒子的整个大小，什么叫内容区？来看这个图内容就是哪部分，哎，是我最里边这个部分吧，也就说换句话说，这是我盒子的一个装东西的那个什么呀空间，而我盒子的整个大小，它有可能干嘛呀，是比它要要大呀，哎，要大啊，所以这个一定要注意啊，一定要注意外和这个he只是设置的我们这个盒子内容区的什么呀大小而。

什么呀，而不是我们这个盒子的什么呀，整个大小啊，整个大小，那我们说了盒子的整个大小由谁决定呢？整个大小或者叫什么呀，我们叫做一个盒子的一个可见框的一个大小，也就是说盒子整个可见一个大小由谁决定呢？由我们的这个内容区还有什么呀？内边距和什么呀，和我们这个边块干嘛呀？诶共同决定啊，共同决定，所以注意你要计算一个盒子的大小，必须把它什么呀，把它的内容区，还有内边距，还有边框干嘛呀加到一起来计算，所以咱们来看这盒子，我这个盒子内容区是多少？100乘以100，然后有没有那边距，没有那边距啊，没有那边距，然后四个方向是不是有十个像素的一个边框啊，四个方向十个像素，那左右实际上各加了什么呀？诶20上下是不是各加20啊，所以现在我这盒。

大小实际上是多少？哎，实际上是一百二乘以一百二的啊，这个东西非常的重要，当我们做一些固定布局的时候，如果你算不出大小这东西跟非常的什么呀，麻烦啊，非常的麻烦，诶好，这就是我们说的盒子啊，叫做一个wise head设置是内容区，Borderder是设置我们这个边框，好，那这一块我们先说到这儿，往下接着来说啊，那这个边块我们这设置完了，那我们来分别说一下啊，那border was是设置了我们这个边块的一个什么呀，宽度我设置一个十表示什么？是不是表示我们这个四个边块是不是都是十啊，哎，我这改一个，我改一什么呢？改一个100，那什么意思？是不是四个边盖都变成100了，来，我这一刷新走你，哎呦，人大，我说现在这盒子变成多大了？

变成多大了？哎，这是100，中间是100，这又是100，是不是横向变成300了，纵向是不是也是300啊，诶变成了一个300乘以300的了啊，所以注意盒子大小由这些元素共这些因素共同决定，而不是仅仅由谁啊Y还有氦诶但是这个东西呢，还真难看来给它改回来，现在就变成了十个像素啊，变成十个像素诶那现在你会发现我一改这个值它就干嘛了，是不是同时影响四个方向边框的一个宽度啊，诶那我想想我能不能分别去设置呢？比如说我想干嘛呀，我想让上边关边框干嘛呢？十个像素，右边边框呢，20个像素，下边边框呢，30个像素，左右边框呢，40个像素，换句话说，我是不是希望这个边框的粗细。

不一样啊，行不行呢？哎，我们来看看啊，我们来看看直接说啊，使用我们的这个borderer west可以什么呢？可以分别指定我们这个四个边框的什么呀，宽度啊，分别指定我们这个四个边框的宽度，我来看效果，直接来一个borderder borderder来一个Y，看我怎么写来一什么呢？10PS，刚才是不是只写一个值啊得，这回我干脆多写几个，来一个20PS，再来一个30PS，再来一个40PX，你看我只剩几个值，是不是四个值啊，诶四个值我们来看什么效果，这回我看看它还是不是一边粗了，直接我这一刷新来走你，哎哟，诶这图形还挺有意思是吧？哎，你看还是不是一边粗了是。

是上边的最细，而左边的最粗啊，哎，最粗，那我们来说这四个值都是什么意思。哎，我们来看最细的是谁呀，十像素是不是应该是上边这边块啊，然后第二个是不是20个像素是不是应该是我这个右边这块啊，然后再次的是我们这个30个像素是不是我这个下边的呀，最粗的是谁？40个像素是不是我这个左边的呀，我们发现这值正好是什么，是不是顺时针的顺序设置的呀？哎，顺时针的顺序去设置的，所以注意我们来说一下叫什么呢？如果我们在我们这个borderder y中指定了什么呀，四个值则什么呢？诶则四个值会什么呢？会分别设置给设置给谁呢？设置给我们这个上右下哎左，它是什么呀？它是按照我们这个什么呀，叫做哎顺时针的这个哎方向设置的，所以注意这个顺序，我这么写什么意思，上边十像素，右边20像素，下边30像素，左边40像素，这个能懂吧？诶好，这是四个值，那我们说来四个值太多了，我不想写四，我就想写什么呢。

我写三写三指什么情况，咱们来看效果啊，直接来看效果，诶现在我们来说这是十，这是20，这是30，这是40，我来刷新啊，咱们来看走你诶发现什么了，上下变没变没变吧，上下还是那样，发什么了，是不是就左边变了呀，左边变的和这个右边是不是一样了，哎，一样了，那这是什么意思呀？来那这个如果指定三个值，直接给结论，如果指定三个值则什么呢？诶则这三个值会什么呢？会分别设置给谁呢？第一个值十像素给谁呀？诶给我们这个上第二个值叫做一个20像素，我们我们会发现什么呀，实际上左边和右边是不是都是20像素，所以注意第二个值会应用给谁呀。

诶给应用给我们这个左右两个边啊，两个边，而第三个值是30像素是什么呀？诶会给我们这个下边那个方向，所以注意三个值的情况，这表示什么意思？上边十个像素，左右全都是20，下边是什么呀？30个像素啊，下边是30个像素，好，这是我们说这个三个值的一个情况，然后再来看，那还有什么呀，是还有俩值啊，俩值其实就简单了，猜也猜着了，是不是上下左右啊哎下左右来一个10PS来一个什么呀，20PS保存我们来看这一刷新走，你看什么了，是不是上下是十个像素，而左右什么呀？诶20个像素啊，所以注意这是我们这种情况当什么呢？如果指定两个值。

左哎两个值会什么呢？会分别，哎设置给我们什么呀？哎上下是一个，然后什么呀，哎左右是一个，所以我这么写表示什么呀，上下十个像素，左右什么呀，20个像素啊，左右20个像素，然后还有最后一种情况，我们已经看到过了一个值。保存一个值，那就没得选了是吧，你就一个值，四个边全都是什么呀，哎，全都是一样的，所以这里边如果什么呢？如果指定一个值，则四边全都是该值啊，全都是该值，这个规律给它记住了，不仅仅是这一个，包括我们下边这个什么呀，Color，包括我们这个style都适用于这个规则，包括我们马上学的什么拍定，包括marin都适用于这个规则，一定注意，如果四个值就是顺时针上右下左，如果三个值上左右下，如果两个值上下左右一个值就是什么呀，上下左右都是它啊，上下左都是它，这是我们说这个包的wise啊好，那这个东西我们看完了，然后再看啊，我们说了这个borderder wise1指定，你要不然就指定他可以干嘛呀，是不是分别指定四个。

边呀，那我们说了除了这个还有没有其他的呢？诶，我们来看看直接看文档啊，我们说了边框相关的样式是最多的，诶，我们来看看直接找到我们这个边框，你看看见了吧，诶，边框相关的都是最多，但是还好并不是全都常用啊，我们来看这有什么？除了border was，我们看这有一什么叫做border border wise，这有什么呀？Border left with，这有什么呀？Border。

Right，这有什么呀？Border top we，你会发现是不是还有这么多呀，Border什么意思呀？诶，底部那bottom bottom with的意思就是专门设置我们这个底边的一个宽度，而我这个left表什么呀，专门设置左边的宽度，Red with专门设置右边的宽度，Top袜专门设置什么呀？哎，上边的宽度啊，所以这里边注意除了什么呢？除了我们这个borderder Bo DR borderder west，诶我们这个CSS中干嘛呢？诶还提供了什么呢？哎，还提供了四个什么呢？Bo border叫做叉叉叉wise啊，Border叉叉S叉叉的值，哎，可能是什么呀，可能是，哎，Top right，哎，Bottom，还有一。

就什么呀，哎，Left啊，Left那什么意思呀？诶专门用来干嘛呢？诶专门用来设置我们这个指定边的什么呀，宽度，那比如说举个例子，我不这么写了，我这里边给它住了，我来什么呢？来一个这个先给它搁着吧，不然待会儿都没了，来什么呢？我来一个bottom bottom这边什么是不是设置下面宽度啊，我来一个什么呢？100个像素，我们来看效果，一保存咱们来看一刷新走你诶是不是只有下边变了呀，而其他变都没有变，那同理，我来一个border top with，这表示什么呀？哎，上面的片宽度，其他的是不是都不动啊，我来个什么呀，Border left with保存只设置什么呀，左边的宽度啊，其他的不变啊，所以注意，我们可以通过这个属性来单独的去修改我们这个四个方向啊，四个方向一共是top red bottom left4个值啊。

格好，那这块我们就不多说了啊，这是我们这个border的一个wise宽度，那还有什么呀，下边我们这什么呀，颜色还是这样，我指定一个值表示什么？哎，是不是四个边都是红色呀，哎，都是红色，我来一个换一个right，我来一什么呢？来一个这个yellow来个yellow来一什么呢？GR，嗯，来个古，再来一个什么呀，Blue，呃，Blue这古有点串色了，来一个这个orange吧，Orange诶我指定了几个颜色，四个颜色，那四个颜色什么意思？哎，是不是还是顺时针呀，上边哎红色，右边黄色，下边哎橘红色，然后左边是我们这个蓝色，我这一保存，这东西肯定是贼好看的是吧，一刷新走你诶是不是出来了呀？哎，四种颜色的一个边框，那再看来零三什么。

哎，是不是上这是什么呀？左右这是什么呀？哎，下，所以上边是一个，哎，上边是一个红色，左右是一个黄色，哎下边是一个，这个橘色啊橘色这么一个，那那我们来说，如果俩值呢？哎，上下左右啊，上下左右一个值就是四个方向啊，一个值四个方向，所以这个规则都是什么呀，都是一样的，一刷新是不是上下左右这么一个，诶上边是红色，上下是红色，左右是黄色啊，左右是黄色，好，这个就是我们说这个规则啊，边块的一个颜色，那我们说了，其实我就不用再多说了，那其实呢，我们说borderder rice提供了top right left bottom4个方向，那你说color有没有啊，诶也有什么呀，Border border color border left color border red color border top color是不是都有啊，包括style是不是一样啊，哎，好，那这里边我就不再去叙述了啊，不再叙述了。

啊，所以这里边我们要注意和什么呢？和我们这个宽度一样，哎，这个color也提供了什么呀，诶也提供了我们这个，诶四个方向的这个样式可以什么呢？可以分别指定什么呀，颜色啊，可以分别指着颜色啊，咱们就不多说了啊叫做border叉叉叉color啊border叉叉color叉叉叉color，诶叉叉同样也可以是top right bottom，还有这个left啊left好，这是我们这个边框的一个颜色，然后我们来看看什么呀，还有什么呀，还有这个边框的一个样式，哎，样式我们说边块的样式，我们来说它的，我们直接说它的可选值，可选值呢，Solid表示什么呀？叫做一个实线的啊实线的那它还有什么其他值，诶是不是还得有虚线呀，直接来看我们这个文档borderder style，点开它往。

他找可选值，你看是不是还很多呀？诶，那有一值，它的默认值，我们来看默认值它还，诶not special什么意思，没规定啊，Not special的没规定，换句话说W3C没对这东西进行规定，那具体规定由谁决定，由浏览器进行决定，但是一般默认值都是什么呀？那啊，一般默认值都是，那好，那现在那表示什么呀？哎，没有变化，我们来写一下，那这是默认值，大家注意这不是W它的规定的啊，这是我们这个默认值叫什么呀？没有边框啊，没有边框，然后我们再来看还有什么呢？诶刚才我们这个叫什么呀，叫做一个solid叫什么呀，实线对吧，诶线，然后再看还有什么，这有一个叫什么呀，Doubtted doty什么意思呀，叫做一个点状边块，点状边框什么效果，我们来看看do地的叫做一个点状边块来直接写改过来。

保存一看效果走你，哎呦还真难看呀，颜色我给去了是吧，那我也看到了，我没写颜色默认什么呀？哎，默认是黑色啊，默认黑色保存这一刷新走你，哎这这很可爱，这还出来一个桃心是吧？这这是这是挺好是吧，你看随便一写就这么漂亮啊好啊，这里边我们注意啊，叫什么呀，叫做一个刀TY的，我们叫一个点状的一个虚线啊，点状的虚线有倒TY的，我们还有一个叫做什么呀，叫做一个大式的，大式就是什么呀，就是我们这个虚线啊，大使就是我们这个虚线来直接粘过来叫做一个大使，保存一刷新走你哎呦呵，这东西就是干嘛呀，就是太太小了，所以看不出来，咱们让它宽一点吧，让他这个300像素。

300线索保存一刷新走你诶是不是这么一个虚线的一个效果呀，诶虚线一个效果啊，我们叫做一个，诶叫做一个这个大式的一个虚线的效果，还有一个什么呢？还有一个叫做。Double double什么意思诶，双显编框，双显保存，我们再一刷新走你可我没改是吧，写注式里边了，这一刷新走你，诶是不是两条线呀，哎，这是这么一个双线的一个边框啊，双线边框，那这里边我们就说这几种，一个是solid的实线，到底的是一个点状的，大致的是一个呀，虚线double是一个什么呀，双线那是没有啊，那是没有，那除了这几种，实际上在我们这个文档里干嘛呀，你看这什么如3D凹槽边框，什么睿3D拢边边框，INSIDE3D inside边框，OUTSIDE3D outside边框，这名儿说的挺虎的是吧？诶自己来测试一下，我们一般用的比较少啊，下去以后自己感兴趣自己测试一下，我们就不说了，我们常用其实主要是什么呀，这几个double其实都不咋用啊，主要是这几个啊，我们来了解一下就OK了啊，那现在不说了，那我这四个边的边。

冰块我们能不能分别指定样式，哎，是不是一样的呀，所以这玩意儿简单，虽然说样式多，但是学会一个全都会了，来一个solid力的，来一个sal的，再来一个这个大式的，再来一个我们这个double，诶你就想想这东西得多难看，哎，那这什么意思，上边实线右边点状诶下边虚线左边双线啊，双线一保存，咱们一刷新走你。

诶，是不是这么一个效果呀，哎，可以分别指定我们这个四个边的一个边框规则和我们上边什么呀。一样啊，规则和上边这一个一样，我们说这个带还的tle也可以什么呢，也可以分别指定我们这个四个边的一个什么呀，边框诶样式规则和什么呀，和我们这个wise一致，同时哎，它也提供了我们什么呀，哎，Borderder Bo b borderder叉叉叉带诶四个样式来干嘛呢？诶来分别设置四个边啊来分别设置四个边，好那我们这个边框呢，就算是给它说完了啊，注意边块相关的样式有三个，Borderder wise边块的一个宽度，Border color，我们边块的一个颜色，还有一个border带边块的一个这个样式，边块的一个这个风格啊样式风格好，这一块说完了，我们先给它停一下啊。