html常见的布局总结

主流布局的类型：

1.静态布局

2.响应式布局

3.弹性布局

pc站常见的布局：

1.一列布局（静态布局）：一列自适应居中

2.两列布局：一列固定宽+一列自适应

3.三列布局（双飞翼布局）：中间列自适应宽+左右列的宽固定

一列布局：

1.两个要点：

*页面内容区有一个固定宽度

*页面内容区域在浏览器窗口中自适应居中

2.实现办法：

页面内容区域box{width：自定义宽度；margin：0 auto；}

两列布局：

1.实现办法：

固定列容器{width：固定数值；float：left/right；}

自适应列容器{margin-方向：数值=固定列宽；}

三列布局：

特点：三列布局：中间宽度自适应，两边定宽。

中间列放置主题内容，在浏览器中优先展示渲染

原理：

当子元素处于浮动状态时，设置负margin>=子元素宽度时，子元素会叠到兄弟元素上