00:00
好,那么我们继续来上课,那么上节课呢,我们了解了我们整个的这个合作模型,对吧,了解了marin,了解了这个borderder,以及咱们的这个拍顶,那么这节课呢,我们再来看一下什么呢?我们的这个怪异核模型啊,其实我们现在来做的是它属于一个标准核模型,也就属于这个叫标准核模型,那什么叫标准型和模型,什么叫怪异和模型呢?咱们来看啊,在这里边一样,我们还是通过。这个代码来新建一个M文件,先建一个14叫什么呢?叫做标准和模型,标准和模型啊,标准和模型就是我们正常用的,比如这里边我们给他一个div啊,给一个div,然后我们来设置一下,比如说叫做ID等于BOX1。然后磁带标签。叫做井号box,一给它设置一个宽度,比如说为200,高度也为200,然后b background,比如说它的背景颜色为这个颜色,好吧,那么有了这个元素以后啊,咱们来看啊,在这里边。你看我当年是不是有个200乘200的了,哎,那好,咱们来看我开始给的加边框boardd呀,包我的实像数实现的so Li红色,好,那这个时候我们再来看。
01:09
刷新,诶边框加上来了对吧,那同样在这里面,我给它移动一下Mar j Mar marin,我让你上下左右都为100像素。诶移动过来了对吧,然后再往下来我还可以干嘛呢?给PA顶pad顶,我让你上下左右都为20小时好了,那这个时候再来刷新诶。对吧,那么这个时候咱们来看啊,我的整个这个元素还是200乘200了吗。还是了吗?来在这里边我们通过我们的标尺工具量一下。标志你看,比如说我的垂直方向的元素,从这开始到这多少啊,二百六看到了吧,二百六乘以多少呢?再来我的这个方向水平的水平多少放到这里边来。诶,到这儿。是不是260。看了是不是也是百六啊,哎,那么刚才明明我定的是200乘200,为什么现在是二百六乘二百六啊,那你看在这里边元柱宽度是200对吧?那么其中对于这个边框顶部有十像数,底部有十像数,左侧有十像数,右侧有十像数对吧?那你看对于宽度是200左右各有十加起是不是二百二了,对吧?然后再往后呢。
02:21
M是100,肯定没算到在里边对吧,但是拍定呢,PA定的上下左右都为20对吧?那你看左边为20,右边20加起是多少?四十四十刚才加上二百二多少,是不是二百六对不对?那水平的宽度是不是就出来了,那同样高度呢?高度是200,加上上边和下边各为20,是不是220。对吧,各为十,两个加一起就是20嘛,220,然后呢,拍掉上边,上边的内部白跟下边内部白是不是加一起是40对不对,那加一起二百二加一起是不是。二百六了,哎,也就是说。我们的标准和模型实际上是什么呀,我们的这个元素的这个宽高,不是宽高是元素的边框和内间距,会占据我们元素的大小,对不对,所以我想想把这个元素再变成200乘200的怎么办?宽高是不是对应的要缩减呢?缩减多少缩减多少60吧。
03:09
对不对,那这就是140,这个也一样,是不是也就是一百四啊,对不对,那这个时候你再来看刷新好,它是不是它200乘200的啊,我们再来标尺量一下标准,我们就随便量一条边,诶没问题,你看到这是不是200乘200了,哎,这就是咱们的标准和模型啊,标准和模型好了,我们先给它记一下来。在这里边什么叫做标准和模型,就是我们的这个p ting的宽高要记录在盒子模型的这个宽高资。内对吧,还有呢,这个呃边框。说也需要。记录在盒子模型的这个宽高之内,对吧,但是减MA9算吧,MA9啊不算在宽高。之内,这就是我们的标准和模型啊,那再来看那标准核模型,知道了,那什么叫做怪异和模型呢?注意我们默认是不是标准核模型呢,对不对?哎,标叫默认。
04:10
喂。标准和。模型啊,默认为标准和模型,那什么叫怪异和模型呢?怪系和模型我得通过这个属性设置它才行啊,那一样我们再来显示。这里边我们要演示的是怪异核模型,那同样div叫做波波斯二啊,这里边叫怪异核。模型对吧,那现在我们也给它设定看好了,在这里边我们给它加一个什么呢?加一个这个叫呃井号box啊对吧,给它来一个来一个什么W宽度E来为200 HT也为200,然后BK bank为什么为这个。这个颜色好,现在我们再来刷新。好了,这块有了,有了以后一样我们先给它移动走,Marin marin。给他个100。
05:01
才过来,等他回来过来了,对吧,但是这回过来大家有没有发现个问题啊,你看啊,我上下左右都为100,注意这个元素我是不是也给了个100对吧?这个元素你看这个元素距离下边我给的是100,这个元素距离上边我是不是也给了100,对不对,这个时候我们会遇到什么呢?会遇到一个ma径合并的问题啊,Main合并的问题什么意思,它会以最大值为准,比如说啊,这块我给他五十五十啊,50PS,那50PS,但是实际上你看他俩距离啊,只看这段距离就行了,来。刷新。你看是不是依然是100没变吧,这些都变了对吧,左右都变了,但是上没有变啊,也就只有对于上才会有马丁合并的效果啊,怎么叫Mar丁合合并呢?它会取marin的最大值,你看在这里边,我们通过这个检索工具啊来检索一下,你看在这里边诶一选择。你选择选择以后,我们看到看不着是吧,来这里边这里边这里边。看不着行,看不着我就直接点吧,点过来以后咱们来看啊,在这里边它是不是Mar Mar Mar这呢来marin距离底部是不是100,看到了吧,距离底部100对吧?那么同样我点到它,点到它以后,你看它距离顶部是不50对吧?那这个时候是不是合并了,它只显示了一个100,并不是150,他们俩真正距离并不是150,没错吧?哎,所以大家记住啊,如果对于上下两个元素,我上面给的什么,给的是100,下面给的是50,那么他们会取,就是只有这个上下的啊,才会他会取最大的100啊,那不管它,我们再还原回来,那都为100是不是也没有影响。
06:31
对吧,那好了,那接下来干嘛呢?咱们再来看,我们既然说了要给它设置,为什么怪一盒对吧?那怪一盒我们就需要给它先设,叫做box杠。这是什么呢?Border box,这是什么呀?声明为怪一盒。怪一盒模型,那怪一盒模型又是什么特点呢?同样比如说我们来个包ER给他什么,给他这个5PX sod红色啊好了,哎,这里边是它,那我就用蓝色吧,啊B蓝色。
07:01
刷新你看变蓝色对吧,那注意这里边蓝色没问题,再来padd拍定上下为十,内间距上下也为十对吧,那再来刷新,诶可以往里面去了,那好了,这个时候我们再量这个盒子的大小,你看看它是什么样的啊,来点击标尺。那你看一样,从这边到这边,注意它的总共的宽度依然是什么200没有变化对不对?它会干嘛向盒子里面进行压缩,没错吧?哎,那一样再来方向垂直,你看它的高度是不是也一样如此。看到了吧,是不是也是200啊,对不对,哎,这就是咱们的怪异和模型,也就是说在怪异型怪异和模型下这个。元素的内线距和边框不会怎么样,不会去占据盒子模型的大小,对不对?哎,依然不对。对是吧,不会占这可模型刚才咱说了这个会占用可子大小,对吧,它会什么会变大,而这个呢,不会占用,你不管加多宽的边框和多高的这个,多宽多高的边框和这个。
08:07
呃,多多大的内间距,最终我的这个盒子是不是依然这么大,哎,所以这里边啊,所谓的怪异盒是什么呀,拍顶的宽高不会。记录。在盒子模型的大宽高。之内对吧,还有什么边框也一样。边框也一样,对不对,这就是咱们的怪异核模型啊,好了,这就是咱们这两个核模型,那么我们要想改变这个默认的情况是是什么?是这个标准核模型,对吧?要想改变怪异盒,我们需要通过这个属性设置,什么border-box变成什么变成怪异盒啊,OK,这就是我们盒子模型中所有的内容,好了,那咱们今天就到这里。
我来说两句