CSS之页面布局之二（冻结布局）

浮动布局在固定屏幕（如UI面板，人机交互界面）上是很常见的页面布局方式。

实现方式很简单，将HTML端需要固定大小的内容包到<div>中，并在CSS端设置该div的width即可

第一步就是将HTML端需要固定大小的内容包到<div>中，下图是将整个body包到<div id="all">中，以实现页面整体固定大小：



第二步CSS端设置<div id="all">的width：

#all {
width: 1280px;  //根据需求设置合适的屏幕宽度
}

这样无论浏览器窗口如何调整大小，页面将始终保持固定的大小。

但在桌面页面中，通常不会对整个页面使用冻结布局。因为页面不随浏览器窗口大小的改变而改变，看起来应该不会觉得舒服：



如图所示，浏览器窗口拉宽时（或PC宽屏屏幕下，浏览器全屏时），右边将出现大片空白