精通CSS高级Web标准解决方案读书笔记-08布局

css布局技术的根本都是3个基本概念：定位，浮动和外边距操纵。

1. 使用外边距让设计居中

body{
 text-align:center;
}
.wrapper{
  width:920px;
  margin:0 auto;
}

 

 
 

2. 基本浮动的布局

2.1两列的浮动布局

body {
  text-align: center; 
  min-width: 960px;
}

.wrapper {
  width: 920px; 
  margin: 0 auto; 
  text-align: left;
}

.content {
    overflow: hidden;
}

.content .primary { 
  width: 650px;
    padding-right: 20px;
  float: right;
  display:inline;
}

.content .secondary { 
  width: 230px;
  float: left; 
  display:inline;
} 



 

 
 

 

 

一个向左浮动，一个向右浮动。利用overflow:hidden清楚浮动。display:inline避免ie的双外边距浮动产生的bug（详细见第九章），用padding建立视觉隔离带，避免在不符合标准的浏览器中将浮动元素下移。
我没有把创建的两个元素命名为primary-content和secondary-content，而是简单的称为primary和secondary。这两个元素嵌套在content元素中，可以创建关联，这样有两个好处。首先不必为每个元素创建新的类名，而应使用层叠找到元素，更重要的是可以多次使用primary和secondary类，这会创建非常灵活的命名系统

2.2三列的浮动布局

body {
  text-align: center; 
  min-width: 960px;
}

.wrapper {
  width: 920px; 
  margin: 0 auto; 
  text-align: left;
}

.content {
    overflow: hidden;
}

.content .primary { 
  width: 670px;
  float: right;
}

.content .secondary { 
  width: 230px;
  float: left; 
} 


.content .primary .primary {
    width: 400px;
    float: left;
}

.content .primary .secondary {
    width: 230px;
    padding-right: 20px;
    float: right;
}


 

 

  

 
 

 

注意将padding-right放在了.content.primary.secondary。

3.固定宽度，流式和弹性布局

固定布局：宽度以像素为单位
流式布局：宽度以百分比为单位，添加min-width避免布局宽度太小，添加max-width避免布局宽度太大不便于阅读。

Branding
 







Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.

Ea commodo consequat
Ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.





Magna aliquam erat volutpat
Magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.





 
Home
 
About
 
News
 
Products
 
Services
 
Clients
 
Case Studies
 



Promo item goes here







Footer

4.流式和弹性图像

对于
跨越大区域的图像像页眉处，可以考虑用背景图像

#branding{
 height:171px;
 background:url(/branding.png) no-repeatt left top;
}

或者

#branding{
 width:100%;
 overflow:hidden;
}

对于常规内容图像，可以设置图像百分比宽度，并添加max-width以免图像失真。
.new img{
width:25%;
max-width:200px;
float:left;
display:inline;
padding:2%;
}
.new p{
width:68%;
float:right;
display:inline;
padding:2% 2% 2% 0;
}

5.高度相等的列

.box {
    padding-bottom: 220px;
    margin-bottom: -200px;
    background: #89ac10 url(img/top.gif) no-repeat left top;
}

总结
学习了固定宽度的布局
学习了流式布局，
学习了流式图像
学习了高度相等的列。