同是天涯程序猿

聊一聊CSS定位CSS定位即允许元素可以出现在相对正常位置外的其它位置，实现对元素位置控制的效果。CSS定位基本分为三种定位：普通文档流、浮动和绝对定位。普通文档流普通文档流即按照HTML的定义顺序完成排布，块级元素就从上往下排列，行内元素就从左到右依次排序。浮动浮动即给元素设置float属性，设置float的属性会脱离文档流，则该元素不会占用文档流中的空间，其它在文档流中的元素排布就会无视该元素，脱离文档流的元素也不能撑起父元素的高度。但float脱离文档流又不太完全，附近元素附件元素内的文

布局是前端比较基础但是也很重要的部分，过去传统的布局方案一般是通过基于盒子模型：然后配合display、position或float等属性进行布局。这种布局方式使用和理解起来是相对简单，但是我认为布局更复杂的布局场景和维护起来会比较困难。本文总结几种布局方式供参考：Flex 弹性布局、Grid网格布局和多列布局。没有适用所有场景的布局，只有合适的布局，在实际应用中多种布局方式灵活使用才能达到更好的效果。1. Flex弹性布局概念Flex布局指弹性布局，是一种一维的布局方式，提供了对子元素的空间分

你可能已经很熟练使用这两个灵活的单位，但你可能不完全了解何时使用 rem ，何时使用 em。 本教程将帮你弄清楚!em 和 rem都是相对单位，由浏览器转换为像素值，具体取决于您的设计中的字体大小设置。 如果你使用值 1em 或 1rem，它可以被浏览器解析成 从16px到 160px 或其他任意值。padding设置了1em解析出来的值为16px