首先讲一下什么是弹性盒：
弹性盒布局模型（Flexible Box Layout）是 CSS3 规范中提出的一种新的布局方式， 弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。
说的简单点就是具有自适应的布局称为弹性盒布局。
那么如何进行布局呢？首先我们需要在父元素上加 display:box(老版本)或者display:flex(新版本).. 然后我们给每个子元素设置 box-flex:1;这样每个子元素就均分了父元素的宽度；当然你如果给某个子元素设置 box-flex:2；那他所占比例就大一点；另外要注意点，在使用弹性盒布局时，你也可以给子元素设置具体宽度，那么其他子元素就会用剩下的宽度进行布局；
弹性盒默认是水平布局的，可万一我们需要垂直布局怎么办呢，那就需要在父元素上加 box-orient:vertical;此外我们还可设置盒子的排列顺序 box-direction:reverse(逆序)。
再说一点，由于是具体宽度和弹性盒子一起布局，可能会出现父元素空间多余的情况，这个时候还可利用box-align 和 box-pack来进行样式改变.

然后讲一下怪异盒：
根据我自己的理解，怪异盒子就是和我们标准盒子模型相反的， 盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子 总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
要使用怪异盒子首先得给父元素加 box-sizing:border-box;然后你就可以尽情使用它了，不用计算子元素的宽高，因为他的margin，border 都在自己里面。

注：以上都存在兼容性问题，需要在属性前面加上 -webkit(谷歌兼容) 或者-moz(火狐兼容)
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生