可以使用浮动或flex布局

第一步：先把色块调出来，标签基本样式清空

使用一个div标签

第二步：准备好4个小图片，教你两种CSS布局方法来实现

由于这个是四个图片占满父元素，所以直接设置display: flex;即可。更多关于flex弹性盒子的介绍，请看文末讲解。

flex弹性盒子:主要目的===修改子元素的排列方式问题

默认的父元素里面有子元素=====子元素（若行内元素）是（变成）块级元素====子元素竖着

触发完弹性盒子之后,修改子元素的排列方向;===谁触发:父元素触发===只会影响子元素

1)如何触发弹性盒子

给父元素添加display属性

并且取值为flex

与浮动没有关系===效果一样,并没有触发浮动

2)触发完弹性盒子之后,

到底有哪些特点:

a)会让子元素水平排列

b)会让子元素变成块级元素

c)如果弹性盒子之后,子元素只有一个,给子元素添加margin:auto;自动实现水平垂直居中

3)基础概念:

1)容器====父元素

2)项目====子元素

3)横轴====x轴,水平轴

4)纵轴====y轴,垂直轴

5)主轴====触发弹性盒子之后,子元素的默认的排列方式;(默认情况下:主轴在横向)

6)侧轴====与主轴的对立的方向,就称之为侧轴

弹性盒子中对应的属性有哪些:

a)触发弹性盒子,

就是让子元素横向显示

display:flex;

默认主轴在:横向;侧轴在纵向

b)修改主轴方向

flex-direction:

row====横向==默认值(*)

column==纵向(*)

row-reverse==主轴在横向,但是子元素是反方向排列的

column-reverse==主轴在纵向,也是子元素是反方向排列的

c)调整主轴上面的对其方式

justify-content:

flex-start===主轴的开始位置(元素没有分开)

flex-end=====主轴的结束位置(元素没有分开)

center=======主轴的居中位置(元素没有分开)

space-between=主轴两端对齐(间距自动分开)(*)

space-around==主轴两端环绕(元素与元素之间距离是贴边元素与父元素之间距离的2倍)(*)

d)调整侧轴上面的对齐方式

align-items:

flex-start====侧轴的开始位置(*)

flex-end======侧轴的结束位置

center========侧轴的居中位置

stretch=======拉伸效果==子元素没有高度的话,则高度默认占所有高度

baseline======基线对齐===与flex-start效果一直;实际开发法不用

e)折行属性

默认触发弹性盒子之后,子元素过多,子元素永远默认不会折行,而且会产生挤压效果

把原有的宽度,挤没了

flex-wrap:wrap wrap-reverse nowrap

折行之后,如果子元素有高度的话,会形成间距,间距默认就是均分

flex-flow: row wrap flex-direction and flex-wrap

f)调整行间距==只有折行之后才会产生这个效果，折行之后flex=1无效，并且要用百分数来设置宽

align-content:

flex-start==侧轴的开始位置(都没有行间距了===就是相邻两行之间的缝隙，消除缝隙)(*)

flex-end====侧轴的结束位置(都没有行间距了)

center======侧轴的居中位置(都没有行间距了)

space-between==侧轴两端对齐(贴边显示)

space-around===侧轴两端环绕(行与行之间的间距是贴边行到父元素之间的2倍)

只是为了调整子元素的位置,效果等等

a)调整顺序

12345 54321

把任意的一个子元素放在后面或者是前面

order:数值

数值越大越靠后面;可以取值为正数,可以取值为负数,默认值为auto可以理解成是0

b)调整子元素侧轴上面的单独对齐方式

align-self

flex-start

flex-end

center

stretch //当子级有高度时，他无效。当子级不设置高度时，或者设为auto，就会出现拉伸，不设置stretch也会拉伸

baseline /* 基线效果与flex-start效果一致,但是实际开发的时候几乎不用 */

c)不挤压不折行

默认情况下:子元素过多的时候,不会折行,默认情况就是被挤压了

flex-shrink:0/1

d)占剩余空间的所有，所有的宽,所有的高度

flex:1

主轴在横向:flex:1代表的是占剩余宽度的所有

如果所有的子元素都添加flex:1的话; 则宽度均分

主轴在纵向:flex:1代表的是占剩余高度的所有

如果所有的子元素都添加flex:1的话, 则高度均分