本文共 3404 字，大约阅读时间需要 11 分钟。

CSS布局

1 布局是什么？ -把页面分成一块一块，按左中右、上中下等排列。

2 布局分类

• 两种布局
  固定宽度布局：一般宽度为 960、1000、1024px
  不固定宽度布局：手机上使用，主要靠文档流的原理来布局。（文档流本来就是自适应的，不需要添加额外的东西就会根据页面大小进行排列，注意不要设置宽度。）
• 第三种布局：响应式布局
  PC上固定宽度，手机上不固定宽度，也就是一种混合布局。

3 布局的两种思路

• 从大到小：先做大框架，再完成小布局
• 从小到大：先完成小布局，组合成大布局

4 用什么布局

不兼容IE9则意思为只兼容手机端。

Float布局

1.步骤

• 子元素上加 float: left 和 width
• 在父元素上加 .clearfix
  注意：由于在div上加了float，因此两个元素已经脱离文档流，而block元素的高度是由内部的文档流元素决定，因此要加上clearfix后head才能包裹住里面的浮动元素

2.负margin(平均布局时使用)

在平均布局时加上margin-left最后一个会对不齐

1. 做平均布局时只需要在中间加一个x图层
2. 其中图层x的margin-right为负数，值为每一个y值（间距）。

.imagelist>.x{     margin-right: -12px;/*x原本的宽度为800px，在右边加上一个-12px就是812的宽度*/}

2.注意事项：

• 一般最后一个div不设定宽度，可以根据页面总长设定一个最大值。
• 调试时border-box的border会占位置，改为outline就不占空间
• float布局不需要做响应式，这个布局是专门为IE做的。
• IE6/7存在双倍的margin bug，解决办法有两个
  一、针对IE6/7把margin减半_margin-left: 5px;
  二、加上：display: inline-block

3.案例

顶部条：

   
      
    
     logo
    
  
    
      
    
     用户名
    
   

*{   margin:0;padding:0; box-sizing: border-box;}/*先reset一下*/.clearfix:after{     content:'';  display: block;  clear:both;}.logo{     border: 1px solid red;  height: 40px;  width: 100px;  float: left;/*脱离文档流，两个块级元素靠拢到一排*/  margin-top: 5px;/*让LOGO和导航居中对齐*/  margin-left: 10px;  display: inline-block;/*其他浏览器会跳过，只有IE6/7认识*/}nav{     border: 1px solid green;  width:100px;  height: 50px;  float: left;/*脱离文档流，两个块级元素靠拢到一排*/}.user{     border: 1px solid blue;  height: 50px;  float: left;  max-width: 100px;/*限定最大宽度，不会超过页面即可*/}header{       border: 1px solid black;}

导航栏：

  
   
    
    
      
         
    
    
    
      
           
     
首页
      
     
课程
      
     
优惠
      
     
关于
    
    
  
   

*{   margin:0;padding:0;box-sizing: border-box;}ul,ol{     list-style:none;/*将list前面的小圆点去掉*/}img{     max-width: 100%;/*图片最大宽度不能超过这一行*/}.logo{     background: grey;  display: inline-block;  float: left;  margin-top: 8px;/*根据图片高度和文字行高计算出来对齐的高度*/  margin-left: 10px;/*图片距离做左边距*/}.logo > img{     height: 26px;/*LOGO里面的img设定高度，高度在对齐的时候比较好计算*/  vertical-align: top;/*如果图片下面由多余的东西则用该行代码*/}.clearfix::after{     content:'';  display: block;  clear:both;}.nav{     float: left;}ul > li{     float:left;/*竖列变成行，脱离文档流*/  padding: 4px 0.5em;/*1em等于当前字体的大小，高度必须确定数值*/  line-height: 32px;/*设置行高方便对齐*/}ul{     display: inline-block;/*宽度为内部元素的宽度*/  margin-left: 10px;/*调整文字与图片的距离*/}header{     background: grey;  color: white;/*header里面所有字体变成白色*/}

主要内容区

.content{     outline:1px solid red;/*outline不占空间，border占空间 ，border-box会算在里面*/  width: 800px;  margin-left: auto;  margin-right: auto;  /*让页面居中，这两句更好，因为没有覆盖上下的margin*/}.content>aside{     width: 190px;  background: #999;  height: 300px;  float: left;}.content>main{     width: 500px;  background: #ccc;  height: 300px;  float: left;}.content> .ad{     width: 110px;  background: #000;  height: 300px;  float: left;}/*完成后要将border删掉，不然在border-box中会占据位置*/

平均布局：

要注意float元素边缘不会合并，因此当格子超过一行时，中间的间距会变成两倍，解决办法是将margin-top删掉，变成单个margin-bottom，最上方的边距放到外面imagelist去

.imagelist{     outline: 1px solid red;  width: 800px;  margin-left: auto;  margin-right: auto;/*位置居中*/  margin-top:10px;}.imagelist>.x>.image{   /*要注意父子级关系*/  width: 191px;  height: 191px;  background: #777;  float: left;  margin-top: 10px;  margin-right: 12px;}.imagelist>.x{     margin-right: -12px;/*x原本的宽度为800px，在右边加上一个-12px就是812的宽度*/}

转载地址：http://pfvi.baihongyu.com/