css如何让两个盒子水平一左一右

哈喽，大家好，今天给大家带来一个四 ss 三的翻牌效果，比较酷炫的翻牌效果，那如何制作呢？ 首先我们要设置一定基础结构，一个大盒子里面有三张 car 的就是我们的牌，每一个牌里面有正反面， 那么样式怎么写的呢？我们来看。首先包里为了美观，我们加了一个 c s s 的镜像渐变啊， c s s 的镜像渐变如何设置呢？大家可以参考达罗三死故的 c s 镜像渐变，就白光椅妹子设置镜像渐变可以去学习一下。 然后大盒子我们设置了宽高高度呢，用的一百 vh， 等于屏幕的高度，使用了 flax 布局，实现这个垂直居中以及水平的 排列，每一个排大小是三百和四百定位，然后这个就是正反面，正反面的大小是相同的，然后加了一些文字的颜色以及阴影， 正面也使用了进行渐变，背面也使用进行渐变，我们打开浏览器看一眼效果，效果已经有了，就是反面盖住了正面，因为我们加了定位吗？那么要实现翻转效果，其实 反面要在背面能看到，其实就让它翻转，那么这个翻转效果就可以使用我们的 cc 三 d 转换里面有个 transform 属性， 穿 som 属性下有一个 roteo yotitoy， 就来实现我们的翻转效果，我们来加一下就是 bike， 我们可以加 transform rotate to y 实现负一百八十第一季，我们看效果，哎，这样 bike 就会翻转了，但是翻转之后我们还可以看到背面，我们可以加上 bike face visibility hidden， 让背面不可见我们看一眼， 嗯，这样正面就看到了，刚才是反面遮住了正面，这样就 ok 了。那么其实划过的效果也是一样的道理，划过的时候使用 lot y 去实现翻转效果，我们来设置一下， ok， 我们写好了划过 car 的，让正面翻转一百八，让背面翻转至零，因为原来是负一百八。我们来看效果， 划过效果已经有了，就是没有动画，我们需要加一个 transition 哦，点二五秒，我们来看效果，可以，现在翻牌的效果已经有了，但是呢缺少一点三 d 的感觉，我们可以使用塞塞三的啊 prospective 属性来实现三 d 的效果， 我们找到呃，正面反面的负极加上 prospective 写八百像素来再看一眼效果， 哎，这样三 d 的感觉就比较明显了。到这我们的翻牌效果就制作完毕了，大家赶快去试一试吧。

你知道 cs 的元素的水平垂直都居中的七种解决方案吗？一行内元素水平垂直居中二绝对定位加 martin 减去自身宽高的一半三绝对定位加 ameritan bottle 四用变换居中绝对定位加 transform translate 函数五使用 flakes box 居中 display flakes 六 flags sam margeton bottle。 七亿网格居中 display table sale。

好，这个视频的话我们来分享一下盒子在水平和垂直方向上居中有哪些方式。 那我们在前端开发过程中当中经常会碰到啊，经常会碰到这种盒子在水平和垂直方向上进行居中，对吧？一般的情况我们都可能自己知道，就是一到两种的样子， 那在面试过程中，面试官也喜欢问到这个面试题，那你也能够回答出两种，一到两种，那如果说我们能能够回答出五种方式， 这个时候面试官对于你这段面试题回答是非常非常满意的，对不对？那今天这个视频我们就来分享一下这个盒子垂直水平均 中的五种方式。那么首先我们把 ht m 的结构写出来啊，点发的我们写一个，点发的是一个复合子，点丧是一个子合子，结构很简单。那么我们接着写我们的什么呢？写样式，写样式， 点发的，点发的的话我们给他一个宽五百，高五百， 那给他一个边框 bod epx l id， 给他一个边框，同样的我们点上也需要给他一个宽高一百 高一百，给个 boodod 为 epx xol id， 是不是好？在我们的浏览器里面打开看一下，现在长这样对不对？长这样我们需要做的一个效果是什么呢？我们需要做的一个效果就是当我需要把这个纸盒子移动到这个副盒子的垂直水平， 这中间对不对？中间距离，那我们可以知道，就是我们在这个复合子连一个写一个交叉线， 交叉线，这两个交叉线的交叉的这个点就是我们这个纸盒子需要移动到的这个位置对不对？大概就这个位置是不是也是在纸盒子的中间的交叉点，是不是？ 好？那么我们知道这一点之后呢？我们来写第一种方式，那么第一种方式的话，是大家可能经常会用到的，就是我们的一个伸缩布， 对不对？迪斯科 elax 好驾驶者 cnt snt， 还有一个就是我们这个 i love you i love 也是一个新特保存，打开我们的浏览器 已经去除了，对不对？但是我们要做一下验证，我们要画一下这个中线是否跟我们之前讲的这个是否一致？好两道这个中线， 嗯，这个中心到这里对吧？在中间说明这个狙中方式是没问题的啊，那这个是我们的第一个方式， 再介绍一下第二个方式，我们复制一下这个结构哈，复制一下这个结构，方式二，方式二。那方式二的话，嗯， 也是经常使用的一种方式啊，就是我们的子爵互相，子爵互相的意思是什么呢？就是我们的复合子设置相对定位 posshareshreat， 那么子和子设置绝对定位 posshret。 那么写完这个之后我需要怎么说呢？需要给他设置一个 toop， top 为百分之五十， 他为百分之五十，我们的 nice 为百分之五十。这个百分之五十其实就是让子和子移动到复合子百分之五十的位置，那我们先来看一下他移动到哪个位置 好？移动这个位置肯定明显不是我们狙中没有在我们狙中的位置，对不对？我们可以来量一下，测量一下，找到 我们的中线，这里到这里的距离，这里到这里我们来重新量一下 对角线，对不对？我们的对角线，我们的对角线，我们量了之后会发现我们设置的 nice 五十和 top 五十只是针对这个圆角，这什么呢？这个 小对盒子的左上角顶点，顶点对不对？顶点在这个中心的位置，那我需要移动，其实我们需要把它移到上面来，对不对？移到上面来，移到上面来的话，我们是不是要往上把盒子移动到盒子一半， 然后往左也移动到盒子宽度的一半，往上是高度一半，往左是宽度一半，对不对？所以我们需要对这个盒子进行一位 进行移位，那么移位我们经常的一个操作是什么呢？经常的一个操作就是我们的一个圈丝 boom， 圈丝 bom 的一个圈丝雷特 全是内存里面，我们给个负百分之五十，这个负百分之五十是 xoxo 的话，就相当于我们的一个宽度，自身宽度一半， 移动到自身宽度一半，负的位置负百分之五十，这个 y 轴百分之五十，也就是高度的一半，高度的一半。好，我们打开浏览器看一下，再来测量一下这个是否在我们的一个中线的位置， 交叉线，交叉线是不是在中间的位置，对不对？ ok， 那这个方 是也是可以的，对不对？那么再接着我们的一个方式三，接着我们的方式三， 方式三，方式三的话就比较特别一点，方式三的话我们不需要给他做一个定位，我们给他设置一个特殊的一个 啊，标签的迪斯科类啊，迪斯科类，一般迪斯科类啊，迪斯科类的话，我们设置他的一个为 tiber， 设置完这个之后呢，我需要给他 vividol like mad mad 设置为 mate， vivo。 设置完之后呢？我们的纸盒子需要设置 marjo two auto， 上下左右为自动。打开我们的浏览器，打开我们的 暖气看一下，再进行一下测量，好，进行一下测量， 找到中线位置，找到中线位置是不也是垂直水平之中，对不对？垂直水平之中，这是我们的一个方式三，好，我们的方式四， 重新打开我们的重秘密一下我们的文件方式四，方式四的话，我们来看一下，这个方法的话比较特殊，我们把我们的一个扫的这个盒子设置成为什么呢？设置成为 dsplay 因拉布拉克。设置我们的含内块啊，设置成我们的一个含内块元素。设置含内块元素了之后，我们的复合子呢？复合子 设置成文本的一个居中方式 tist， 哦， nice， 这个是我们在文文字的在水平方向上，对不对？经常使用的居中， 那么设置完文字，我们要在垂直方向上居中使用拉害他等于我们的我们的一个盒子的一个高度，对不对？含高等于盒子的高度，那么我们的文字就在垂直方向上居中，对不对？好，我们设置完这两个之后，打开浏览器来看一下， 发现盒子好像也进去这种，对，但是我们要测量一下，我们今天要测量一下，找到我们的这个线啊，这 对角线，找到我们这个对角线，然后发现，哎，他好像不在中线，不在中线位置，对不对？那这个时候需要对 这个小盒子还进行一个操作，进行一个什么操作呢？我们需要盒子依赖布拉克，其实有个对齐方式对不对？在垂直方向上的对齐方式，我要提个 nice， 我们给他一个 medo， 给他一个 medow。 好， 我们重新打开浏览器，我们直接从这里打开，刷新一下，刷新一下，测量一下，明显这个是已经下来了，对不对？下来我们来测量一下这个折线，这个对角线，这个对角线 已经在中间，这位置对不对？那这个方式也是可以的，对不对？好，那方式五， 方式五，我们来修改一下他的名称。方式五的话啊，同样的方式五的话，我们需要在这个复合子上面设 是一个猴 z 型，设置一个定位啊，猴子 z 型 renite， 那么子和子的话，我们也是设置一个猴子 z 型 iphone， 但是这个方式有点特别，特别，在哪里呢？我们的 top 设置为零。 ps， 那我们的一个 nice 设置为零。 ps， 那我们的 red 也设置为零 ps， 我们的包臀 b o t t om 也设置为零 px。 好，设置完 四个方位都设置完零 ps 之后呢，我们还需要写一个 money moneyo two auto， 就是四个方位都是自动，对不对？都是自动适配。打开我们的浏览器， 刷新一下。好，我们来进行一下测量，进行一下测量，找到这个中线到中线的位置， 中心到中心位置，这里到这里的位置是不是也在这个中 中线的位置啊？对不对啊？中线位置，所以我们这几种方式，五种方式都可以实现，都可以实现，那么大家在面试过程中能够回答出五种方式，那这个面试题已经能够达到很高的一个分数了哈， 能达到一个很高的分数了，那么这个就是这个视频的分享。

好的，大家，那么之前呢，我们说了一个盒子的水平布局的一些注意事项，对吧？那么接下来呢，咱们继续往下说说一个叫做盒子的垂直布局，盒子的垂直布局，我们看看盒子垂直布局有哪些的注意点啊？叫盒子的垂直布局， 那或者说盒子垂直布局的注意啊的注意， 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， 就可以解决这个外编剧重叠或者叫外编剧合并的问， 好吧？那么以上呢，就是当我们做盒子垂直布局的时候呢两个注意事项啊，我们在布局的时候要注意一下，好吧？