css学习笔记——浅谈布局
精通css马上要看完了，前面没有跟着做例子，效果不是很好，等过两天再回头去看。今天意识到自己还是太浮躁了，虽然现在慢慢的开始一个人在一边学习，但学习的过程有点急于求成了，遇见不懂的没有静下心来钻研，这样最没有效率了，只有钻研自己不懂的才能获得提升，不然都是已经掌握的还去学习干嘛。从今天开始要改变这种心态，不然总学不深入。另外发现书上很多知识都顾及到了IE6甚至IE5.5，IE6可能过两年就要彻底消失了，IE5更不用说了，但学习的时候还是完整跟着走比较好，所以笔记中也会有关IE6的BUG处理内容。今天更新的是css布局相关的笔记，做了几个demo。
1.设计居中
方案一：使用自动空白边
只需设置容器的宽度，然后将水平空白变设置为auto。
#wrapper{
width:720px;
margin:0 auto;
}
但是IE6不支持自动空白边，幸运的是IE将text-align默认为让所有的东西都居中显示，而不仅仅是文本，所以可以利用这一点让主体在IE6中也居中,然后将容器的内容重新对准左边。
body{
text-align:center;
}
#wrapper{
width:720px;
margin:0 auto;
text-align:left;
}
2.使用定位和负值空白边
与前面一样首先定义容器的宽度，然后将容器的position属性设置为relative，将left属性设置为50%；这回把容器的左边缘定位在页面的中间：
#wrapper{
width:720px;
position:relative;
left:50%;
}
但是我们希望的是让容器的中间居中，实现的方法是对容器的左边缘应用了一个负值的空白边，等于容器宽度的一半：
#wrapper{
width:720px;
position:relative;
left:50%;
margin-left:-360px;
}
书上的例子是在方案一的body中加了一条min-width:760px;的属性，为了解决在netscape6中当窗口的宽度小于容器宽度时左边的内容溢出的问题，没有netscape测试（也没必要），但我发现在chrome中，方案一即使去掉min-width属性也不会出现左边内容溢出的问题，倒是方案二书上没有添加min-width属性，反而出现了左边内容跑到外边去的情况。
其实这只是两种处理方式，选择哪一个是看个人喜好，但方案一相对而言更简单，也更通用。
2.基于浮动的布局
先MARK一下IE中的3像素文本偏移和双空白边浮动的BUG；
书本的例子比较简单：
#content{
width:520px;
float:right;
}
#mainnav{
width:180px;
float:left;
}
#footer{
clear:both;
}
书上为了处理IE5的框模型问题而加了一些hack，现在应该完全不用考虑了。而至于三列布局，就是把其中的一个分成两个，也不详述了。
3.固定宽度、流体和弹性布局
前面的示例都是以像素为单位定义的宽度，这种布局成为苦丁宽度的布局。固定布局的好处显而易见，像素级别的控制，可以进行精细而准确的布局，也方便大公司设计和前端人员的配合。但缺点也很明显，无法适应各种各样的设备屏幕，现在不都要“mobile-first”么？移动互联网正是大潮，这样的布局无法给移动用户带来良好的体验，所以需要“网页自适应设计”。
方案一：流体布局
使用流体布局时，尺寸是以百分数而不是像素设置的，这使得流体布局能够相对浏览器窗口进行伸缩。但当窗口变得很小时，行将变得很窄是内容难以阅读，因此有必要添加以像素会em为单位的min-width，同理，也要防止当窗口变得很大时导致内容过宽，所以也有必要添加max-width。以三列的流体布局为例：
#wrapper{
width:85%;
}
#mainnav{
width:23%;
float:left;
}
#content{
width:75%;
float:right;
}
需要注意的是设置内容区域宽度时是相对于内容容器而不是整个容器，比如说secondarycontent大约为整个容器的23%，则相对于内容容器为23/76*100%=31%，同样道理计算出两个内容区块的间隔为3%，则主内容区域宽度为66%。
#maincontent{
width:66%;
float:left;
}
#secondarycontent{
width:31%;
float:right;
}
另外，考虑到上面提到的情况，可以给body添加min-width和max-width：
body{
text-align:center;
min-width:760px;//在屏幕宽度小于760px时显示滚动条
max-width:3000px;//在屏幕宽度大于3000px的时候宽度固定为3000px*85%
}
注：现在在css3中可以使用media queries属性查询屏幕的宽度，如：
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
如果你想链接到一个单独的样式表，把下面的代码放在标签里，这样就可以在屏幕宽度小于600px时调用small.css，同理还有min-width，当屏幕宽度大于最小宽度时调用。
关于网页自适应之前更过一篇阮一峰先生翻译的文章，才用的是viewport标签，今天梦想天空也发布了一篇，地址是：http://www.cnblogs.com/lhb25/archive/2012/12/04/css3-media-queries.html
方案二：弹性布局
弹性布局相对于字号而不是浏览器宽度来设置元素宽度，通过em设置宽度，可以确保在字号增加时整个布局随之扩大，这对视力弱或有认知障碍的人尤其有用。弹性布局也有其缺点，因为布局会随着文本字号的增大而增大，所以弹性布局可能会变得比浏览器窗口宽，导致水平滚动条出现。为了防止这种情况，可以再主题标签上增加100%的max-width（注：IE6不支持max-width）
弹性布局的技巧是设置基字号，让1em大致相当于10像素。
大多数浏览器的默认字号是16像素，10像素是16像素的62.5%，所以主题上将字号设置为62.5%：
body{
font-size:62.5%；
}
现在1em相当于10像素，所以现在的任务就是进行单位换算了
#wrapper{
width:72em;
margin:0 auto;
text-align:left;
}
#mainnav{
width:18em;
float:left;
}
#content{
width:53em;
float:right;
}
……
试了一下书上的例子，流体布局字体放大时左上角保持位置不动，整个页面会向右下角放大；而弹性布局时均匀的放大。
当然，更好的方式是弹性流体混合布局。
方案三：弹性——流体混合布局
混合方式为以em设置宽度，然后用百分数设置最大宽度：
#wrapper{
width:72em;
max-width:100%;
margin:0 auto;
text-align:left;
}
#mainnav{
width:18em;
max-width:23%;
float:left:
}
#content{
width:52em;
max-width:75%;
float:right;
}
……
这样的布局，在支持max-width的浏览器上，将随这字号伸缩，但绝不会超过窗口的宽度。前两种在放大到一定时会出现横向滚动条，混合式不会。
4.流体和弹性图像
选择流体或弹性布局时，如果固定图像的宽度，就会对设计产生强烈的影响——其他部分会随着屏幕的大小变化，而图像不会。这个问题有两个解决方案：
方案一：截短图像
将容器的宽度设置为100%，并且将overflow属性设置为hidden，如：
#brading{
width:100%;
overflow:hidden;
}
很多时候，我们不希望图像被截短，而是希望缩放图像，这就是方案二：
方案二：缩放图像
将图像元素添加到没有设置任何尺寸的页面上，然后设置图像的百分比宽度，并且添加于图像宽度相同的max-width以避免像素失真，例如：
.new img{
width:25%;
max-width:200px;//图像的实际尺寸，防止图像出现失真（突然想起一种方法——不用设置max-width，而是当超过实际尺寸时给图像添加透明的边框）
float:left;
padding:2%;
}
.new p{
width:68%;
float:right;
padding:2% 2% 2% 0;
}
5.faux列
上面的布局上的导航和次要内容区域都有一个浅灰色的背景，理想情况下，背景应该拉长到整个布局的高度，从而形成列的效果。但是导航和次要内容没有扩展到整个高度，所以他们的背景也不会拉长。为了创建列的效果，需要创建一个伪类。方法是在一个占据整个布局高度的元素，比如一个div容器上应用个重复背景的图像效果。
#wrapper{
background:#fff url(images/nav-ba-fixed.gif) repeat-y left top;
}
为固定布局设置faux类非常容易，为流体布局创建faux就有点复杂了，建立的技巧是使用百分数对背景图像进行定位。
