页⾯布局有⼏种⽅法，flex布局优缺点
1.静态布局：
传统布局，屏幕宽⾼变化时，盒⼦使⽤横向或者竖向的滚动条来查看被遮挡部分，也就是不管浏览器窗⼝的⼤⼩怎么变化就按html语义标签排列的布局来布置。
2.弹性布局：
html横向滚动条样式css3引⼊的，flex布局；优点在于其容易上⼿，根据flex规则很容易达到某个布局效果，然⽽缺点是：浏览器兼容性⽐较差，只能兼容到ie9及以上；
3.⾃适应布局：
分别为不同的屏幕分辨率定义布局，在每个布局中，页⾯元素不随窗⼝⼤⼩的调整⽽发⽣变化，当窗⼝⼤⼩到达⼀定分辨率时变化⼀次。
4.流式布局：
页⾯元素的宽度按照屏幕进⾏适配调整，元素的位置不变，⼤⼩变化，屏幕太⼤或者太⼩导致元素不能正常显⽰。
5.响应式布局：
<meta name="viewport" content="divice-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
使⽤meta标签设置，页⾯元素宽度随窗⼝调整⾃动适配。主要属性及其含义如下：name="viewport"：  名称=视图；width=device-width 页⾯宽度=设备宽度(可以理解为获取你⼿机的屏幕宽度)；initial-scale - 初始的缩放⽐例  ；minimum-scale - 允许⽤户缩放到的最⼩⽐例  ；maximum-scale - 允许⽤户缩放到的最⼤⽐例  ；user-scalable - ⽤户是否可以⼿动缩放  。
6.⽹格布局：grid
⼆维布局系统，随意的定义每⾏每列的数⽬和⼤⼩。也⾮常简单⽅便，兼容性较差。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。