前端-页面布局

一、布局的作用

在开发网页的时候，通常都是要先对其进行布局。好的布局可以瞬间抓住客户的心，能吸引潜在的合作者。

二、布局方式

1.静态布局

静态布局就是通过给页面设置固定的宽高，单位为px。

 <style> 

        body{
            border: 1px solid black;
            width: 1500px;
            height: 1500px;
            margin: 0px;
        }

    </style>

优点：布局简单，对于初学者比较友好。
缺点：宽高是自定义的，当浏览器界面大小发生变化时，会出现滚动条。不会自动适应浏览器的大小，屏幕兼容性较差。

2.流式布局

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

<style> 
        body{
            border: 1px solid black;
            width: 100%;
            height: 100%;
            margin: 0px;
        }

    </style>

优点：页面的宽高可以自适应调整。
缺点：当屏幕变化时，元素会自动改变但布局是不会改变的。会导致屏幕过大或过小时，页面不能正常显示。

3.自适应布局（bootstrap）

自适应布局元素会随着屏幕的分辨率变化而变化。也用百分比为单位。

 <style>
        .diy {
            width: 30%;
            background-color: #b6a2dc;
        }
  </style>

优点：对开发的成本较低，对网站的复杂程度兼容较好。
缺点：页面元素不会随着窗口大小的调整而发生变化。

4.弹性布局

弹性布局又叫盒子布局，用em或rem为单位进行相对布局。相比较用百分比的方式更加灵活，方便。

 <style>
        .body { /* 使子元素的位置水平垂直并排显示*/
           display: flex;
        }

    </style>

优点：可以轻松改变元素的显示顺序，适应性较好，网页布局快捷。
缺点：兼容性较差。

5.响应式布局

响应式布局是CSS3增加的新的布局方式。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。
使用meta标签设置，页面元素宽度随窗口调整自动适配。采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局。

优点：适应pc和移动端，如果足够耐心，效果完美。
缺点：只能适应主流的宽高；如果匹配足够多的设备屏幕的大小，对于工程师来说工作量不小，设计更需要多个版本，工作量增大。