今天

师兄提示了解一下文档流，通过调整宽度高度改变 盒子的排列，于是搜索一番，

所谓的文档流，就好比如一块块的正方形组成的一个整体，而这些正方形就代表着每个div。

当某个div脱离了这个整体，也就代表他脱离了文档流。然后下一个div就会来填补脱离的div的位置。

因为脱离文档流的div不占据页面的空间了，所以才会留有空间给后面的div补上，当然这也导致了div2给div1覆盖了

这是我写的盒子模型为何重叠的原因了，重新把代码写一遍，直接在div里添加了浮动属性 ，现在盒子都在一排里了，

现在尝试把css储存为外联形式添加。

直接把div直接储存为css文件，文件名储存为box.css引用的时候发现没添加class也可以直接显示盒子

产生一个问题。在html里我再写一个div盒子引用是否冲突。暂时没尝试。

搜索期间，知道了引用ID具有唯一性，在style里用#开头。

大盒子嵌套小盒子通过float：left实现九宫格

先设定了一个大盒子，然后把其他盒子包裹在大盒子里，设定高，宽度为33%，那么就会把下一个盒子挤到下一排实现九宫格。

但实际操作中

我是把外边距设定为1%，这样三个就变成了102%，

检查了下代码宽度单位写错了，删了边距属性后盒子黏在一起，添加了左边距和下边距，九宫格显示出来了。

想了下其实直接加边距属性就好了，但是没有计算还剩下多少宽度，添加边距过多导致一行也是两个格子。

接下来就是自适应的学习了。首先是搜索到弹性布局属性

display:flex

但设定完子元素的float，clear和vertical-align属性将失效。

子元素设定flex：（数字）就可以确定比例。

基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

以下6个属性设置在容器上：

• • flex-direction　　容器内项目的排列方向(默认横向排列)　　
  • flex-wrap　　容器内项目换行方式
  • flex-flow　　以上两个属性的简写方式
  • justify-content　　项目在主轴上的对齐方式
  • align-items　　项目在交叉轴上如何对齐
  • align-content　　定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

属性应用有点多，暂时没有深入了解。

尝试应用到代码中，F12进行了调试，已经自适应了宽度，子元素中的float属性确实失效了。

在大盒子里添加了高度，现在高度也能自适应，产生的问题就是如何把格子再度排列为九宫格。

初步思路是需要添加flex的属性来布局，暂时搁置，留待明天。

明天：解决如何布置自适应的九宫格问题，以及下一步任务。