前端学习——页面布局

1.常见的五种布局方式

1.静态布局：
给页面元素设置固定的宽度和高度，单位用px，当窗口缩小，会出现滚动条，拉动滚动条显示被遮挡内容。

优点：设计简单。

缺点：对于不同尺寸屏幕的兼容性不好，特别是移动端。

2.流式布局：
元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。

优点：页面元素宽高可以自适应调整。

缺点：屏幕尺度跨度过大的情况下，页面不能正常显示。

3.自适应布局：
屏幕尺寸或分辨率变化时，页面元素会跟着变化。

缺点：页面元素不会随着窗口大小的调整而发生变化。

4.弹性布局：
弹性布局又称为盒子布局或flex布局，用来为盒状模型提供最大的灵活性 ，任何一个容器都可以指定为 Flex 布局。 给父容器添加display: flex/inline-flex;属性 ，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式。

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

缺点：高度没有做到自适应，一些对高度，或者元素间距要求比较高的设计，则这种布局没有太大的意义。

5.响应式布局：
使用meta标签设置，页面元素宽度随窗口调整自动适配。采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局。

优点：对PC和移动端有着非常好的适应，只要有足够的耐心，效果会非常