CSS中基本布局与格式位置介绍



五种基本布局定位类型:* 弹性布局 - 总体宽度及其中所有栏的值都以 em 单位编写。这应使布局能够使用浏览器的指定基本字体大小缩放。 对于视力不好的用户, 这可能更有吸引力、更易于访问, 因为栏宽度将变得更宽, 能以任何大小显示更舒适、更可读的行长度。 由于总体宽度将缩放, 您的设计必须允许可这宽度。* 固定布局 - 总体宽度及其中所有栏的值都以像素单位编写。 布局位于用户浏览器的中心。* 流体布局 - 总体宽度及其中所有栏的值都以百分比编写。 百分比通过用户浏览器窗口的大小计算。* 混合布局 - 混合布局组合两种其他类型的布局 - 弹性和流体。 页面的总宽度为 100%, 但侧栏值设置为 em 单位。* 绝对定位布局 - 所有前述布局的外栏使用浮动内容。 而绝对定位布局完全如其名所示 - 有绝对定位的外栏。 必须记住, 当使用这些布局时, 侧栏会“提出文档流程”, 因而可能有一些不合适的结果 (例如, 页脚可能“看不见”在侧栏在何处结束并在主要内容区域包含的内容少于侧栏的页面与页脚重叠)。　

　第一种位置关系：position:fixed 锁定位置（相对于整个浏览器的位置），常用在各大网站的右下角或其它位置的小广告。

如果需要调整锁定位置，需要使用如下方式：<div style="width:300px; height:300px; position:fixed; top:0px; left:0px; right:0px; bottom:0px" ></div>

　　第二种位置关系：position:absolute 绝对位置（相对于父级元素--浏览器，绝对定位的上级）　

(1)最外边没有absolute，则调整时div相对于浏览器变化；（2）最外面有absolute，则调整时div相对于最外层边界变化。

如果需要调整绝对位置，需要使用如下方式：<div style="width:300px; height:300px; position:absolute; top:0px; left:0px; right:0px; bottom:0px" ></div>

　　第三种位置关系：position:relative 相对位置（相对于自身应该出现的位置）

如果需要调整相对位置，需要使用如下方式：<div style="width:300px; height:300px; position:relative; top:0px; left:0px; right:0px; bottom:0px" ></div>