前言:在页面开发中,页面布局是十分重要的,本篇博客介绍一些布局的基本知识。
1、table 传统方法,使用表格元素进行布局。
2、float 浮动布局,对元素进行浮动,从而完成布局。
3、position 定位布局,我很喜欢的一种布局方式,属性值有static,relative,absolute,fixed
二、布局的分类
1、静态布局:元素不变的布局。
布局特点:
窗口缩小后内容被遮挡时,拖动滚动条显示布局
设计方法:
PC:居中布局,所有样式使用绝对宽度,高度
移动设备:另外建立移动网站,以m.域名为域名
布局特点:
改变屏幕分辨率可以切换不同的静态局部,在每个静态布局中,元素不发生变化,相当于静态布局的一个系列
设计方法:
使用媒体查询功能:@media
缺点:
如果屏幕尺度跨度过大,那么在相对原始设计而言过小或过大的屏幕上不能正常显示
特点:
分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配
创建多个元素宽度是相对的的布局。理想的响应式布局是指的对PC/移动各种终端进行响应的
备注:响应式布局的详细说明请参考 响应式布局总结