今天

任务一进行中

盒子模型，经过师兄回复，明白了div写在head里面还要在body里添加div才能显示出来。感谢师兄解惑。

已经成功制作一个黄色盒子模型了。

师兄引用了一个span，由于搞不清楚于是查了下

<span> 用于对文档中的行内元素进行组合。

<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。

<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

师兄提醒外联css样式来写盒子模型比较方便修改，于是查了下css的三种样式

从CSS样式代码插入HTML文件的形式来看可以分为三种插入形式：内联样式、嵌入样式、外部样式。

内联样式：就是将CSS样式写在HTML的开始标签中

嵌入样式：将CSS样式写在style标签之间

外部式CSS样式：就是把CSS代码写在一个单独的外部文件中，这个CSS文件以.css为后缀扩展名， 在标签内使用标签将CSS样式文件链接到HTML文件内

1. CSS样式文件名称以有意义的英文字母命名，如：index.css
2. rel="stylesheet" type="text/css" 是固定写法不可修改
3. 标签位置一般写在标签内

三种插入样式的优先级：

三种插入样式优先级从高到底为：内联式>嵌入式>外部式
其中嵌入式>外部式的条件为：嵌入式CSS的位置在外部式的后面
可以理解为：就近原则--离被设置元素越近优先级别越高

目前还没尝试外联样式，先搁置。

接下来就是制作9个黄色盒子。

第一次制作，直接九个盒子挤在一起。尝试添加float属性

搜索过程中，发现添加圆角的属性：border-radius

但是发现他们的大小数值使用是百分比

搜索了不少答案，暂时没有解决我的疑惑。

百分比的意义倒是明白了，基于父类的高/宽度计算，可以做到自适应，但是详细的还需要再看看。

通过浮动值如何把格子区分目前还是没找到答案。

开始时尝试添加了float：right/left，只改变了其中文字的左右

疑问：暂时没理解如何通过浮动值来把盒子并列或者排布。百分比如何具体设定。

明天：使用浮动解决盒子的排列问题，并且把css通过外联来写入。继续学习如何自适应制作盒子。