一、CSS布局

（一）布局是什么

布局就是把页面分成一块一块，按左中右、上中下等排列。

（二）布局的分类

1.第一种：固定宽度布局

一般宽度为960/1000/1024px。多为pc端使用

2.第二种：不固定宽度布局

主要靠文档流的原理来布局。多为移动端使用。

３.第三种：响应式布局

在pc上固定宽度，手机上不固定宽度。

（三）布局的两种思路

1.从大到小（老手）

先定下大局
然后完善每个部分的小布局

2.从小到大（新手推荐）

先完成小布局
然后组合成大布局

（四）布局方式的选择

float布局
flex布局
grid布局

二、float布局

（一）步骤

给子元素加上float:left or right和width
给父元素加上class="clearfix"和

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

##理解：子元素脱离了文档流，只有对父元素做以上操作才可以把子元素“收回”

（二）示例

代码

（三）经验

最后一个子元素不要写width或者只设置最大宽度max-width
这个float布局不用做响应式，因为float布局是专门为IE准备的，而手机上没有IE啊
在IE中给float元素（也就是加了float的子元素）加上左边的外边距margin-left: 10px，最后渲染出的左外边距会双倍出现(20px)！解决方法为：

将错就错，再加一个_margin-left: 5px
再加一个dispaly: inline-block

（四）实战

两栏布局：如顶部条
三栏布局：如内容区
四栏布局：如导航
平均布局：如产品展示区

我的实战代码 （详细步骤看自己的笔记）

（五）感想

学会了这些，再加上头尾，即可满足所有PC页面的需求。
float要程序员自己计算宽度，很不灵活。
float用来应付IE足以。
Chrome支持IE的所有功能，所以我们刚才在Chrome上写代码，在IE上照样可以渲染。（不懂，以后再来看）

三、Flex布局

（一）container和item

container是容器，相当于父元素。他里面的直接的子元素叫做item。

（二）flex container的样式

1、让一个元素变成container：在父元素上加上

.container{   
dispaly:flex;
/*快捷键d:f再按Tab*/
/*这是会另起一行的弹性盒*/
}

或者

.container{
dispaly:inline-flex;
/*这是行内的弹性盒*/
}

2、改变items的流动方向（即主轴）`flex-direction`

flex-direction这个CSS属性定义了元素在容器里摆放的方向，并且接受这些值：

row（默认）: 从左到右，元素摆放的方向和文字方向一致。
row-reverse: 从右到左，元素摆放的方向和文字方向相反。
column: 元素从上放到下。
column-reverse: 元素从下放到上。

3、改变折行`flex-wrap`

nowrap（默认）：不折行，当增加item时会一直在这一行增加，甚至会把item挤压变形
wrap：折行，当增加item时会，如果这一行最后的空间放不下这个item，就会另起一行增加这个item
wrap-reverse：元素自动换成逆序的多行。具体自己去试试便知，此处不好叙述。

注：flex-direction和flex-wrap两个属性经常会一起使用，所以有缩写属性flex-flow。这个缩写属性接受两个属性的值，两个值中间以空格隔开

4、主轴对齐方式`justify-content`

也就是当一行中没有被items塞满，宽度有多余，那么多余的空间该怎么排列? justify-content这个属性可以水平对齐元素，并且接受以下几个参数：

flex-start(默认): 元素和容器的左端对齐。
flex-end: 元素和容器的右端对齐。
center: 元素在容器里居中。
space-between:元素之间保持相等的距离。
space-around:元素周围保持相等的距离。

5、次轴对齐方式

默认次轴是纵轴。 align-items这个CSS属性纵向对齐元素并且可选以下几个值：

flex-start: 元素与容器的顶部对齐。
flex-end: 元素与容器的底部对齐。
center: 元素纵向居中。
baseline: 元素在容器的基线位置显示。
stretch（默认）: 元素被拉伸以填满整个容器。

6、多行内容的分布`align-content`

当高度有多余，多余的高度空间该怎么分布？align-content来决定行与行之间隔多远。这个属性接受这些值：

flex-start: 多行都集中在顶部。
flex-end: 多行都集中在底部。
center: 多行居中。
space-between: 行与行之间保持相等距离。
space-around: 每行的周围保持相等距离。
stretch: 每一行都被拉伸以填满容器。

注：align-content决定行之间的间隔，而align-items决定元素整体在容器的什么位置。只有一行的时候align-content没有任何效果。

（三）flex item的样式

1、选择器

.item:first-child{
    /*第一个item*/
}
.item:nth-child(2){
    /*第二个item*/
}
.item:nth-child(3){
    /*第三个item*/
}
.item:last-child{
    /*最后一个item*/
}

2、order

默认是0，当给item里加上order: [数字];,item就会按这些数字从小到大排列。

3、flex-grow

不给出每个item的width，那么宽度变宽了，那一行中的每个item如何分配宽度？

根据每个item里flex-grow的数值，按照比例分配宽度进行膨胀。数值越大，宽度越宽。
不给flex-grow(也是flex-grow: 0;),给定了width就是那个宽度，没给定width就是能有多窄有多窄。

一个小经验：写一个顶部条，里面有三个item，第一个是logo，第二个是导航，第三个是头像，一般第一个和第三个item不给flex-grow，第二个item给flex-grow: 1;

4、flex-shrink

每个item给定了width，并且可以在一行中放下。但是当我们把页面宽度变窄，按照给定的width根本在一行放不下时（前提是不折行nowrap），每个item会如何压缩？

根据每个item里flex-shrink的数值，按照比例进行压缩。数值越大，被压缩的越多。
flex-shrink: 0;：不会被压缩
flex-shrink: 1;：默认，每个item同等程度的被压缩

4、flex-basis控制基准宽度

相当于width

5、align-self定制align-items

次轴对齐方式用align-items来设置，这个是设置所有item的。如果有一个特立独行的item想自己设置自己的次轴对齐方式，可以用align-self来设置

（四）实战

两栏布局：如顶部条
三栏布局：如内容区
四栏布局：如导航
平均布局：如产品展示区

我的实战代码

（详细步骤看自己的笔记）

（五）经验

永远不要把width和height写死（比如width：100px;），除非特殊说明。

推荐写法：不使用px或者加min-和max-

width：50%;
width：30vw;
max-width：100px;
max-width：80%;

用min-width和max-width和min-height和max-width。
flex基本可以满足所有需求
flex与margin-xxx：auto搭配有意外的效果

前端的底线--没有设计稿绝对不写代码，否则就甩锅！

四、Grid布局

功能最强大的布局方案，但是兼容性不太好，所以未来一两年内可能不会发展起来。

Flxe适合一维布局，一上来就让你确定主轴是横轴还是竖轴。

Grid适合二维布局，横轴竖轴一起上。适合不规则布局，像衣柜的那种。

（一）container和item

container是容器，相当于父元素。他里面的直接的子元素叫做item。

（二）Grid container的样式

1、让一个元素变成container：在父元素上加上

.container{   
dispaly:grid;
/*快捷键d:g再按Tab*/
/*这是会另起一行的弹性盒*/
}

或者

.container{
dispaly:inline-grid;
/*这是行内的弹性盒*/
}

2、把布局设置成一个的表格，用`grid-template-columns`和`grid-template-rows`指定每列的宽度和每行的高度即可

2、把布局设置成一个的表格，我们用`grid-template-columns`和`grid-template-rows`指定每列和每行的比例即可。用fr（free space）来表示一份。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 2fr;
  }

效果图如下

适合来做平均布局！grid gap用来设置间隔，特别好用，一步搞定。

3、`grid-template-areas`指定哪块写什么元素，与`grid-template-columns`和`grid-template-rows`配合使用。

我写的例子如下：

4、我们可以给每根线取名

这样item就可以利用名字来设置自己的范围，占哪几个连续的格子。

.item-a{
  grid-column-start: first;
  grid-column-end: line3;
  grid-row-start: row1-start;
  grid-row-end: row1-end;
}
/*这样这个.item-a就占了A11和A12两格*/

5、空隙`grid-gap`

grid-gap:行与行，列与列

grid-column-gap：列与列

grid-row-gap：行与行

（三）实战

模仿淘宝

实战代码

【CSS基础】CSS布局

一、CSS布局

（一）布局是什么

（二）布局的分类

1.第一种：固定宽度布局

2.第二种：不固定宽度布局

３.第三种：响应式布局

（三）布局的两种思路

1.从大到小（老手）

2.从小到大（新手推荐）

（四）布局方式的选择

二、float布局

（一）步骤

（二）示例

（三）经验

（四）实战

（五）感想

三、Flex布局

（一）container和item

（二）flex container的样式

1、让一个元素变成container：在父元素上加上

2、改变items的流动方向（即主轴）flex-direction

3、改变折行flex-wrap

4、主轴对齐方式justify-content

5、次轴对齐方式

6、多行内容的分布align-content

（三）flex item的样式

1、选择器

2、order

3、flex-grow

4、flex-shrink

4、flex-basis控制基准宽度

5、align-self定制align-items

（四）实战

（五）经验

前端的底线--没有设计稿绝对不写代码，否则就甩锅！

四、Grid布局

（一）container和item

（二）Grid container的样式

1、让一个元素变成container：在父元素上加上

2、把布局设置成一个的表格，用grid-template-columns和grid-template-rows指定每列的宽度和每行的高度即可

2、把布局设置成一个的表格，我们用grid-template-columns和grid-template-rows指定每列和每行的比例即可。用fr（free space）来表示一份。

3、grid-template-areas指定哪块写什么元素，与grid-template-columns和grid-template-rows配合使用。

4、我们可以给每根线取名

5、空隙grid-gap

（三）实战

2、改变items的流动方向（即主轴）`flex-direction`

3、改变折行`flex-wrap`

4、主轴对齐方式`justify-content`

6、多行内容的分布`align-content`

2、把布局设置成一个的表格，用`grid-template-columns`和`grid-template-rows`指定每列的宽度和每行的高度即可

2、把布局设置成一个的表格，我们用`grid-template-columns`和`grid-template-rows`指定每列和每行的比例即可。用fr（free space）来表示一份。

3、`grid-template-areas`指定哪块写什么元素，与`grid-template-columns`和`grid-template-rows`配合使用。

5、空隙`grid-gap`