[TOC] # 你知道哪几种页面布局方式 **考察点** 页面布局方式，实现代码及其优缺点 **回答** ## 1. 静态布局 浏览器默认布局方式，使用静态盒模型布局，设置好各个盒子的宽高，内外边距。此布局方式很容易内容过宽产生滚动条或者被遮挡。 ## 2. 弹性布局 弹性布局可以使子元素能够根据外部宽度适当缩放宽度和高度，也可以使子元素根据需要的方式进行对齐。 优点：内部元素可以根据外部宽度适当的缩放宽度和高度。 缺点：窄屏下会导致子元素高度变得很大，不利于阅读。 详见 [扩展：弹性布局详解](layout-flex.md) ## 　3. 浮动布局 浮动布局使元素能够摆脱块级或者行内的限制，是元素可以紧密的排列在一起，主要利用`float`属性。类似百度图片或者pinterest写网站的图片列表，主要就是采用的浮动布局。 优点：自适应宽度，容器大小变化时，容器内的元素会自动重新排列，减少每一行的个数，窄屏下利于阅读。 缺点：需要清除浮动，否则会覆盖正常元素。详见 [清除浮动](clearfix.md) ## 4.定位布局 定位布局主要采用 `position:absolute`和`position:fixed`实现，比如很多网站上跟随滚动的客服按钮，右下角的返回顶部，电商网站的楼层导航，微博的右下角的私信聊天窗口等，使用`position:fixed`实现。而很多距离页面顶部固定高度的弹出对话框，页面顶部右侧的登录/个人信息等，则是用`position:absolute`实现的。 优点：能够使元素脱离文档流，不影响正常元素的布局展示。 缺点：他的优点也是他的缺点：不够灵活和容易覆盖其他元素，特别是`position:fixed`只能相对浏览器视窗，如果想让页面一大块内容进行偏移，那么需要单独修改元素的位置。 ## 5.响应式布局 响应式布局是一份代码能够兼容多种终端(PC浏览器，手机浏览器，Pad等)，无论在多大的宽度上页面都有比较好的呈现。响应式布局需要处理多种情况，例如字体大小，图片大小（过大时需要横向拉动，过小时无法看清楚），容器宽度，多列在窄屏下不利于阅读等。响应式布局可以用的手段有： 1. media-query：根据不同屏幕宽度使用不同的样式。详见：[扩展：媒体查询](media-query.md) 2. 单位: rem, %,vw, vh等重新定义基准大小，按比例显示宽度和高度。[单位](unit.md) 3. 静态布局和浮动布局等各种布局方式综合运用，使内容能够自然的换行，而不用拉动横向滚动条。 优点：一份代码能够兼容多种终端，减少重复逻辑的开发。 缺点：编写代码时需要做好各种终端的适配。 ## 6.多列布局 多列布局使容器下面的内容能够等高的分布在多个列中，这种方式在报纸、论文等情景比较常见，主要用到了`column-count`或`column-width`属性。[扩展：多列布局详解](layout-column.md) 优点：能够分列排版，在宽幅度版面上有利于阅读。 缺点：内容完全评分到各列，不能做到精确控制，同时在窄屏上也不利于阅读。 ## 7.网格布局