html中的布局主要由静态布局、自适应布局、流式布局以及响应式布局几类,简单比较以下这几种布局的区别和特点。
一 静态布局(Static Layout)
表现:在传统web设计中,不管浏览器尺寸具体大小多少,网页的布局会一直按照最开始的布局来显示。
特点:固定死宽高。
二 自适应布局(Adaptive Layout)
表现:就是为了不同屏幕的分辨率来定义不同的布局,并且在每个布局中的页面元素不随着窗口的大小变化而改变。
特点:自适应布局可以看做是静态布局的一个系列,即元素的位置随着网页大小发生变化而元素的大小不变。
三 流式布局(Liquid Layout)
表现:实质是百分比布局,只有一套布局,页面元素会随着窗口大小变化而改变。
特点:当窗口变得过小或过大,页面元素就不能正常显示。
1 百分比的特点
尺寸百分比:如width = 20%;
位置百分比:如left = 30%;
2 单位
1)em:参考点继承于父级字体大小
例如: