“小白的我”第九天日报

今天完成的事情：

1.做完了任务5，并成功通过审核；

2.学习并使用position定位的正确方法；

3.学习了以前不熟悉的知识点：伪类和伪元素，flex布局和font属性的简写顺序。

明天计划的事情：

1.学习任务6所需要的知识点，并尝试动手做任务6；

遇到的问题：

1.ul占的高度比设置的高度要大一点；

2.使用position太过频繁，不清楚什么时候该用，什么时候可以不用；

3.切图后，使用的图片有大片空白；

4.设置的浏览器字符为font=62.5%有时候没有生效；

5.重新设置的font=625%有时候也没有生效。

解答方案：

1.经过自己仔细检查，发现ul的默认margin是12px，需要自己设置margin的大小；

2.position常用的有三种，relative、absolute和fixed，基本用法为父相子绝。我对定位的理解为：

    1.relative是指元素表现偏离其正常位置，但是元素本身仍处于原本的位置，只是投影在position的位置；            2.absolute用在父元素为相对定位和固定定位的子元素；

    3.fixed用在固定定位。

3.经过陈师兄指点，保存图片为png格式后完美解决了留白问题；

4.浏览器的最小识别字符大小为12px，所以要设置font-size大于等于12px；

5.font-size=625%时有时候会失效，原因未曾找到，但是找到了两个解决方案，一个是设置font-size为initial，另一个是设置display为block。

收获：

1.学会了伪元素和伪类的区别：

伪类与伪元素的特性及其区别：

1. 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
2. 伪元素本质上是创建了一个有内容的虚拟容器；
3. CSS3中伪类和伪元素的语法不同；
4. 可以同时使用多个伪类，而只能同时使用一个伪元素；

2.学会了flex布局：

① 给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式；

② 容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流；

③ display:flex; 容器添加弹性布局后，显示为块级元素；

display:inline-flex; 容器添加弹性布局后，显示为行级元素；

④ 设为 Flex布局后，子元素的float、clear和vertical-align属性将失效。但是position属性，依然生效。

目前我主要是使用父容器，所以只列下父容器的六大属性，项目的6大属性暂时不列出来：

作为父容器的6大属性

① flex-direction属性决定主轴的方向（即项目的排列方向）。

② flex-wrap属性定义，如果一条轴线排不下，如何换行。

③ flex-flow 是flex-direction和flex-wrap的缩写形式，默认值为：flex-flow: row wrap; 不做过多解释

④ justify-content属性定义了项目在主轴上的对齐方式。

⑤ align-items属性定义项目在交叉轴上如何对齐。

⑥ align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

3.font-size的简写顺序：

• font-style （使用斜体、倾斜或正常字体）
  
• font-variant （设置小型大写字母的字体显示文本）
  
• font-weight （设置文本的粗细）
  
• font-size/line-height （设置字体的尺寸和行高）
  
• font-family （规定元素的字体系列）