49.尚硅谷_HTML&CSS基础_边框简写属性.avi原创

接下来呢，接下来说咱们今天的内容啊，来外边下我们来一个DAY05，那我们昨天说到了核模型，我们只说了一个边框，但是边框我们还没有说完，我们再回顾一下我们这个边框啊，我们来说一个我们这个，诶还是我们这个边框不的。诶，那这里边呢，我们要说边框了，我先干嘛呀，先整出一个边框来，我这来一个诶div，直接点一个这个box，诶box，然后我们就来写一个样式style，直接来一个点box box，我来一个white，咱们大一点来一个200个像素，Hat来一个200个像素，然后来一个background color来一个井号B。保存CTRL运行，这是一个什么呀？现在我们这盒子大小是多大个，哎，是不是一个200乘以二百一个盒子呀，哎，200乘以二百一个盒子，好，那接下来我们来看，我来给它设置边框，我们说了设置边框需要设置三个样式，设置我们这个边框哪三个样式呢？第一个是我们这个borderder，哎，Borderer west borderder west，我来一个什么呢？来一个十个像素，然后还有一个borderder，诶Bo DR borderder一个color，诶borderder color来什么呢？来一个red，然后我们来一个borderder style啊borderder style我们来什么呢？来一个这个solid，我们这个实现啊保存咱们来看效果，一刷新走，你是不是边框出来了呀？诶，这就是一个什么呀，十个像素实现的什么呀？红色边框啊，十个像素实现的红色边框，那这里边你要注意了，我们说了设置边框是不是每个样是不是缺一不可呀，少一个都不行，但是实际。

这子你说我不写这两个他行不行呢？你们来看效果，来看效果，我这一刷新走你哎呦是不是也出来了，诶不是说缺一不可吗？注意了，我们说了这个东西都有什么呀？哎，默认值V，如果你不写默认值，它浏览器不一样，我记印象里好像是三个像素，我们可以看一眼啊看一眼点开这fire bug来选中我们这盒子怎么看呢？看这儿有一个什么呀，有一个这么一个布局，看它了吧，一选这布局你发现干嘛了，它是不是把我们当前元素这个核模型给我们显出来了，哎，你来看这里边是我们什么呀？内容区是不是200乘以200啊，内边距是多少啊，零外边距是不是也是零啊？我们来看边框是多少？三那证明我们火狐浏览器边框默认什么呀？默认是三啊，默认三，而颜色默认是什么呀？诶黑色，那为什么我这一我为什么要都不写它就没有。

我只写一个style，它就有一刷新，是不是写style就有了呀？哎，我们来说一下啊，我们来说一下。大部分的这个浏览器中什么呢？我们这个边框的宽度和这个什么呀，颜色都是有什么呀，有默认默认值的，诶而什么呢？而我们这个边框是什么呀，边框的这个样式，它的默认值什么呢？默认值都是什么呀？捺啊，边框的样式默认值都是一个捺，那是不是就没有边框啊，所以默认我们这个边边框出的来出不来呀，出不来啊出不来，所以干嘛呢？我们最简单的方式，我直接指定一个样式，这个边框干嘛呀，也可以出来，因为宽度还有颜色都指定了什么呀，默认值了啊默认值了，所以这块注意啊，我们不是说只写一个它就能出来，为什么呀，因为这两个它都写了什么呀，默认值了啊，默认值了啊好，这也是我们说这个边框的设置，但是我们说这块虽然设置，但是我们发现这有点麻烦，怎么麻烦，我要设置个边框，我是不是同时写三个样式啊，就给我们设置字体。

对，我要设置个字节，我同时得写五个，我们就希望有一个什么呀，是不是简写样式啊，诶简写样式有没有呢？哎，有刚才我们跟你说了，有个什么呀，有一个叫就样式就叫什么呀，就叫borderder啊叫border，那我们来说叫什么呢？呃，Borderder这是我们这个边框的一个，这个简写样式，通过它可以干嘛呢？可以同时设置我们这个四个边框的什么呀，诶样式粗细，诶叫做宽度，还有什么呀，还有颜色，也就是说通过这一个样式我可以同什么呀，同时设置三个样式啊同时设置三个样式，然后我们来说，而且那我一想设置三个样式，它有没有顺序，顺序要求啊，哎，我们说而且什么呢？没有任何的什么呀，顺序要求去，哎顺序要求举个例子，我还是把刚才这写一遍，我来什么呢？我来一个这个10PS这。

表什么呀？宽度是十，我来一个red表示什么呀？颜色是红色，我来一个solid表示我们这什么呀？诶是一个实线的，我这一保存，咱们来看刷新走你效果是不是一样的呀？哎，效果是一样的来干嘛呢？我把这solid呀放前面保存，一刷新走你是不是也一样的呀？哎，我把这个right放前边保存，是不是效果也一样啊？诶所以注意没有顺序要求三个，谁在前谁在后都可以啊使用border可以同时设置四个边框的样式，但是这里边你要注意了，我们border one border color borderstyle是不都可以单独指定一个边呀，而注意啊，BORDERER1指令，哎一指令就什么呀，就是四个边，诶就是同时指定什么呀，指定四个边不能什么呀，不能哎分别指定啊。

啊，不能分别指，所以注意我这一写red solid10PX，那就表示什么呀，我四个边全都是什么呀，全都是这样的啊，全都是这样的啊统一的样式啊，我们用这个borderder，那除了这个还有什么呢？我们还有这么几个样式叫做什么呢？叫做borderder叉叉叉啊borderder叉叉，那你知道我这个叉叉值可以什么呀？Top left right是不是bottom呀？哎，Bottom来看效果啊，这里边我给它注了，注完了以后呢，我这现在是什么呀？还是四个十个像素的实实现边框，这改一个什么呢？改一个这个border top，我这一保存，咱们来看刷新走，你看完了是不是只有上面有了呀？哎，只有上面有了，还有什么呢？还有一个borderder life保存。

一刷新是不是只有左边有了呀？诶只有左边有啊，所以注意还给我们提供了borderder叉叉叉，我们直接写吧，Border top borderder，诶叫做right，哎，还有一个border，哎，Bottom，还有一个border什么呀？哎，Left，哎，Border left可以什么呢？诶可以单独设置什么呀？哎，四个边的什么呀？哎，样式top表示什么呀？上边right表示右边bottom bottom表示什么呀？底边那个left表示什么呀？左边啊，可以单独指定四个变样式，它的规则什么呢？规则和我们这个borderder一样，只不过什么呀，只不过它只对一个边生效啊，只对一个边生效诶那现在有的时候你会有这种需求，什么需求呢？诶，我希望干嘛呀，我希望。

左边上边还有这个下边是一个什么呀，是一个十个像素的一个红色的一个什么呀，边框，诶红色一个实线边框，而什么呢？而右边。没有，那这个事我们怎么办？那我们想想，我可我首先我们能想到一种方案干嘛呀，我border top border left的border bottom，我是不是分别指定啊，行不行啊，来写一个border left的，咱们再来一个复制，这来一个top，这来一个什么呀？哎，Bottom保存咱们来看一刷新走，你是不是这么一个效果呀，诶三条边都有，而这个第四条这边，这个右边这条边没有，但是这么写会带来一个问题，它有点什么呀，是有点麻烦呀，那我能不能简单一点呢？诶我可以这么写，这否定不了啊，咱们这否定不了，不能否定一条边是吧？来我可以这么写，我这么写一下子干嘛了，是不是四五边都有了呀？哎，那我不要哪条边啊，是不是不要右边这条边啊，那怎么办呢？我再单独给右边来一个，来一个什么呢。

呐诶呐，来这一刷新走，你是不是就没了呀，啊就没了啊，这两种方式呢都行，但是这种方式相对来说干嘛呀，简单一点啊，这个还你还得一条边一条边设置这个干嘛呀，我把四条边都设置上，然后干嘛呀，我把不要的给它去掉啊去掉，所以这个也是我们经翅使用的一种方式啊好，这也是我们说的边框哎，包ER我们这个边块的一个简写属性啊，比较简单，也是我们用的比较多的啊好，那现在这个盒子模型呢，等于是我们这个什么呀，内容区和这个边框我们都给它说了啊，那接下来还差两个，一个是我们这个内边距，还有一个是我们这个外边距，还有边距，好，那我们先说到这啊，停一下。