00:00
好,那我们继续来上课,这节课呢,我们再来看一下我们这个CSS最后一个知识点,盒子模型啊,那么什么叫盒子模型呢?咱们来看我在这里面用画图来给大家演示啊,比如说在这里边我把这些东西都先清掉啊,清掉以后呢,咱再看这里边,比如说我有个元素对吧,那元素里面肯定有做了什么,做了个内容吧,比如说资料就是内容啊,这个是。内容部分,哎,好了,那咱们来看啊,我当前元素与其他元素。这个边也可能有元素对吧?哎,这边也有可能有元素,那顶上呢也有可能有元素,底下呢也有可能有元素,没错吧,那好,那比如说这个黑色啊,目前我现在看到这个黑色就是什么呢?就是元素的边框啊边框。OK,这个就叫什么叫做边框。那一样,那任意一个元素,你看任何在这里边啊,这里边的任意一个元素是不是都有上边右边下边左边对吧,这也一样。
01:00
是不是都有这四条边对吧,这是不是也都一样有四条边对吧?所以任意一个元素是不是都有四条边的边框了?哎,那好了,那咱们来看第一个概念什么呢?就是我当前元素的这个边。啊,边框距离,顶部元素这个边框啊,和我这边左侧距离这边元素的这个边框啊,也就是说当前元素到其他元素之间这个距离叫什么呢?叫做magic,也叫做外间距,外间距。外间距R尖money啊,这就叫什么外间距啊,也就好比你跟你的朋友站在一起,对吧?那从你的衣,好比你的衣服,就是你的边框,从你的衣服到你朋友的衣服,这个距离就什么就是外间距啊,就是外间距,那么另外呢,还有什么呢?那知道边框,知道外间距,边框上面叫什么叫做包ER啊,给它写上Bo b b包。那么另外在这里边我们是不是还有内容区域。嗯,就是这个,这是不是我的内容区域对吧,那这个内容部分,你看内容部分照我的这个边框,这个之间是不是还有一个距离啊。
02:09
对不对,这个之间是不是都有距离,是不是也有四个边四个方向的距离啊,哎,那么这个距离我们给它起的什么呢?叫做内间距。或者内骨白啊,内间距或者叫内骨白。补白啊,叫做pdd拍D啊拍D。它里啊就好比什么呀,好比我们一个手机盒一样,那手机盒咱们想手机盒里边我们为了不让手机紧挨着盒,保证这个手机的一个这个什么,一个这个防摔,那么手机盒里边是不是会有一些东西进行填充,对吧?那填充的那个内容就什么,就是我们内间距,就内间距那么一样,内间距是不是也分为什么上边的内间距,左边那个左边的内间距和右边的内间距,还有下边的内间距吧,对不对?哎,也就是说任意一个元素与其他元柱之间也会有四个方向的外间距对吧?边框呢,也会有四个方向的边框,然后内间距呢,也会有四个方向的内间距啊这就是咱们盒子模型图,那咱们来看,我们通过这个图,我们也用我们自己代码来实现一下图的效果啊。
03:16
比如在这里面新建一个。A,这面文件啊,叫做到呢,叫做幺幺,我们起名为什么呢,为盒子模型啊,盒子模型的外边距。我们先来看外间距啊,那在这里边我们也一样去定位一下,比如说我先给它一个divd,给它起一个FV啊,我一样用的一个负类,然后在这里面包含多少呢?包含12345个孩子对吧?那比如说这里边咱们来一个这个div。叫做点top顶部的,然后再来div.left左侧的啊,这里面叫做写什么,我是顶部,然后我是左侧。然后再来一个div,就当前的啊div.self这是当前元素啊,然后再来一个。
04:04
div.rap叫什么?我是右侧啊,然后最后再来一个div div.b To Button叫做我是底部,好了,那现在咱们看我有这么多元素,那接下来我们是不是得设置一下那S标签。井号fat发先测试它的这个负类啊,负类比如说它的宽度W宽度我也让它六百二吧,啊620,然后高度呢也为620。620。六百二啊,六百四也行,六百四吧啊,高宽高都高一点啊,这也一样,六百四然了,然后给他一个背景颜色啊BA,但是同样的变成一个pink这颜色好了,复习完事以后,接下来就是里面的子类了,对吧,那里边所有的子类,比如说这里边所有的div啊。叫什么呢?叫做井号V发了里边所有的这个div,哎呀不行,我要是这么给完之后,他的这个级别太高了啊,那我就直接算了。
05:07
单独写吧,点。呃,泡泡。它的宽度,比如说为600。高度为200好了,BCKBCKGR,给它一个颜色啊,比如说给他这么一个颜色好了,再来点left左侧的宽度。With,比如给他200,然后高度也为200,然后BKGR的多段嘛,这是我。呃,左侧的是吧,左侧的话我给这个颜色,然后再来当前的。它的宽度也为200,高度也为200,然后BCK当前颜色,让它变成绿色加en啊,然后再来这个右侧的right。给它WITH200HE也为200B加D,呃,给它一个这个紫色好了,那还有最后底部的button,哎,咱们底部不叫button吗?我叫什么名。
06:05
我是底部boot button button啊不是button,好了,那这块叫做点B。B Bo啊,不是B。B Tom but,然后给它宽度一样,比如说为600 he也为200,然后B再给他一个,嗯,这个颜色吧,啊,茶颜,好了,那现在咱们来看我当天元素长这个样子。这样子对吧,那接下来我开始给它干嘛,进行浮动里边的每一个子类,比如说float,让它进行ne。然后这个一样,Float进行left,然后再来当前的也一样,Float进行left,然后还有右侧的我也float float float and left,然后还有什么,还有底部的。FL。Left。好,那这个时候我们来看刷新。
07:02
你看顶部的左当前右侧对吧,底部咱们说了当前元素与顶部左侧右侧底部之间是不是都可以设置距离对吧?咱们说的叫Y间距,那么我可以怎么设置呢?咱们来看我这么设置啊,在这里边我们通过margin来进行设置,比如说找到我们当前元素啊,那g margin-top距离顶部,比如说十像数的距离,那现在你来看这个时候刷新。我一距离顶部有十像素距离,那这个元素就被我顶下来了,所以这两边是不是也是有十像素对吧?那我能距离顶部,我还能距离什么?还能距离左侧,比如说M压Mar-left,我想你也有十像素的距离,那这个时候再来刷新,你看距离左边是也有十像素的距离了,对不对?那么距离左边,那距离右边呢,是不是也可以,这里边继续Mar减marin刚right也给它十像素的距离,好了,那现在再来刷新,你看右边是不是也有了,那同样。上右左都可以了,那下边呢,是不是也可以进行设置Mar减Mar上BOT Tom也为十像数,那这个时候咱们来看再来刷新。
08:07
好,你看我当前元素啊,当前元素距离这个顶部十像素距离右侧十像素,左侧和这底部是不是都有十像素的距离了,哎,这就是什么,这就是什么呢?马是不是它的外接距啊,那么我这么写呢,它是一个什么是直属性啊,这是马的子属性。子。属性啊,我还可以干嘛呢?使用它的简写属性啊,叫做直接Mar啊,直接通过这种方式来设置,那么它的设置方式呢,有这么几种,第一种是分别设置四个边的间距啊,直接marin,那么第一个比如说我给他十像素,20像素,30像素,40像素,对吧?那什么意思咱们也不知道,咱们先来看啊,通过这个来总结,诶你看变样了,数变样了,哎,那变样的话怎么办?我让他的负类啊。
09:00
700。好了,这个没变对吧,那你看好了十像数,所谓我们所说的十像数是不是这块的一个是实像数,而这边是不是比它大,而底下是不是比这边还大,这边是不是比它还大,也就是说直像是我们设置的是距离顶部十这边呢20,然后这边呢30,这边呢是吧,40啊也就是说我们第一种方式啊,同时设置什么,同时设置这一条边的不是这一个,同时设置这个外间距的四个。边对吧,也就四个参数,它分别什么,那个顺时针方向对吧,分别是顶部,然后右侧底部和左侧对不对,哎,这里边我们也一样给它写一下啊叫做。同时设定不能说同时是分别这个设置四个四。个边的间距啊,就是四个参数啊四个。参数,然后呢。
10:00
分别什么呀,分别是顶部对吧,右侧啊底部还有左侧是顺时针顺。时间。方式顺时针方式好,那能同时设置四个边,我也可以干嘛呢?可以设置三个啊Y间距,那咱们看三个参数了啊m marin,比如说我设置一样,我说十像素,然后20像素,然后30像素,好了,这是设置三个值对吧,那这个时候你再来看刷新。刷新以后你看。左右两边是不是一样的,上面依然是十,下边是不是要大一些,哎,也就是说我这么设置表示什么意思,表示的是。素质。怎么样叫做顶部,然后呢是右侧和左侧,然后是顶部,是不是这么来设置的,对不对,那OK,我能设置三个边的,我也能什么设置两个值的,对吧?设置两个参数了啊,不是说边啊,是两个参数啊叫设置什么呀,设置这个。顶部和底部,然后是右侧和左侧两个参数,那你看Mar间marin,然后给它十,然后再来一个20,好,那两个参数,两个参数我们再来看刷新,刷新完以后在这里边你看上下维持左右是不是为20啊对不对,那OK,好,我们把它再次去掉,那么能设置两个参数,我还可以设置几个参数呢,还可以再来设置,比如说这里面继续设置。
11:23
叫做同时设置四个间距。啊,一个参数。一个参数好了,那在这里边Mar GI Mar上下左右各为十,那这个时候你看我来点击刷新,刷新完以后你看距离上边右边下边左边是不是都是一样大小了,哎,这就是咱们的马九啊,这就是咱们的马九啊好了,那咱们来设置来给记录一下啊,马九是设置外间距,它有什么四个子属性对吧,四个。值属性啊,分别是什么?牙尖marin left,这是什么设置?
12:02
当前元素和左侧。元素之间的距离,然后再来Mar杠这个right,它是设置当前元素和这个右侧。元素之间的距离以及m marin-top,它是设置当前元素和顶部元素之间的距离,以及最后一个接marin杠八。BP Tom,它是设置当前元素和当前元素和诶,当前元素和底部元素之间的距离,哎,这是四个子属性,那么简写属性的。叫做MG啊马就为简写,简写属性啊,属性为简写属性,那已经写了,那它是怎么设置呢?有四种方式,第一种分别分别设置这个四个。
13:00
边的间距对吧,这一种是四个参数。四个参数,那分别是是什么呀。这个顶部。然后右侧,然后是底部还有左侧,这是我们顺时针方式对吧,那第二种方式呢。叫做分别设置四个边的间距。是三个。参数啊,CTRLCVV好了,那这里面是。两个参数和一个参数的啊,那这是第三种方式,这是第四种方式啊,那么第二种方式,那就是Gin是什么?是我们的这个叫做。顶部,然后右侧和左侧。然后是底部对吧,然后再来呢,SMG先是我们的顶部和底部,然后是右侧。和左侧对吧,然后再往后一个参数的mi就就是什么上右下左了对吧,同时设定上。
14:05
右。下左四个边的。间距。对不对,哎,这就是咱们的marin属性啊,好了,那marin属性我们知道了,那另外我们marin属性还可以干嘛呢?设置块状元素集中。可以使用Mai键marin属性设置。状元素设置块状元素居中啊,块元素居中,那咱们来看怎么来设置的啊,在这里边一样,比如说我就在这它的下边了啊,在这最下边我再来一个div啊div这是不是一个块状元素,比如叫ID叫做什么叫做box?好了那我们来设置一下,在这里边找到井号fo,比如说我给它一个宽度,宽度为少呢?为呃1200,然后高度,高度为多少呢?为200对吧?然后BK为pink测好了,现在咱们来看刷新。
15:03
当前这是一个快乐元素对吧,那这个别给粉色了啊,它有冲突。给他吧。好了,是不是这样的对吧?当然这回我们学了Mar,我也可以干嘛键marin到top,我让他距离上面50像素远一点。你看是不是距离下来了,哎,那么在这里边我可以干嘛呢?可以通过这是不是标来是个扩状元素,哎,我可以通过使用Mar减Mar径啊,上下为多少为零对吧?左右的自动,左右自动,当我给设置左右自动的时候,注意它这时候给我拉了两个红线,什么意思啊,有冲突,你现在设置了8IN top为50,这里面是不是设定了8TOP就为零了,对不对?诶那你看这个时候我一点击刷新。是不是就回来了对吧,所以这里面我可以干嘛呢?为50啊为50对吧,下面不想要我可以下面为零啊对不对,那这个我是不是就不需要了,哎,有距离顶部50左右是不是自动的,哎,这个时候你再来看刷新诶。
16:00
顶部是不是50有了对不对,那同样我又把它省略掉,那是不是就是上下为50左右自动啊,哎,就是左右只要给了凹凸它就可以,干嘛让这个块状元素自动。啊,但是有一个问题啊,什么问题呢?注意如果快热元素里边我不给它宽高了啊,不给宽高了,然后呢,在这里边它可以包含子类对吧?Div,比如说叫做ID等于Y。Can you stay me。ID等于to ID等于一。TH,好了,现在你看啊,这个万度C,我们分别来设置一下井号Y它的这个宽度,Wi宽度,比如说我给它200HE也为200好了,然后B。呃。这个颜色吧,啊,然后再来井号to,它的宽度也一样为200,高度也一样为200,然后BCK为这个。然后再来井号three它的。
17:03
WDT宽度也为200,高度也为200,然后再来BA上让它为。这个颜色好了,现在咱们来看啊,当前宽高我没有,所以它的高度是自动增长了,看到了吗?自动增长了,但是宽度没有,我们看不出来它居中的效果,是不是我把宽度还给它加回来啊,宽度依然是1200,好,再来刷新,你看我当前元素是不是依然居中的,哎,那接下来你再来看,比如说我想要的里边的元素进行什么浮动,Float left,诶,浮动一个。走里高度在缩小,对吧,再来。幅度。两个。高度。又在缩小对吧,然后再来我说第三个也要进行浮动,Float left,这个时候你看再来高度是不是没有了,哎,高度没有,但这个元素大家知道依然是保持在这个位置是居中的,对不对?哎,那比如说现在我想让这个负元素有高度的话,怎么办?我们说了第一种方式,我可以干嘛,直接给它设置一个高度为200,这个时候你看来刷新是不是有高度了,依然是保持居中吧?哎,那咱们来看,如果我不给它高度,我用第二种方式,第二种方式来说了,是不是让这个元素浮动啊,它一旦浮float left以后咱们来看。
18:18
刷新看还居中了吗?是不是不居中了?哎,也就是说此时此刻我的妈这个。凹凸是不是对它不好使了对吧?并没有做到居中啊,因为一旦浮动了,它就不完全属于快热元素了,哎,所以对它无效了,那这时候怎么办?我就不能用它居中,那么我还氧它高度呢,我还可以干嘛使用over o v overflow等于hidden对吧?这回你是不是知道什么时候用overflow等hidden,什么时候让负元素居中啊对吧?如果负元素作为我最爱的元素,我需要它居中的话,那么这个时候我绝对不能让负元素给它浮动,对吧?我只能给它强制高度,或者是干嘛让它自动感知高度,这个时候你来刷新,你看它是不是就可以居居中了。哎,这就是这三种。让负元素感知子位高度的区别啊,我设置高度跟人家的自适应高度都可以做到这个让马进行精行集中,但是一旦我设置浮动这个居中就叫失效了啊,这就是咱们这块需要大家去注意的啊好了,那这就是咱们的这个ma镜属性,那这里边咱们说了可以使用ma镜对元素跨状元素进行居中对吧?那也知M米压间marin,然后怎么样,然后这个冒号。
19:25
比如说我就给两个值了啊,上下为零,左右自动是不是就可以让快热元素进行驱动了,哎,这就是咱们的这个,呃,Marin属性啊好了,那这节课我们上到的。
我来说两句