好的,大家,那么之前呢,我们说了一个盒子的水平布局的一些注意事项,对吧?那么接下来呢,咱们继续往下说说一个叫做盒子的垂直布局,盒子的垂直布局,我们看看盒子垂直布局有哪些的注意点啊?叫盒子的垂直布局, 那或者说盒子垂直布局的注意啊的注意, ok, 那么我们过来试一下,我们现在呢搞两个盒子,一个呢叫 box 一,然后一个叫 box 二,也就是注意是两个相邻的盒子,对吧? box 一, box 二。那么接下来呢,我们为他们添加点样式, 比如说呢,都大小都一样,所以说我就直接来个 div, 所有的 div 呢,宽度来个二百,高度来个二百,可以吧?哎,然后背景色呢,我们单独设置,来个 box 一,背景色设置个绿豆沙,再来个 box 二, 二呢背景色呢,我们来一个叫胭脂红,我们先看一下效果直行,那么这样的话,两个相邻的盒子,对吧?或者说两个相邻垂直摆放的盒子,那么接下来我们要做一件什么事呢?此时大家注意, 我现在啊要为 boxe1 设置一个下外编剧,那么之前咱们讲外编剧的时候是不是说了呀,哎,我改变盒子的下外编剧和右外编剧,他是不是要改变其他盒子的位置啊?哎,那么说我要改变他的下外编剧,比如说 mb 啊 manjin bottom 下外编剧呢,我设置一个一百像素,对吧?哎,那这时我们过来刷新一下,看看盒子动没动啊?一刷新,那是不是改变了其他盒子的位置啊?其他盒子位置往下移动了一百个像素,这没问题, 对吧?哎,这是我们预料之中的,那么接下来此时大家注意了,我接下来要干嘛呢?我要为这个第二个盒子啊,再设置个上外编剧,也来个一百像素,知道吧?哎,下边这盒子也来个上外编剧,也来一百像素,那么大家需要关注的点是什么呢? 是他们俩对吧?一个下外编剧,一个上外编剧,他们俩的这个外编剧是会发生重叠呢?还是耒加到一块变成二百,这是大家需要关注的问题,听懂吧。哎,那么此时我们就过来,大家注意看, 我现在呢在给下边的盒子呢,设置一个上外编剧,也设置个一百像素,看懂吧?那么此时我回过来,我刷新,注意,我刷新了,我刷新,刷新,刷新, 发现什么呀?发现合作数并没变化呀,那么一个下外编剧,一个上外编剧发,发现怎么样?是不是重叠了呀?哎,所以说我刷新了之后没效果,因为他们的外编剧发生了重叠,那么如果在, 对吧,刚才要是没看到效果的话,我注意,我现在呢,把盒子二呢,我再给他加一百,是不是变成二百像素了呀?那此时我刷新, 那此时外编剧就是二百像素,而不是磊加到一块是不是变成三百啊,而是二百,发现是不是有一百像素发生了重叠,哎,那这就是外编剧重叠,我们过来说一下 说盒子垂直布局的第一个注意事项,说呀,若两个注意得是相邻吧,哎,相邻垂直摆放的盒子,那么上面盒子对吧?哎,那假如说 上面盒子的下外编剧与下面盒子的上外编剧会发生重叠,听懂吧?哎,那么这种情况呢,我们称之为叫做外编剧 合并,称之为外机编剧合并,那么当然通过刚才我把它调成二百之后,我们也发现了,合并以后外编剧是不是选择重叠这个外编剧的脚大值啊?哎,说一旦说合并以后,外编剧 说弱,对吧?合并后呢,那么外边距会选择重叠外边距的角大值,也就是说如果我这个二百和一百哪个大?二百大,那他们就选择用二百,其中一百被重叠了,那假如说我把这个 上面盒子的下外编剧调成三百呢?那么回过来刷新,哎,那是不是就变三百了呀?哎,就是从选择重叠后的外编剧的角大值啊,那么这一点大家在设计的时候是不是要注意一下啊,要注意一下啊,注意一下, ok, 那这个就是外边聚合并,那么刚才呢,我们说了,他必须是不是得是相邻并且垂直摆放啊?那假如说这两个格子不相邻,那还能存在这个问题吗?大家想想, 我中间随便加点内容,对吧?让他们不相邻了。一刷新注意看,那是不就是上边的多少来着?三百,下边的这是二百,对吧?当然中间我这个字体是不是他也得占点位置啊? 哎,那这样不相邻的话呢,那他就不会发生外边具合并的问题了。好吧,那这是第一 一个注意事项,我们在设计的时候要注意,那么接下来呢,再来第二个,第二个的话,我把这个注视掉,对吧?那上面这个,上面这个一二两盒子我也注视掉,我重新写一个,对吧?来个什么呢? 我来个发字,又来父子俩盒子,听到没?哎,我搞父子两个盒子,然后呢?我父盒子二百二百对吧?啊,也可以。然后呢父,盒子呢,我们再给他设置个背景色啊, bg, background, cola 呢,设置一个绿豆沙 设置一个绿豆沙可以,然后呢再来个纸盒子,纸盒子呢?注意,纸盒子啊,我宽度调成一百个像素,高度呢也来个一百个像素,然后背景色呢,我们调一个胭脂红,看懂吧?哎,就是纸盒子的大小是负盒子的一半,我们先执行一下,看效果,看一下是不是复制俩盒 盒子呀。负盒子是个二百乘二百背景石绿豆沙,纸盒子是一百乘一百背景色胭脂红,这么没没问题啊,哎,那么接下来大家注意了,我要干一件什么事呢? 我要调整这俩盒子的上外编剧,对吧?我不管调整谁的,我调先调个负负盒子的上外编剧,可以吧?哎,调整负盒子的上外编剧,我们看看效果, 那么复合字的上外编剧,我要给他调个一百像素,看懂吗?那么回过来我刷新, 哎,我们发现是不是两个盒子的上外编剧都进行了调整啊,那这个时候小伙伴就能接受说啊,那我调整负盒子的上外编剧,纸盒子是属于负盒子的,所以说呢子盒子被负盒子带动向下移动了一百,这个是我们意料之中的,我们可能也是这么想的,对不对? 好,那么回过来,大家此时注意了,我现在呀,我要把这个这个上外编剧啊给纸盒子,也就是调整纸盒子的上外编剧,听懂吗?哎,我先把它注视掉啊,先让他们回归到原点, ok, 回复到原点了,然后呢,我现在调整纸盒子的上外编剧,那么看看什么效果?过来刷新。哎, 大家注意了,我们发现我调整纸盒子的上外编剧,发现负盒子的上外编剧也随之移动了,这个好像超出我们的预料了, 我们希望的什么呢?我只调整纸盒子的上外编剧,你副盒子别动,我是相对于你副盒子往下移动一百个像素,听懂这意思吧。哎,那这时又发生了外编剧的重叠现象,我们 过来说一下,说弱说弱,嗯,弱,两个盒子对吧?盒子具有父子关系,则两个 盒子的上外编剧会发生重叠,是不是俩盒子的上外编剧会发生重叠啊?若改变盒子的外编剧,我们发现是不管是改变或者叫上外编剧啊,上面不管是改变副盒子还是子盒子的上外编剧,对吧?那么父子盒子 都会随之移动位置,听懂这意思吧。哎,那这个呢,我们要注意一下, 那么我们说,假如说呀,我们在实际应用当中,我就想移动纸盒子怎么办呢?哎,那么就刚才不是根据上边的这个经验,我不让他们俩的外边剧发生 重叠,是不就可以了呀?哎,根据刚才那个问题的经验,我们说不让他们俩外边剧发生重叠,那就是说在他们的外边剧这个地方啊,我们设置点内容,比如说随便的来点内容,让他俩外边剧分开,别让他重叠到一块,对吧?哎,我就随便加了个 字符,对吧?啊?加了个文本,那这时刷新看,那是不是纸盒子单独有用啊?但是此时大家发现了,我加了内容的话,你的这个,呃文本他是不是也占了一定的大小啊? 所以说这种方式呢,思路是对的,但是这种方式是不对的,那因此我们想,那怎么办呢?那这种方式我们需要解决,对吧?解三种,或者说三种解决办法怎么办?我们可以啊,为复合字加个边框,我一旦加了边框的话,那么上外 编剧是不是就不重叠到一块了呀?哎,说第一种解决办法呀,一叫做可以为复原数啊,添加一个边框,哎,为复原数添加个边框,那么就不会让他的外编剧重叠了,听懂这意思吧,哎,那我们就给复原数加个边框,叫 b d 加, 哎,叫 bd 加,对吧? bd 加加个边框,边框呢,就一像素是不就够了呀?然后呢,实现黑色也可以啊,那么此时我再刷新 看,有了边框,那么此时我移动纸盒子的上外编剧是不是相较于负盒子是不是移动了一百啊?哎,呃,这种方式还行,对吧?比刚才那种方式加文本好多了。但是大家注意边框是不是可以改变盒子的大小,虽然只有一像素,但是此时 我盒子的大小那是不是就是二百零二乘二百零二了?因为我边框还占了一像素,下边边框也占了一像素, 因此你要想搞一个,对吧?哎,就是严谨一点,都是二百乘二百,你是不是还得把他这个宽度调成幺九八呀,把边框也得计算在内, 听懂这意思吧,哎,所以说这种方式呢,也可以解决,但是呢,应用的相对来说比较少,那根据他有个相同的思路,既然你加边框可以,那你加那边距是不是也能让他外边距不重叠到一块, 听懂吧?哎,叫可以也可以为为复元素啊,添加什么呢?添加叫做内编剧,不加边框加内编剧,其实道理一模一样,听懂吧?哎,叫拍定,拍定的话呢, 我们也来个一个像素啊,那这时刷新比刚才的边框略微的好那么一点点,为啥呢?哎,假如说我们不需要边框的时候,边框是不用显示的, 听懂吧,但是那编剧是不是也会占用我盒子的大小,对吧,那么道理是不是跟刚才边框就一样了,此时他又是一个二零二乘二零二的盒子, 好吧,哎,那么其中其实呢,还有第三种解决办法,是最好的一种啊,最好的一种叫什么呢?叫胃复元素对吧?啊,胃复元素添加一个叫做 over 粉漏 flow overflow 呢?为 hiden 加个这个 overflow higher, 那么此时复制一下对吧?然后呢,我把内编剧复合作的内编剧我去掉,然, 然后呢? over flow, 来个嗨的,然后此时过来刷新,对吧?注意现在的盒子,外边的盒子其实还是二百乘二百,盒子的大小没变,但是呢,我们外边锯却不合并了, 听懂吧。哎,我们小伙伴们说说你这个 over flow 海嫩不是上边解决易出问题的吗?这怎么还在这里还能解决外边去重叠呢?哎, 那大家先记住这个操作,那咱们后面呢会讲一个高度塌陷问题,讲高度塌陷问题的时候呢,咱们就一块讲讲它底层的这个原理,其实呢,它底层默认会开启一个隐藏属性叫 bfc, 就可以解决这个外编剧重叠或者叫外编剧合并的问, 好吧?那么以上呢,就是当我们做盒子垂直布局的时候呢两个注意事项啊,我们在布局的时候要注意一下,好吧?
粉丝3944获赞2.1万

好的,大家那么说完这个盒子模型的组成部分以后呢,给大家说这么个事啊,叫做浏览器的默认样式,叫浏览器的默认样式,嗯 嗯,比如说呀,我们呢现在搞一个盒子先,对吧?先搞个盒子,搞个盒子,然后呢我们给他设置点样式,比如说 啊,点 box 一,我们给他来个宽,宽呢两百,高呢也来个两百,也来个两百,然后呢白格让卡乐呢,我们给他设这个绿豆沙色,好吧? ok, 那么此时直行 执行了以后呢,大家仔仔细看一下,发现我这个盒子啊,跟浏览器这个边缘之间是不是有一定的空隙啊?哎,他有一定的空隙,说这空隙是怎么回事呢?我们可以按对吧, f 十二对吧,或者是右 路见的这个检查,看一下这个开发者工具,开发者工具呢?他其实呢把我们这个盒子,我们点击这个盒子, 我们点击一下,对吧?点击这个 body 浏览器,浏览器呢?它在这里,这是不是有我们所说的盒子模型啊?盒子模型,盒子模型,大家注意看啊,这是我们的内容区,外边有个叫拍顶,这叫做内编剧,然后是边框,对吧?哎,这都没有设置,然后注意看马警,马警是不是叫外编剧啊? 外编剧,他给我来了个八项数,那明显我们并没有设置外编剧啊,我们没设置外编剧,发现他这个外编剧却有八项数, 那是不是说那妈,这如果我们不设置,难道他的默认值是八?我们过来看一看,对吧?嗯,去找一下这个叫做盒子模型, 这呢外编剧,对吧?我们找个外编剧,外编剧看看。妈,金属性,妈,金属性呢啊,随便来个吧妈金套吧,看看他有没有默认值,发现默认值是零,那这八是哪来的呀? 那实际上是不是就是浏览器提供的默认的样式啊?哎,这是浏览器提供的啊,我们看看别的浏览器有没有,我们也看看火狐的浏览器是不是也有这个默认样式啊?那有的时候我们在布局的时候呢,我就不希望有这个默认样式, 听懂吧?哎,我们希望这些,不希望他有空隙,然后呢这些布局我们自己来,不想用这个浏览器的默认样子,那习习惯上呢?我们通常啊把它去除, 那怎么去除呢?说白了就是我们要把所有的标签,他的这个默认的外面剧都去除,那怎么搞?那我们习惯上所有的标签那是不是就腥小 所有啊?然后呢我们来个叫做啊,喜欢上来个 majin, majin 呢?零,再来一个叫做 pading 啊,也是零这个操作呢,以后啊我们在布局的时候习惯上就先来个这个东西,把浏览器默认给我们提供的这个样式啊,把它清除,清除了以后我们回过来再刷新 是不就顶到头了呀?哎,所以说这个操作呢大家一定要稍微的注意一下对吧?哎,这叫清除, 叫清除。呃,清除,清除浏览器的默认样式我们习惯上啊,先来个这么个东西,剩下的我们自己去给他们布局相应的位置, 好吧,星代表所有标签,然后呢外边剧内边剧都给他设置成默认之为零,好吧,不用浏览器给我们设置的默认样式。

好,接着呢,我们来说这个盒子模型的分类,注意啊,在这个盒子模型的分类里边,哎,一会呢,我们就会把之前我们面临那个问题,大家注意啊,当我们把这个 padding 讲完之后,我们说过,最终我们是不是有这么一堆问题啊? 这么个问题啊,这些问题是需要我们这个来考虑的,来,我把这些问题放到我们这个笔记里边啊,放到笔记里边, 好,这块啊,总结,这是一个问题,这些问题你看前两个问题,实际上我们都是可以怎么样,都是可以直接把它搞定的,只要我们算好那个,根据 ui 设计稿算好它的距离位置,我们都可以直接调的, 但这个包的没有办法,对不对?包的你怎么调啊?包的是浏览器的解析问题,所以说我们讲完这个盒子模型的这个两个分类之后,哎,我们就可以把刚才 这个边框问题给大家解决掉啊,边框问题解决掉好,大家看啊,根据 w 三 c 的规范,哎,元素内容占据的空间是由外的属性来设置的,就是宽度嘛, 而内容周围的拍顶和包子,它的值怎么样?是不是另外计算的呀?哎,你看不幸的是什么呢?在 i e 五点多和六在什么呢?怪异模式中使用自己的什么呢?非标准模型。 这些浏览器的这个 y 的属性不是内容的宽度,而是内容内编剧边框的宽度的总和。哎,这句话你需要再看一遍,这些浏览器的什么呀? y 就是宽属性,不再是内容的宽度了, 而是什么呢?内容加上内边距,再加上谁,边框整体叫做谁啊? wes, 对吧?好,所以说我们就有了谁啊,就有了盒子模型的分类啊,就有了盒子模型的分类。好这一块啊, ie 五 ie 六我们就不太多说,因为我们正常开发现在基本上也都不再去用这个 ie 五或者 ie 六了啊,这个说实话太那个啥了,太老了啊,这个软件太老了, 现在都是 i e 就是十级了,对不对?并且 i 转机现在用的都不多了。现在这个,呃,这个,这个微软是不是推出这个什么 id 机,对吧?现在都这个 id 浏览器啊, 那我们开发一般都是用谁的?用谷歌啊,用谷歌,谷歌火壶都可以用的。好,那么接着就来看吧,我们直接来说这个盒子模型到底分为, 嗯,拿两个类别啊,拿两个类别。那首先呢,盒子模型这两个两个啊,一个叫做标准盒模型,注意啊,标准盒模型就是我们所谓的什么呢? w 三 c 啊, w 三 c 核桃模型。好,那么还有什么怪异核桃模型,这个怪异核桃模型就是 ie 核桃模型。嗨,注意啊,我告诉大家,现在呢,基本上啊,虽然说现在还是两个核桃模型了,但是呢,现在这两个核桃模型啊,在 w 三 c 的规范里边,实际上已经融合为 可以通过一个属性来进行控制了啊,那么这里面来看啊,再来见一个新页面,来,这边来一个就是合同模型的这个分类啊,这样吧,标准或者说呢,怪异,怪异,哎, 怪异,荷包型好点,开启填面这个啊,一,他把这 这个斜杠变成这个那个啥了,咦,刚才这个敲错斜杠了,没关系,一会再改吧,这个无所谓啊,来看一下我们现在来这个 div, 我们还来这个 div 啊,来 steel, 好,来这个 div 宽三百像素, 高三百像素。呃,来个这个边框吧,包子,好,这个啊,写完之后呢,亮起,运行好,这里边我们直接用这个火壶打开啊, 来,打开之后再看这个效果,现在这个 div 啊,是这样的,这个效果不错了,然后接着啊,然后接着我们里边呢,加这个 margee 十好,加一个这个拍定十好 啊,加完之后呢,这个效果肯定就是我们最常见的效果,对不对?你鼠标往上一放,它里边既有外侧的这个抹紧,又有内侧的,谁啊?这个拍顶对不对?都放进去了啊,那么这个就是我们什么呀,标准的盒子模型啊,标准的盒子模型,那么所谓的怪异盒子模型,注意啊,好, 来,这边我们写个注视啊,可以通过一个属性,谁呢? box setting 啊, box setting 属性来干嘛呀?来控制,哎,就是,呃, 盒子是 w 三 c 还是什么样,好,怪异,盒子这个地方啊,通过这水可以控制,那么这一块我们来看啊,有一个 box id ig sitting, 挑两个值呀,我的妈呀,挑两个值啊,好,一个叫做 content box, 一叫做 bother box 啊, box 好,大家来看啊,现在现在我们这个属性,来,我们先来, 你看这边,同志们,看,好我们这个浏览器这边好,十零点六六,鼠标往上一放啊,是不是三百二十一点三三,对吧?这是我们是标准盒模型独立部分,然后我们加上我们这个属性 box sitting, 然后呢?还有个这个包灯 box 好看。好了, 到这里面啊,我们先刷新页面,然后呢,你看鼠标往上一放,注意,同志们,此时鼠标往上一放,谁啊?三百乘三百。哎,你发现此时的这个 是不是也有啊?马进也有,但是宽高底下三百乘三百,对不对?好,所以这一块啊,这个 body pops 就什么样。怪异 盒子,这个抗字的报告就是啥呢?就是 w 三 c 盒子啊, w 三 c 盒子,注意啊,我倒是认为这个怪异盒子在这个地方含有边框的布局上要比 w 三 c 盒子更好。 为啥?你看?同志们,你看啊,现在这个,我们把这个马紧去掉啊,我们马给去掉,现在三百宽,三百高,如果是,如果是那个标准的 w 三 c 盒子, 他所占据的宽度是不是三百加上什么呢?两个像素的三百零二,再加上这个十,就是三百二十二,对不对?三百二十二,但是呢,因为这个浏览器对边框的解析他不是一样,是不是?他是零 点六六六六七呀?那这样的话是不是就不太好了?同志们,这样不太好了,好,所以说我们在进行页面缩放的时候,注意啊,我们在进行页面缩放的时候可能会产生问题啊,页面缩放可能会产生问题,好,但是现在这个你来看啊,先,这个,你看 他这边是不是还是零点六六六七啊?对不对?注意看啦,来,我现在把它给放大缩小一下, 好,放大,放大,放大,你看啊,我把它放大完之后,同志们,你看这里是不是从零点六六七变成零点九了?同志们, 那就说不对呀,你这也没有什么变化,你这边这个什么宽高还是变了呀?边框的宽度是不是还是变了呀?但是这样,此时我让你看的不是这个边框了,是谁?是整个盒子的占地面,你看是不是还是三百乘三百? 同志们啊,看好了,你看还是不是三,三百?三百,如果是标准盒子模型的话,只要边框大小改变了,那么这个整个盒子的占地位置是不是也会发生细微的改变? 但是你看啊,当我们把它调这调这一块啊,调成这个怪异盒子的时候,你发现没有?哎,你再随便发大缩小,我整个盒子的占地大小就是谁就是宽高,对不对?就是宽高啊,所以这里面我们给大家切一下,你看啊, 标准盒子 marting petting boulder content 注意啊,四部分互相独立,互不干扰四部分互相独立,然后呢?互不干扰,但是对 外一盒子来讲,你发现了吗?哎,马金是一部分,但是呢,你看啊, padding 加 bother 加加什么呀?加里边这个内容他们共同等于谁? 等于 ctrl, 那么此时这个 ctrl 是不是就是我们色列宽高啊,对不对?你看,你,此时你随便说放这个盒子,他的整体大小是不是始终就是三百乘三百啊, 对不对?他再怎么说放他是不是在整个盒子内部,哎,你想怎么分配?你的拍的也好,边框也好,这个占地,这个内容占地也好,你想怎么分?你给我怎么分去,对吧?我们怎么样不会影响外界的盒子 啊,所以说注意了啊,好使用啊,词属性怎么样呢?可以 解决什么呢?浏览器,对啊,浏览器,这样吧,不同浏览器对边框的解析啊,解析问题 啊,解析问题。好,这地方再看一下啊,使用这个属性就可以解决这个浏览器对不同边关的这个解决问题, 是不是这样一来的话你随便放到左脚,只要我的宽高设定好了。哎,你自己内部你想怎么变怎么变,我们不会影响到什么样外界内容。好,所以这点就这么跟大家说。什么呀?这两个盒子模型啊,两个盒子模型这个地方啊?好,停下。