尚硅谷前端基础 (46)

刚刚我们对盒子模型做了一个简单的介绍，接下来我们来正式的来学习一下盒子模型里面的属性，那盒子模型里面最简单的其实是内容区啊，内容区就是宽度和高度啊，你只需要知道最里边的这一部分叫做内容区，并且我所创建的所有的子元素啊，什么这个文字它都是在内容区中啊，它不可能跑边框里是吧？就像我们拿一个盒子装东西，一定是往盒子里边装，那不可能是是往盒子边上装对吧？所以内容区就是装东西的区域，你就这么记就完事了啊，所以内容区我们就不再说了啊叭较简单，就是通过wise和head设置内容区的大小，那所以接下来我们来从边框开始讲起，来新建一个文件，我们来一个零三，叫做一个盒子模型，这我们叫一个边框点页条啊，我们先来说边框，那要演示这个边框，其实一样的顺序啊，我们也得先创建一个盒子啊，直接div点一个BOX1，然后在这我们来写一个样式啊。

死stylel标签TY IE stylel标签在这儿呢，那你要写边框，你也得整个内容区，而你对比是看不出来对吧？Y一个200 hi一个200，然后background color background color，我们来一个这个井号B黑啊，然后这里边我们设置完了一个盒子，大概是这么一个样子，那这里边我们说我们要设置我们这个边框，边框刚才已经强调过了，边框是我们盒子的一个边缘啊，它是用来分割我们盒子内部还有外部的盒子，边框里边的属于盒子内部，边框外边的都属于盒子外部，所以边块是一个盒子的一个边缘，那边块相关的样式呢，我给粘过来吧，我不再写一遍了啊，一共是三个啊，一共是三个，一个是我们边块的一个宽度啊，一个是我们边块的一个宽度，边块的一个颜色，还有一个边块的样式，我们先写着啊，Border wise啊，Border，你直接写这个BW就能出来啊border，比如说我来一个这个，诶来一个十个像素啊，十个像素。

然后呢，再往下写，哎，我们这来一个borderder的一个color啊，Borderder color啊borderder color还写BC出不来borderder color我们来写一个，写一个什么呢？我换一个颜色吧，我来一个orange啊orange，然后我们再来一个还有一个borderulder stylele borderder style我们叫一个solid，表示一个实现的意思，所以这几个啊，Border wise表示的是边框的宽度啊，你这边框多粗多细啊，然后borderder color是边框没颜色，我这指定一个orange，现在是一个橙色的边框，Border style是说的是你这个边框是实线，是虚线，还是什么东西，对吧，还是什么东西，那这里我们一个个来说一下，我们先说这个Bo wise，但是我在说它之前，我们还是要注意，你凡是想设置边框这三个样式缺一不可都得写啊，缺一不可啊，必须。都得写啊，B都得写，那这里边其实如果说呃，我们先我们先往下说吧，Border borderer wise，其实呢，呃，它可以省略不写啊，不，Wise我们说一下可以省略不写，诶那这时候你会发现是不是也有边块，哎同学说了，老师啊，你刚才还说都得写呢，但是现在为什么就可以省略不写了呢？哎，注意了，它其实也写了，因为borderer实际上它会有一个默认值，它默认值应该是两三个像素的样子，这就就就就这么块呗，看看大概是123，你看就是三个像素啊，三个像素，所以默认值，那基本上就是三个像素，所以你不写，它基本上也会有一个默认值，Otherwise，哎，它会有一个默认值，一般啊，一般不同浏览器有可能有区别啊，一般都是三个像素啊，一般都是三个像素，但是一般的话我们也会自己指定，不会用它这个，即使你要三个像素也最好自己指定，因为有。

可能有的浏览器就四个像素，可能浏览器两个像素有可能不一样，所以这块我们还是要去指定，但是你要知道它不写也可以出来啊，也可以出来，好这里边我们说一下border border west，你写三个像素，你看跟刚才那个是一模一样的啊，一模一样的好，那我还是写粗点，写一个十个像素，那现在我这写了一个十个像素，那这个现在是什么像果什么意思，哎，那是不是上下左右是不是都是十个像素，哎，都是十个像素，诶那这里边我们来说一下啊，Border它干嘛的。

Border be，可以诶用来指定我们这个四个方向的一个边块的一个宽度啊边块的宽度，现在我写的是一个十个像素啊，十个像素，十个像素表示的是我四个方向都是十像素，那我如果写四个呢？哎，什么意思？我写一个十像素，20像素，30像素，40像素，我是不是写了四个值啊？哎，写了四个值我们来看效果，诶四个值怎么分配的，肯定十最细的，那这是不是应该是十啊，诶20第二的，这是不是20啊，然后这是30，这是40，所以当我写四个值的时候，情况很显然，这个边这个十是上边的，这个是右边的，这是下边的，这是左边的啊，这是左边的，所以顺序就是一个叫做上右下左，是不是这样一个顺序啊？哎，顺时针转过来啊，顺时针转过来，所以。

这里面我们来说一下它值的一个情况，值的情况我们先说四个值，四个值它是什么顺序，四个值的顺序就是上哎右。下左，所以我写这个的意思就是上边十个像素，右边20个像素，下边是30个像，哎，下边是30个像素，左边是四个像素，所以注意它是从上边开始。顺时针旋转啊，顺时针旋转的，那这里边我们再来看，那我如果写三个值，我写三个值，我只写三个值，把40给去掉了，我们来看效果，诶发现什么了，左边跟右边是不是一边粗啊，诶一边粗上边还是十，那左边这还是20，这是30，那右边呢？诶右边也是20，换句话说，如果你不写左边的值，左边会用到什么？诶会用右边的值，所以三个值什么情况上这个是左右，这个是下啊，这个是下，所以啊这个顺序记住了啊，以后这种东西都是这玩意儿啊三个值三个值什么情况？哎，是一个上，然后是一个左右，然后是一个下啊上左右下，这个是上边，这是左右，这是下边啊然后还有什么呢？还有两个值，两个值我就来一个十，一个20，其实你猜一猜着两个值，那就是什么呀，哎，上下是十左。

就是20左右是20，所以十二十两个值就是上下左右，上下左右第一个值是给上下的，第二个值是给左右的啊，你还要注意这个值与值之间用这个空格给它隔开啊，给它隔开，那如果写一个值，那就没人说了，一个值那就是什么上下左右都是。

一个值，那就是上下左右都是这个值，那就一样啊，就一样了，这是我们说的这四种情况啊，这四种情况啊，那以后你要注意所有的像这种有上下左右，上右下左这么四个值的，它的规则都是这样的啊，四个值的时候就是上右下左，三个值就是上左右下，两个值就是上下左右，一个值就是上下左右啊这块注意区分一下，注意识别一下，那我们的border wise，你除了这个值以外，除了这个值啊，除了我们说的boise，我们还有一些其他的选项，比如说我们用什么呢？诶有一个叫做borderer Bo DR borderer top，诶我来一个十像素，这叫什么呢？诶borderer的top top是不是上啊，诶上边的一个宽度，所以除了什么呢？除了我们这个golder。

除了我们这个borderulder we，我们还有什么呢？我们还有一组叫做borderulder，叫做叉叉叉wise啊，Borderer，叉叉we，这叉叉叉可以是什么呢？可以是可以是top，诶，可以是什么呢？Rest，诶，可以是bottom，还可以是left top叫上边，上边叫top right，右边，Bottom，下边left叫左边。也就是说你可以写什么呢？你可以写border top wise，或者也可以写什么呢？也可以写borderder。You are。B borderer，一个叫做left wests，我们直接来一个30个像素，那这就是左边是一个30，也就说这些值你都可以去分别指定啊，你都可以分别指定，那这里我就不多演示了，也就是说这四个值啊，一共四个，Border top border right border bottom right border，哎，Left wise啊一共四个纸是单独用来指定什么呀，某一个边的宽度，哎，用来单独哎指令某一个边的一个宽度，下边同理啊，我就不多，我就不过多解释了，我先给诸葛亮一般用的不多，我们这麻烦点，我们这一个全指定了，省事，这比较麻烦啊，比较麻烦，所以一般用的比较少，那下边也是borderder color也有什么呢？Border top color border red color border bottom color border red left color也有这么几个，我们的style也是top right border，还有left。

它是一样的啊，后边我就不多说了啊，然后再往下说我们的border color borderder color是用来指定我们边块的一个颜色的，我们这个borderder color，诶用来什么呢？用来指定我们这个边块的颜色，同样，诶可以什么呢？分别指定我们这个四个边的一个边框，规则什么呢？规则和我们这个wise border wes一样，说一个全都会了啊，Border wes一样，所以在这儿我也可以多给它几个色，比如说我这orange来什么呢？Red，然后来一个这个yellow，来一个green，那这个时候我就指定了四个颜色，那soon就是上右下左，上边是橙色的，右边是红色的，左边是黄色的，诶就左下边是黄色的，左边是绿色的，上下左，你看橙色红色。

黄色还有绿色，你可以分别指定我们颜色规则跟上边一样的啊，四个指上右下左，诶如果三个指上左右下两个值，上下上下左右对吧，四个值，那就就一个值，就是上下左右都是它啊，也可以分别指定，而且你指纹颜色你要注意一下，其实哪个边块的交界它并不是直的，它是一个什么呢？它是一个斜的，为什么斜带也好理解，因为它得确定每一个边块形状是一样的，一边长才这才可以，所以它是一个斜的焦点，以后我们还会用它是吧，但是现在已经有印象啊，这个是我们说的borderder color指定边框的颜色，但是一般我们也不会这么指定，一般我们就什么呀，哎，一个颜色就给它就够了啊，一个颜色哇，An啊，一个颜色一般也就够了啊，那这个是我们说的一个边块的颜色，它也同样有什么border top color border right color borderder bottom color bottom left color，我就不展示了啊，我就不展示了，并且呢，我们。

这个border color啊，也可以省略，也可以省略不写，你看啊，我不写它。

我把这两个都注掉啊，都注掉，CTRL斜杠注掉，你看它是不是变成一个黑色呀，哎黑色，那这黑色怎么回事呢？哎，也可以省略不写，如果省略则什么呢？诶则自动使用我们这个color的值，哎，Color的一个颜色值，所以现在我们说color之前我们设置color，我们设置一下啊，我这来一个color color默认值就是black，所以那个边框颜色就是什么呢？就是黑色，如果我color值是一个red，就是什么呢？就是red，所以你如果不指定这个边块颜色，它默认使用color值，Color是啥，它就是啥，你如果指定了边框颜色，哎，如果你指定了边块颜色，那这个时候就是什么呢？就是边框颜色是什么就是什么，所以没有它找color，有它就找border color就这么一个效果，那这个color其实我们也说了，之前我们一直说color都是一个字体颜色，其实严格来讲，Color本身的意思并不是字体颜色，而是一个什么呢？而是一个前景色啊，Color叫一个前景色，Background color叫做一个背景色，所以前景像什么字啊，像什么边框，实际上都属于color的范畴，所以如果你不写borderder color，那么color就会生效啊，Color有生效，好，这个是我们说的一个borderer color，然后borderulerstyle bordererstyle一样了，Bordererstyle就是指定什么呢？Borderulerstyle它指定我们这个，指定我们这个边块的一个样式啊，边块的样式同样也是有四个方向啊，我们直接说了它有什么呢？Solid力的表示实现表示我们这个实线的边实线，然后还有什么呢？我们来看一下，我这有一个叫做一个这个导体的。

哎的，你看变成什么了，是不是变成这种小点的了，哎，小点了，所以这个叫虚线叫什么呢？叫点状虚线点状。

虚假。哎，然后还有什么呢？还有刚才我们看到这有一个这个大石头，大石头，哎，这个是一个什么呢？这个是一个叫一个线状虚线，就是虚线吧，哎，就是虚线，这就是一个虚线啊看效果是不是一段一段的，哎虚线，然后还有什么呢？还有一个叫double Bo。叫做一个双线，所以这换一个double效果，Double诶它就变成了一个双线效果啊，双线效果，所以这几个是我们比较啊，其实都不都不特别常用，但是说一下你要用的时候怎么用啊怎么用，所以这里边我们就可以直接写了，我可以直接写一个哎sal，然后是一个刀，然后呢，我们再来写一个大式的，然后再写一个double，那这个时候我就等于给四个方向指定的边框，同样的顺序，上右下左这么一个顺序啊，我就不多说了，但是你可以自己试一下，但是一般情况下这么写也不好看，所以一般我们都是一样的啊，一般都是一样的好，同样borderer style也有什么top style。

Lifestyle bottomstyle bottomstyle，还有什么redtyle，对吧，是一样的，不多展示了，好，那这个就是我们边框相关的属性，我们都给它注定，都给它注掉，所以这一块如果我们统一设置边框，我们一写的话，就是三个东西，第一个叫做borderer wise border we，我这来一个十个像素，然后第二一个我们叫做border color border color border color，我们来一个orange，来一个橙色的，然后我们来一个borderer，一个style borderer style，我们叫做一个solid，啊，这是这么一个效果，好，那这里边还要注意啊，我们刚才说了，这俩都可以省略，你不写它有默认值，但是这个solid你不写就就没有了，你不写solid真没有，因为它的默认值什么的，它的默认值是not。Border style的这个默认值是什么呢？是，那none表示什么呢？表示没有边框，所以你要想把这边框去掉，最简单的你就给这个borderer style设置一个，那这个边框就没了啊，所以其实这三个属性里边，呃，说是必须指定的，就是borderer style，但是我们严格来讲，其实三个都必须指定，因为只不过这两个是有默认值的，就是默认值是是比较是有边框的，而这个style默认值是没有边框，所以这两个也不是说没有，只是我们使用了默认值啊，使用默认值，所以都是啊，三个值都必须得去指定，但是其实你会发现我们去通过这种方式去设置边框稍微有点麻烦，我要设置一个边框，我得同时写三个属性，是不是稍微有那么一点点的麻烦呀，哎，所以这个时候我们还要说一个叫做简写属性，简写属性这个才是我们最常用的，所以上边主要是了解，这是我们最常用的，叫做一个包。

这的一个简写属性，哎，通过该属性可以什么呢？可以同时设置我们边框，诶所有的相关样式啊，所有的相关样式，并且什么呢？诶，并且没有顺序要求啊，顺序要求，所以像我们上边这个边框我要怎么设置，直接你不用写什么border white border color，直接就写一个border多粗十个像素，什么颜色orange，诶实现的直接写一个solid，你把这三个一写，这边框是不是就出来了，并且注意都是用空格隔开的，没有任何顺序要求，你说把orange写到最后没问题，你说把solid的写到第一同样也没问题啊，它是没有先后顺序的啊，没有先后顺序的写怎么写都行，只要你用空格给它隔开就OK了啊，所以一般我们设置的时候都是通过这个简写属性来设置啊，简写属性来设置，那除了这个boer，哎呀边块的属性实在是太多了啊，我这还没说全呢。

啊，说的是一小部分，除了什么呢？除了我们这个borderder以外，还有什么呢？还有我们四个叫做borderder，叉叉叉叉叉叉啊，同样叉叉叉也是表示什么呢？表示什么？Top right bottom left，顾名思义这四个就是什么呢？我们写上吧，Borderder top borderder right borderder bottom，还有一个叫做borderder left啊顾名思义这四个是什么呢？跟borderer用法一样，只不过BORDERDER1设置是设置四个边，而这四个只设置什么呀，一个边，所以我们来看一下啊，我给住了我了，我们直接来一个这个boer，一个top top，我来一个十个像素，然后来一个这个solid，然后来一个这个red，那这个时候就是只有什么呀，只有上边有这个边框，别的边都没有，因为它表示的是top上边啊上边，然后bottom red。

艾，什么都一样啊，什么都一样，但是一般情况下我们也不会去单独设置啊，单独设置这东西我们什么时候用呢？哎，有的时候这样的，比如说我想干嘛呢？哎，我想设置两条边框，哎，我想设置两条，或者我想设置三条边框，哎上边有一个边，左边有一个边，下边有一个边，但是右边我不设置，那怎么办呢？哎，我可以用这种方式设置border top，然后我这复制一下，哎，Border top borderer left，然后borderer bottom，也就说你可以通过这种方式给这个什么呀，三边来设置，别的边不设置，那这时候是不是只有三个边框，这边没有了，哎你可以单独去设置，但是很明显这么设置稍微有点麻烦，你得一个个写，所以一般我会怎么写呢？一般我的习惯前面可能是这样的，我直接来一个boer，然后来一个十个像素，然后来一个red，然后来一个solid，那这样是不是四个面块都有了，你不想要谁不想要右边的再单独给他来一个Bo right，把右边给它来一个。

那给它干嘛呀，去掉是不是就行了，哎，去掉，那这样我就只有三个方向了，所以这是一种方式啊，所以一般情况下我们主要用的是borderder，哎，然后特殊需求我们再通过border top borderer RA border border borderer right，这个right这些东西再单独去设置啊，单独设置好这个是我们边框的一堆属性啊，说的挺多，但是关键其实关键点啊，要记得就是后边这堆啊，关键点就要记它，自己尝试着去写一下这个边框啊好，我们先说这么多，停下了。