在 CSS flexbox 布局出现以前，如果要控制 HTML 元素的布局，要用到很多种奇葩的方式。在水平方向上得用float控制左右对齐，稍一不注意，就会有浮动的元素飞来飞去~。在垂直方向上就更是百家争鸣了：要么手动计算高度然后算出中心点，要么用 line-height 和 …

一般来说，涉及到多列，首先想到的是 flexbox. 尤其是常见的两行多列布局，flex 屡试不爽。 假设 HTML 是这样的：一个容器元素（class 为 box）里有十个子元素（class 为 box-item）。 这个四行多列，先用 flex 实现看看。 从上图可见，ju…

阅前必看：本文总结了各种常见的布局实现,每个方法的优缺点分析往后在github上陆续补充。还有就是这篇文章没提到的其他布局，待本人后续想到或遇到定会在github上及时更新。 由于文章篇幅较长,排版有些混乱,希望别介意哈。掘金PC端是会自动生成目录的,为了方便移动端阅读，还特意…

一些前置知识替换/非替换元素替换元素不直接显示html元素内容的元素，如img、input、iframe等替换元素尺寸video、iframe等默认宽高为300px、150px，img默认尺寸为0，加

如上图所示，结果应该很明确了：影响div元素高度的是line-height属性，影响span元素高度的是font-size属性，更准确的说法应该是line-height决定块状元素的内容区域高度，而font-size影响行内元素的文本区域高度，这里请记住内容区域与文本区域不是同…

上一篇文章我们讨论了font-size，这一篇来说另一个与文字关系密切的属性line-height。这里涉及到了内联盒模型相关的东西，这里保持了与上一篇类似的结构，先来说说概念，然后是度量单位，最后来聊一个常见的内联元素的现象。 说到盒模型，只要了解css的基本都知道这个概念，…