CSS布局

布局分类

• 两种

1. 固定宽度布局，一般宽度为 960 / 1000 / 1024 px
2. 不固定宽度布局，主要靠文档流的原理来布局（手机端用的比较多）

• 还记得吗

文档流本来就是自适应的，不需要加额外的样式

• 第三种布局

1. 响应式布局

2. 意思就是PC上固定宽度，手机上不固定宽度

3. 也就是一种混合布局

布局的两种思路

• 从大到小

先定下大局

然后完善每个部分的小布局

• 从小到大

先完成小布局

然后组合成大布局

• 两种均可

新人推荐用第二种，因为小的简单

老手一般用第一种，因为熟练有大局观

float 布局

• 步骤

子元素上加 float: left 和 width

在父元素上加 .clearfix（清除浮动，记住）

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

• 经验 有经验者会留一些空间或者最后一个不设 width

不需要做响应式，因为手机上没有 IE，而这个布局是专门为 IE 准备的

IE 6/7 存在双倍 margin bug，解决办法有两个

一是将错就错，针对 IE 6/7 把 margin 减半(-margin-top:5px;)

二是神来一笔，再加一个 display: inline-block

为什么可以这样？你问我，我问谁……

用border调试法可能会影响宽度可以改为：outline

flex布局

• flex container 有哪些样式?

.container{ display: flex; /* or inline-flex */ }

• 改变items 流动方向（主轴）

.container{ flex-direction:row(从左往右） | row-reverse（从右往左） | column（从上往下） | column-reverse（从下往上）;

• 改变折行

.container{ flex-wrap:nowrap | wrap(折行） | wrap-reverse（往上折行）;

• 主轴对齐方式

默认主轴是横轴 除非你改变了flex-direction 方向 .container{ justify-content:flex-start(内容往前）| flex-end（往后）| ；}

• 次轴对齐

默认次轴是纵轴

` .container{ align-item: stretch | flex-start }

flex布局下

• item上面加oeder可以改变顺序

• item 上面加 flex-grow 控制自己如何长胖

• flex-shrink 控制如何变瘦

一般写flex-shrink：0 防止变瘦，默认是1

重点

• 记住这些代码

1. display: flex
2. flex-direction: row / column
3. flex-wrap: wrap
4. justify-content: center / space-between 5.align-items: center

工作中基本只用这些