CSS布局

CSS入门（3）

CSS的常见布局

CSS常见布局使用display属性（文档流）+position属性（定位）+float属性（浮动）。

• inline-block
  display:inline-block属性既可以像行级元素一样水平分布，也可以像块级元素一样设置宽高，如果空间够就可以实现左右布局。
• float（应用较广）
  给要并排的子元素加上style=float:left(或right)，他们的父元素添加class:clearfix，即可脱离文档流，实现排排坐。clearfix的css为：

.clearfix::after {
 content=" ";
 display:block;
 clear:both;
}

• flex（不能兼容ie）
  flex是一种新的布局方式
  a. flex布局与方向无关
  b. 可实现空间的自动分配、自动对齐
  c. 用于简单的线性布局，复杂的可用grid布局（后面再学）

1. 左右布局

• float百分比布局

    

      
左边
      
右边
    

  .clearfix::after {
    content:' ';
    display:block;
    clear:both;
  }
  .left {
    float:left;
    height:200px;
    width:2%;
    background: red;
  }
  .right {
    float:left;
    height:200px;
    width:8%;
    background: blue;
  }

注：用于布局的div中不要添加其他margin、padding等，需要的话在里面再加元素。

• flex布局

    .content {
      display:flex;
    }
    .left {
      float:left;
      height:200px;
      width:100px;
      background: red;
    }
    .right {
      float:left;
      height:200px;
      background: blue;
      flex-grow:1;
    }

2. 左中右布局

• 圣杯布局

  
中间
  
左边
  
右边

  .content {
    margin-left: 120px;
    margin-right: 170px;
  }
  .middle {
    height:200px;
    width:100%;
    background:yellow;
    float:left;
  }
  .left {
    height:200px;
    width:100px;
    background:red;
    float:left;
    margin-left:-100%;
    position:relative;
    left:-120px;

  }
  .right {
    height:200px;
    width:150px;
    background:blue;
    float:left;
    margin-left:-150px;
    position:relative;
    right:-170px;
  }

• flex布局

    .content {
      display:flex;
    }
    .middle {
      height:200px;
      background:yellow;
      flex-grow:1;
      margin:0 10px;
    }
    .left {
      height:200px;
      width:100px;
      background:red;
      
    }
    .right {
      height:200px;
      width:150px;
      background:blue;
    }

3. 水平居中：

• div的左右margin为auto
• 内联元素的父元素加上text-align:center;

4. 垂直居中：单行元素line-height跟height相等就垂直居中
   line-height+padding
5. flex的完美居中

display:flex;
justify-content:center;
align-items:center;

6. 小Tips

• 如果是ie6加上.clearfix{zomm:1;}。
• 儿子的宽度建议使用百分比，比较有弹性，不要写死宽度，width:calc（25%-8px）。
• 做平均布局时，空间不够可以加一个空的div，左右margin为负数。
• class尽量不要用ad，会被屏蔽掉。

7. 在作业过程中用到的一些效果元素

示例1

• 鼠标移上去0.2秒过渡出现阴影效果

div ｛
 transition：box-shadow 0.2s；
}
div：hover ｛
 box-shadow：0px 4px 17px 0px rgba(100, 100, 100, 0.3);
}

注：阴影的样式可以在box-shadow generator中设置、预览后再复制过来。

示例2

• 鼠标移上去变小手 cursor:pionter;

示例3

• 列表奇数左浮，偶数右浮，形成有间隙的两列

/*父元素ol已经设置class="clerarfix"*/
.skills ol li {
 float: left;
 width: 48%;
}
.skills ol li:nth-child(even) {
 float: right;
}

示例4

• 让padding,margin,border都包含在width里，可使用box-sizing：border-box; 。