前端 页面布局汇总

盒子模型

了解页面布局之前，应该要了解一下盒子模型。所有的HTML元素都可以看作一个盒子，在CSS中，“box model”这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。盒子的整个宽高公式是
盒子的宽/高 = width（content）/height（content）+ padding + border + margin

盒子模型分为（W3C）标准盒模型和（IE）怪异盒模型。两者最大的区别就是属性width/height所表示的不同。CSS3允许通过box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

• 标准盒模型： width/height = width（content）/height（content）
  （box-sizing：content-box）
• 怪异盒模型： width/height = width（content）/height（content）+ padding +
  border。 （box-sizing：border-box）

JS常用获取盒子宽高

clientWidth/clientHeight: width（content）/height（content）+ padding
offsetWidth/offsetHeight: width（content）/height（content）+ padding + border
innerHeight/innerWidth: 窗口可视区域宽/高度
outerHeight/outerWidth: 整个窗口宽/高度，包括可视区域和工具栏
这里只列举出我常用到的几个，其他的还包括scrollWidth/scrollHeight，window.screen.width/height等其他方法。

页面布局

1. 静态布局

传统的web设计，所有元素都使用px作为单位。

• 设计方法 PC端和移动端使用不同的布局。宽高有调整时，使用滚动条查看被遮挡的部分

• 优点 不存在兼容性问题，布局简单

• 缺点 不能根据用户的屏幕尺寸做出不同的表现

2. 流式布局（百分比布局）

页面元素按照屏幕分辨率进行适配调整的。

• 设计方法 使用%百分比定义宽度，高度使用px来固定。通常配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读

• 优点 不存在兼容性问题，布局简单

• 缺点 不能根据用户的屏幕尺寸做出不同的表现

流式布局可以和CSS3的vw，vh做比较。同样是利用百分比进行布局，差别是vw和vh是以视口的宽度和高度为依据做百分比（也就是上面提到的innerWidth和innerHeight）。普通的百分比则以父盒子的宽高度为依据。

3. 弹性布局(flex布局)

CSS3引入的一种布局方式。关于弹性布局可以通过 http://www.ruanyifeng.com查看。

• 设计方法 利用display: flex产生一个Flex容器，其子元素就成为了容器成员。可以使用容器的属性达到目的。

• 优点 容易上手，根据flex规则很容易达到某个布局效果。

• 缺点 兼容性差

4 rem/em布局

支持浏览器的字体大小调整和缩放等的正常显示。rem,em都是顺应不同网页字体大小展现而产生的。其中，em是相对其父元素，在实际应用中相对而言会带来很多不便；而rem是始终相对于html大小，即页面根元素。

• 设计方法 将根元素设置fontSize{html {font-size: 16px}，那么 1rem = 16px 。通常这个fontSize需要根据设计稿的宽度进行计算。

• 优点 理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应。

• 缺点 rem布局只做到宽度自适应，高度没有做到自适应，单位换算麻烦。

单位换算麻烦问题肯定是有办法解决的。VSCode提供了PX转rem的插件，下面是推荐的一个VSCode插件。也可以通过npm下载对应的包进行转换，还是有不少啊，比如postcss-pxtorem….

5 自适应布局

分别为不同的屏幕分辨率定义布局。

• 设计方法 使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局

• 优点 能够适配不同终端

• 缺点 设计难，成本大

6 响应式布局

确保一个页面在所有终端上适配。感觉自适应布局和响应式布局的核心都是通过媒体查询进行不同尺寸设备的适配。但响应式布局只是结合了其他布局方式更好的适配了任何尺寸下的页面。

• 设计方法 使用 @media 媒体查询+ 流式布局（弹性布局/rem布局）

• 优点 能够适配不同终端

• 缺点 设计难，成本大

最后，我也是一个初入职场的小菜鸡，如果有说错的可以指正。哈哈哈哈哈哈~~~~~~