CSS笔记之页面布局（八）

八，页面布局

1.简介

常见页面布局：

• 表格布局

• div布局

2.表格布局

2.1 简介

不适用于复杂布局，仅适用于简单、有规则的结构

定位相对准确，与浏览器基本无关，适用简单分割

2.2 用法

table常用样式属性：

• border 在表格外围设置边框

• border­-spacing 设置单元格之间的距离（相当于table标签的cellspacing属性，即间距）

• border­-collapse 表格中相邻边框是否合并，取值：seprate（分离）、collapse（合并）

th/td常用样式属性：

• border 为单元格设置边框

• padding 设置单元格的内边距（相当于table标签的cellpadding属性，即边距）

3.div布局

定位绝对精确，使用灵活，适合于复杂的布局方式

• @charset "" ；指定字符集

@charset "utf-8";  //指定字符集为中文

3.1 简单布局

两种布局

• 1­-1-­1布局

• 1­-2/3-­1布局

3.2 圣杯布局

页面结构：两边的边栏宽度固定，中间主体在一定的范围内可自适应，并且主体优先加载

一般防止页面缩放太小影响浏览，都会为页面设置一个最小宽度min-­width

思路：一个主体占据中间，两个侧边栏占据两边。

3.3 双飞翼布局

源自淘宝的UED（用户体验设计）团队

双飞翼布局和圣杯布局要实现的效果是 相同的，只是思路不同

圣杯布局和双飞翼布局的区别：

• 双飞翼布局比圣杯布局多创建了一个div

• 双飞翼布局不用设置边框的相对定位，也不用设置偏移量

• 双飞翼布局使用的margin，圣杯布局使用的padding

实际开发中建议使用CSS3中的flex弹性盒子布局，更简单