精通CSS笔记：第7章-布局

所有CSS布局技术依赖于三个基本概念：定位、浮动和空白边margin操纵

 

主要内容：

1.  让设计在页面中水平居中

2.  创建两列和三列的基于浮动的布局

3.  创建固定宽度、流体和弹性布局

4. 将列拉长到整个可用的宽度

 

 

让设计居中有两个基本方法：一个方法使用自动空白边（margin auto）另一个方法使用定位和负值空白边

 

PS：怪异模式中的IE5.x和IE6不支持自动空白边，幸运的是，IE将text-align:center误解为让所有的东西居中，而不只是文本，可以利用这一点方法让主题标签中的所有东西居中，包括容器DIV ,然后将容器的内容重新对准左边

 

body{text-align:center;}

#wrapper{

width:720px;

margin:0 auto;

text-align:left;

}

这个trick对代码无害，对代码没什么影响

此容器现在在IE以及比较符合标准的浏览器中都会居中

 

使用定位和负值空白边让设计居中

 

使用自动空白进行居中的方法是最常用的，但是它需要一个招数来满足IE5.x的要求，而且还需要对两个元素而不只是一个元素应用样式，因此，有些人喜欢使用定位和负值空白边

#wrapper{
          width:720px;
          left:50%;
          position:relative;
          margin-left:-360px;
          }

 

 

使用CSS进行布局的几种不同方式:包括绝对定位和使用负值空白边，基于浮动的布局是最容易使用的方法

 

 

浮动元素脱离文档流，不占用文档流空间，不再对包含它们的边框产生任何的影响，为解决这个问题，需要对各个点上的浮动进行清理。非常常见的做法，不对元素进行连续的浮动和清理，而是浮动几乎所有东西，然后在整个文档的战略点（比如页脚）进行一次或两次清理

 

 

以像素为单位的布局叫做固定宽度布局，由于它是刚性的，有时候也称作”冰布局“ 

 

固定宽度布局非常常见，它使开发人员对布局和定位有更大的控制能力

 

缺点：无论窗口的尺寸有多大，它们的尺寸总是不变的，因此它们无法利用可用空间。在高分辨率的屏幕上，为800*600分辨率创建的设计会缩小并且会出现在屏幕中间，反之，为1024*768分辨率创建的设计在低分辨率的屏幕上会导致水平滚动，随着屏幕尺寸范围越来越大，固定宽度设计的缺点越来越明显

 

固定宽度布局另一个问题：涉及行长和文本易读性

固定宽度布局对于浏览器默认文本字号往往是合适的，但是当文本字号增加几级，边栏会挤满空间并且行长太短，阅读起来不舒服

 

 

在使用流体布局时，尺寸是用百分数而不是像素来设置的

这使得流体布局相对于浏览器窗口进行伸缩。随着浏览器窗口变大，列变宽。相反，随着窗口变小，列的宽度变小。流体布局可以非常高效地使用空间，最好的流体布局甚至不会引起用户的注意

 

但是在窗口宽度小的时候，行变得非常窄，很难阅读。在多列布局中尤其如此，因此，有必要添加以像素或em为单位的min-width，从而防止布局变得太宰

 

若是设计跨越整个浏览器的宽度，也很难阅读。

要注意：首先，宽度不要跨越整个浏览器，而是让容器只跨越宽度的一个百分比，比如85%

还可以考虑用百分数设置填充和空白边，这样的话，padding和margin的宽度随着窗口尺寸而变，防止列太快变得过宽

 

对于非常严重的情况也可以选择以像素设置容器的最大宽度，防止内容在大显示器上变得极宽

 

弹性布局

 

弹性布局相对于字号（而不是浏览器宽度）来设置元素的宽度，通过以em为单位设置宽度，可以确保字号增加的时候整个布局随之扩大，这样可以将行长保持在可阅读的范围内，对于实力弱或者认知障碍的人士尤其有用

 

为了防止网页变得比窗口宽，出现水平滚动条，可以设置max-width(px或100%)

 

注：IE6和更低版本不支持max-width

 

弹性-流体布局