水平垂直居中
一个元素水平垂直居中在CSS布局中很常见,本文记录总结了水平垂直居中的一些方法,按照CSS布局中两大版块展开:块级元素内部布局、块级元素之间的布局。块级元素内部布局包括文本布局及盒模型自身布局,块级元素之间的布局包括脱离正常流及正常流中的元素。
一个元素水平垂直居中在CSS布局中很常见,本文记录总结了水平垂直居中的一些方法,按照CSS布局中两大版块展开:块级元素内部布局、块级元素之间的布局。块级元素内部布局包括文本布局及盒模型自身布局,块级元素之间的布局包括脱离正常流及正常流中的元素。
position、display 和 float 三个属性叠加使用,会有我们意料不到的结果。但如果我们知道这三个属性的不同取值造成的影响以及它们的优先级,我们就能按照自己的想法来进行布局。
BFC(block formattting context),块级格式化上下文,我们在 CSS 中的许多行为都会创建新的 BFC ,到底什么是 BFC 呢?它提供了一个独立布局的环境,理解为一个盒子(块级元素),这个盒子里的一切布局不受外界影响(我们可以利用这个特性来消除浮动元素或者对其非浮动的兄弟元素和其子元素带来的影响),但盒子内部的布局存在相互影响。本文将从“何时产生新的 BFC ”以及“如何应用 BFC 实现我们想要的样式效果”两个方面展开。