00:00
那我们继续来上课,那么上节课呢,我们看完我们盒子模型的外间距,我们再来看我们盒子模型的边框属性,啊来在这里边我们新建一个H条面文件,叫做12。呃,盒子模型边框属性。好吧,比如说这里面我们给了一个div,那么任意一个元素,它都有什么都有的边框,对不对,那比如说在这里边咱们来看啊,给他一个style标签style。啊,这个边框属性啊比较多,但是呢,它不难啊,它只是什么呢?它的派生子属性,派生子属性太多了啊。咱们来看一下,我们来设置一下啊,比如说找到这个叫做点。Fo,那咱们来看,给他一个宽度,咱们再去200,然后高度呢也为200。好,那现在我们来刷新页面看一下有效果吗?有对吧,但是我们看不到,因为什么呢?我们什么都没有对吧,我们给他一个背景颜色吧,啊来B来个给他一个这个背景颜色,这个时候你看。
01:01
是不是能有这个元素,有这个,接下来我们来设置它的边框,那么边框可以怎么设置,咱们来看啊,比如说我在这里面叫什么呢?叫做这个包color啊,干嘛呀,设置它的颜色对吧?啊,然后比如说我先不设置两个,我设置它的宽度吧,WDT为多少唯一像素啊,我这么写表示什么意思,表示同时设置这四个边,注意边框是不是四条边,上边右边下边左边,同时设置四个边的大小,但是你看诶好什么。没有用,看到了吗?哎,我光设置四个边的这个宽度是没用的,我还需要干嘛呢?设置四个边的什么样风格啊,就是包德纲style,为什么风格呢,比如说solid。什么意思实现啊,那这个时候来刷新有用吗?有啊,看到了吧,有没有一像素的这个黑色边框,那一像素可能太小了,我们大一点来给他五像素,这个时候你再来看。刷新是不是有五像素的可以这边块啊,对不对。那再来,那再往下来,我能设置这个边框的颜色吗?也是可以的,在这里面border-c color给他设什么设置它的颜色,比如说我要那个边框颜色为GR。
02:09
哎,喂这个喂这个啊。来走你来,你看边框颜色特别也变了,但是他们两个有点太重叠了是吧,哎,我们换一个颜色啊,比如说再来一个GR绿色吧啊。直接为。绿色看到了吧,是不是也有这个边框了?哎,那OK,这就是他们的这个边框的这个属性,那你看这样的话,我就已经用了三个属性了,对不对,这是什么?同时设置四个边的这个,呃,宽度,四个边的样式,还有什么四个边的颜色啊,当然样式只有这一个吗?不是啊,样式有很多,咱们来看啊,在这里边。来,我们搜一个。包到这里边,你看是不是有一个style,这是它的样式啊,点开点进来以后。咱们来看这里边有什么,有这里边是不是有个lifesle,其实在这块就看你能看到lifesty有什么n na没有边框对吧,还有这个hidden这个这个这个我们用的谁的对不对,我们再来个这个double啊,Double什么双实线的啊,那比如说。
03:10
在这里我给你换一个Du bw,好。再来看一下。走你你看所有边框是不是都是有双直线,是不是两条绿杠啊,看到了吧,哎,这个太细我们可能看不明显啊,比如说这里边宽度我给它十像数。刷新是不是就看出来了,哎,叫什么双实线吧,哎,但是你不是随便设置,只能在它出现的这个列表中选择啊这里边。在这呢啊,只能在它出现在这里边去选择别的地方是不行的啊,那我能这么设置,咱们来看啊,我这是统一设置对吧,那它也一样,什么能单独的设置某一条边,比如说我把它注册掉了啊。然后我们单独来设置,比如说叫做border top啊。Border-top-WDTH这什么设置顶部的宽度对吧,顶部宽度比如说为实像素好了,然后border-top-style顶部的什么样式样式,比如说为so的磁线好了,还有包杠color。
04:13
错了,杠top,杠color。为什么is so?Li solid啊好了,颜色呢,比如说我给他一个别给红色了,给他一个blue蓝色吧,来现在你看顶部是不是就有了。啊,只有顶部有对吧,那一样右侧呢。这里边。Order杠杠什么呀?杠WTH为五项素。Right。再杠,呃,Wordd有了哈,第二是style,那这里边比如说给他一个这个对吧,然后再来还有board boardd啊right r什么color颜色,再换一个颜色换成什么,换成这个。
05:06
Pink吧,粉色。看右边。右边是不是也有了,右边的这个什么是点了对不对,哎,那再来还我能这么设置还能吗?还能BOO bottom的这个color颜色对吧,我们先给它颜色啊。Orange,然后再来bottom的这个style样式,对吧,样式再换一个,换成什么呢?换成嗯。Double我们也用过了是吧,来个insight。然后再来for-bottom啊,宽度也为十像素,好这个时候我们再来看刷题,诶是不是也有了对吧,那再来还有什么,还有我的最后的左侧border-left left left设置什么设置它的这个。颜色,比如说先给他一个。这个颜色,然后它的这个包的。
06:02
Border left。这个。呃,带样式。一样是用一个什么呢?用一个head嘛,Head的应该没有吧,包杠left杠呃。宽度也为十,像数好了,看左侧有吗?来刷新。有啊,说没有啊,哎,隐藏了对不对,那OK,咱不能用隐藏了,换一个来。发吧。这回再来刷新双实线是不是有了,哎,也就说我可以干嘛通过这样属性去挨个的去设置对吧,那一样它的简写属性有没有呢?也有,比如说这个包top这里边我直接把它注释掉了啊,注意到什么呢?我直接改成包der top,同时设置顶部的三个样式是哪三个样式,比如说这个边框的大小啊,它没有顺序关系,你随便写啊,比如边框颜色呀,So lyd啊对吧,边框的样式啊。好,那现在你再来看顶部来走,你是不是依然保持没变。
07:01
那一样右侧呢,在这里边我可以把这些都注释了它的简解属性,那包杠right是吧,比如说十像数,然后呢,诶它是五,那给十就给十吧,啊然后dot TED,然后给他一个pink,那现在你看这个点它会加粗。看到了吧,哎,那再来底部的这三个我也可以给不用了,不用它简写属性border BOO button对吧,给他什么orang orange,然后往后S,再往后十像数好再来看。走你是不是也没变化对吧,还有什么我的右侧右侧这些我是不是也可以干嘛不要了,不要了之后那直接是包杠,嗯。这是最后是哪一步,Left左侧啊。比如说PA。它对吧,然后dule以及实像数好了,那这个时候我们来看左侧的是不是也没有变化。对不对,哎,这就是他的简写属性,那么一样,通过这些简写属性,我还可以干嘛呢?我还可以再缩减,再缩减什么呢?直接使用包的属性。
08:02
叫做build啊,同时设置四个编导。这个宽度啊,以及四个边的样式,以及四个边的这个颜色,那这个时候你再来看。刷新你看哎哟,红色看不出来是吧,来来个blue蓝色。走,你看四个边是不是都有一项柱的蓝色了,对吧?哎,这一项柱咱们有点小,给他十像素。周,你是不是也有了,哎,这就是咱们的边框啊,那好了,那咱们来给这个边框记一下啊。边框的属性比较多,对不对,但是常用的,一般常用的就是什么,就一个啊,常用的直接是他简写属性啊。简写属性叫做包对吧,哎,同时这个设置设置四个边的颜色。颜色样式以及宽度,没错吧,哎,那它的这些派生直属性呢,我也给在这这里面大家给它记一下啊,这里边叫做嗯,Border-cor color,还有border-TH以及Bo border-s style。
09:09
叫什么同时?设置四个边的边框颜色,还有同时设置四个边的边框宽度对吧,以及同时设置四个边的边框风格啊,或者是样式都行啊好了,这是它的这个简写属性对吧?那么另外我还可以干嘛呢?比如说fo top就是单独对吧,单独设定顶部边框的这个顶部。边框的。颜色样式以及宽度,那么通过它我们还可以拆分成border top杠宽度,这是单独设定顶部边框。宽度对吧,以及包的。
10:02
Top style就是单独。设定顶部边框的。样式。样式。还有包。Bur包杠top怎么样单独?色调,顶部边框的颜色好了。这里边有没有写错了BD啊,OK。那么他能这么去设置也可以干嘛?BD啊,Border-left对吧,以及border-right,还有什么border。杠,Bottom没错吧?哎,这些我就不给大家写了,因为什么它都是一致的啊,这就是咱们的边框属性啊,好了,那这节课我们到这里。
我来说两句