布局的传统解决方案是基于盒状模型，依赖 display + position + float 方式来实现，灵活性较差。2009年，W3C提出了一种新的方案-Flex，Flex是Flexible Box的缩写，意为”弹性布局”。Flex可以简便、完整、响应式地实现多种页面布局。下…

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战 Flex是Flexible Box的缩写，表示弹性布局，用来为盒子模型提供最大的灵活性。 任何一个容器都可以设定为flex布局： 设定为fl

在介绍postion之前，有必要先了解下文档流。 简单说就是元素按照其在 HTML 中的位置顺序决定排布的过程。HTML的布局机制就是用文档流模型的，即块元素（block）独占一行，内联元素（inline），不独占一行。 一般使用margin是用来隔开元素与元素的间距；padd…

Flexbox布局（Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的。简单的理解，就是可以自动调整，计算元素在容器空间中的大小，并进行有效合理的布局。 Flexbox布局中有两个重要的概念：Flex容…

前端开发中我们经常会遇到文字垂直居中的场景，这是候我就会使用line-height，vertical-align等css属性去调整文字的位置，但是实际我对这块内容一直是比较模糊的，未免有一些一叶障目了，因此在这里对这块内容进行整理总结，希望之后再遇到此类情况时可以做到成竹在胸。…