第十七周总结

一. 上周学习内容

1. 复习id和class的区别

1. id属性只用来唯一标识一个HTML元素的，每个元素只能有一个id，而且这个id必须是独一无二的。可以通过js或css使用id来操作或样式化特定的元素。
2. class属性是用来表示一个或多个HTML元素的，同一个class可以被多个元素使用。在css中，可以通过.class语法来匹配指定class的元素，并应用相应的样式。
3. id的优先级要高于class。
4. 在css样式表中书写时，id选择符前面应该加前缀符号‘#’，而class选择符前面应该加前缀符号‘.’。

总的来说，id主要用于表示一个唯一元素，而class则用于表示一组具有相同样式的元素。当需要对一些特定的元素进行操作或样式化时，我们会使用id，而当需要对一整组元素进行操作或样式化时，则会使用class。

2. LOGO SEO 优化

1. logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要。
2. h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可。
3. 为了搜索引擎收录，链接里面药房文字（网站名称），但是文字不要显示出来。
   • 方法1：text-indent移到盒子外面(text-indent: -9999px)，然后overflow:hidden，淘宝的做法.
   • 方法2： 直接给font-size:0;就看不到文字了，京东的做法。
4. 最后给链接一个title属性，这样鼠标放到logo上就可一看到提示文字了。

3. 常见单位

1. px：长度单位，页面按精确像素展示，1px相当于屏幕上一个像素点。
2. em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值。

例如，浏览器字体大小一般为16px，则2em=32px。

3. rem：相对单位，可理解为“root em”，相对根节点，html的字体大小来计算，css3新加属性。
4. vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
5. vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
6. vmin：vw和vh中较小的那一个。
7. vmax：vw和vh中较大的那一个。

4. flex布局和grid布局

掌握两种布局的基本属性，能够利用这两种布局实现基本的效果。

flex布局父盒子常见属性：

1. flex-direction: 设置主轴的方向
2. justify-content: 设置主轴上的子元素排列方式3.
3. flex-wrap: 设置子元素是否换行4.
4. align-content: 设置侧轴的子元素的排列方式（多行）
5. align-items:设置侧轴上的子元素排列方式（单行）
6. flex-flow:复合属性，相当于同时设置了flex-direction 和 flex-wrap

flex布局子盒子常见属性：

• flex:子项目占的份数
• align-self:控制子项自己在侧轴的排列方式
• order:属性定义子项的排列顺序(前后顺序)

grid布局容器属性：

1. grid-template-columns属性（定义列）

2. grid-template-rows属性（定义行）

3. grid-auto-flow属性（项目排序顺序）

4. grid-row-gap属性（行间距）

   grid-column-gap属性（列间距）

   grid-gap属性

5. grid-template-areas 属性

6. justify-items 属性（水平方向）

7. align-items 属性（垂直方向）

8. place-items 属性（水平与 垂直方向）

9. justify-content属性

10. align-content属性

11. place-content属性

项目属性：

1. grid-column-start属性（列开始网格线）

​ grid-column-end属性（列结束网格线）

​ grid-row-start 属性（行开始网格线）

​ grid-row-end 属性（行结束网格线）

2. grid-column 属性(列网格线）
3. grid-row 属性（行网格线）
4. justify-self 属性(水平位置)
5. align-self 属性（垂直位置）
6. place-self 属性（垂直水平位置）
7. grid-area属性

5. 其他

多媒体查询、动画、2D转换和3D转换等

二. 下周学习计划

复习上周学习内容，根据第二次考核内容再进行复习，搞懂响应式布局。

三. 生活感悟

这周的学习比起前两周明显状态要差，一方面是状态较差，另一方面是面临考试周，更多的时间花在了其他课程上的复习。明显的有时间分配不合理的情况。接下来必须要调整一下状态，把学习新东西的时间和复习时间分配合理。