CSS 页面布局 Note-FrontEnd-4CSS 页面布局的一些知识，包括布局分类、布局思路、float布局、fl

CSS 页面布局的一些知识，包括布局分类、布局思路、float布局、flex布局、grid布局、重点。

一、布局分类

布局主要分成三类：

固定宽度布局 -- 一般宽度为 960 / 1000 / 1024 px
不固定宽度布局 -- 主要靠文档流的原理来布局，一般在手机上用
响应式布局 -- 意思就是 PC 上固定宽度，手机上不固定宽度，也就是一种混合布局

二、布局思路

从大到小 -- 先定下大局，然后完善每个部分的小布局
从小到大 -- 先完成小布局，然后组合成大布局

需要兼容 IE 9吗？
	yes → 使用 float 布局
		左浮两个，固定宽度，不要响应式
			给父元素添加 clearfix！！！
	no → 只兼容最新浏览器吗？
		yes → 用 grid 布局
		no → 用 flex 布局
必要时候采用 负margin

三、float 布局

子元素加 float: left 和 width
在父元素加 .clearfix

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

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

用 float 做两栏布局（如顶部条）-- 左浮、右浮、clearfix
用 float 做三栏布局（如内容区）-- 左浮，左浮，左浮，clearfix

推荐使用以下方式做上下居中，因为这就不会改变上下的 margin

margin-left: 0 auto;
margin-right: 0 auto;

用 float 做四栏布局（如导航）-- 左浮，左浮，左浮，clearfix
用 float 做平均布局（如产品展示）-- 左浮，左浮，左浮，clearfix，此外还要再加一层，这一层里有一个负 margin

margin: 负数，这个不要理解为移动，理解为把宽度偷偷变宽，不告诉它爸爸

四、flex 布局

1. flex container 的样式

让一个元素变成 flex 容器

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

改变 items 流动方向（主轴）

flex-direction: row; -- 所有 div 从左往右一字排开（默认）
flex-direction: row-reverse; -- 所有 div 从右往左一字排开
flex-direction: column; -- 所有 div 从上往下一字排开
flex-direction: column-reverse; -- 所有 div 从下往上一字排开

改变折行

 flex-wrap: nowrap; -- 不折行（默认）
 flex-wrap: wrap; -- 折行
 flex-wrap: wrap-reverse; -- 一般不用的

主轴对齐方式

.container{
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
  左靠（默认）、右靠、居中、把空间放在中间、把空间放在中间和两边、四个空隙是一样的（别理它）
}

次轴对齐

.container{
  align-items: flex-start | flex-end | center | stretch | baseline;
}
上靠、下靠、居中、一样高（默认）、最后一个别理它

多行内容

.container{
  align-content: flex-start | flex-end | center | stretch | space-between | space-around
}
跟主轴对齐方式类似

2. flex item 的属性

order 控制位置
flex-grow 控制如何变胖
flex-shrink 控制如何变瘦
flex-basis 控制基准宽度
align-self 定制 align-items

五、grid 布局

成为 container

.container{
    display: grid | inline-grid;
}

行和列

.container{
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

还有很多实践内容，grid 的概念理解很重要，上手就容易了，在此列举的内容不多。

六、重点

display: flex
flex-direction: row / column
flex-wrap: wrap
just-content: center / space-between
aligh-items: center