CSS3布局方案使用 px和pt绝对单位进行固定布局。无论在什么设备上都保持固定的尺寸，在不适合的分辨率下可能导致大面积

前端布局分类

固定布局

使用 px和pt绝对单位进行固定布局。无论在什么设备上都保持固定的尺寸，在不适合的分辨率下可能导致大面积空白或横向滚动条，常见于古老的pc端页面。

流动 Fluid

使用 % 百分比进行相对布局。可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。某些情况下可能导致错误的伸缩或者布局被破坏。

弹性 Flastic

使用 em 或 rem 单位进行相对布局。避免了根据 px 布局在高分辨率下几乎无法辨认的缺点，又相对 % 百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。
如果使用 em 作为尺寸单位，因为 em 相对父元素 font-size 值进行计算的特性，如果中间有对元素的字体大小进行更改，子元素的全部布局就会出错。这点现在可以很方便的通过相对于根元素的 rem 单位计量来避免。

响应式 Responsive

使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，但是在同一个设备下实际还是固定的布局，并且因为浏览器的支持原因对介质的检测还不实用，对于不同的布局需要提供不同的布局方案。

自适应 Adaptive

通常使用 @media 媒体查询和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是利用响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术综合统称。自适应几乎已经成为优秀页面布局的标准。

float布局

步骤

1. 子元素上加float：left和width
2. 在父元素上加 .clearfix

代码

<style>
 .clearfix :after{
    content:'';
    diaplay:block;
    clear:both;
 }
 .logo .nav{
     float:left;
     width:100px;
     height:100px;
 }
</style>
<body>
<header class="clearfix">
    <div class="logo"></div>
    <nav class="nav"></nav>
</header>

</body>

flex 布局

让一个元素变成flex容器

.container{
    display:flex;
}

1. container的属性

改变items流动方向

css
.container{
    flex-direction:row | row-reverse | column | column-reverse;
}

改变折行

css
 .container{
     flex-wrap:wrap | no-wrap | wrap-reverse
 }

主轴对齐方式

css
.container{
    justify-content:flex-start | flex-end | center | space-between | space-around | space-evenly
}

次轴对齐

css
.container{
    align-items:stretch | flex-start | flex-end | center
}

注：align-items的值为stretch时，items项的高度不用设，直接让内容撑开即可。

2. item的属性

order

.container1{
  
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:flex-start;
}

.container1 .item{
  height:30px;
  background:gray;
  width:30px;
  boeder:1px red solid;
} 

.item:first-child{
  order:3
}

.item:nth-child(2){
  order:2
}

注：默认情况下，item的order都是0，然后根据先后顺序进行排列。

flex-grow

.container1{
  
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:flex-start;
}

.container1 .item{
  height:30px;
  background:gray;
  width:30px;
  boeder:1px red solid;
  flex-grow:1;
} 

注：使用flex-item，让剩余的空间各自一等份，如果不使用flex-grow，那么item的宽度能多窄就多窄。

flex-shrink

css
.container1{
  
  display:flex;
  flex-wrap:nowrap;
  justify-content:flex-start;
}

.container1 .item{
  height:30px;
  background:#9954;
  width:130px;
  flex-grow:1;
  border:1px solid black
} 

.item:first-child{
  flex-shrink:0
}

.item:nth-child(2){
 flex-shrink:10
}

.item:nth-child(3){
 flex-shrink:1
}

注： flex-shrink是放置在弹性布局缩放的时候控制item的变形效果的，当flex-shrink为0的时候表示放置变瘦，flex-shrink的值越大，在伸缩时的变形效果越明显。

align-self

css
.container1{
  
  display:flex;
  flex-wrap:nowrap;
  justify-content:flex-start;
}

.container1 .item{
  background:#9954;
  width:130px;
  flex-grow:1;
  border:1px solid black
} 

.item:first-child{
  height:100px
  
}

.item:nth-child(2){
 height:200px;
}

.item:nth-child(3){
 height:100px;
  align-self:flex-end;
}

注：让其中某一项特立独行，可以使用align-self进行控制