HTML & CSS Full Course - Beginner to Pro (2022) | notes

非常不错的html，css零基础教程。视频链接

1. 不透明度，opacity: [0 ~ 1];

2. :hover :active

3. 过度时间设置，transition: [key] [time(example: 1s) 常用：0.15s], ... ;

4. 阴影，box-shadow: [inset，可选表示内部] [] [] [] [常用：0.15s];

5. 默认对齐：按照文字。顶部对齐，vertical-align: top;

6. 行高，line-height: ;

7. html enetity, such as: middle dot

8. text element, modify style in p tag, such as strong, u, span

9. img tag: object-fit, object-position

10. display property:

    block element
    inline-block element
    inline element

11. 垂直水平布局，google drawings

12. value为多个值，优先选择前面的

13. inline-block有对齐的问题，因为回车空格这种东西会映射为空格，导致像素全加起来等于父div时会出现不在同一行的问题。

    display: grid;
    grid-template-colums: 100px 100px 1fr;  /* fr: free space */
    column-gap: ;
    row-gap: ;

    可以用于缩略图的场景

14. flexbox类似grid，但是更灵活。 diffrence: grid中上面定义的宽度更管用，而flex中取决于各个div自己定义的。当一个水平布局中有的时候有四个div，有的时候有三个div时，例如登录状态和未登录状态，这个时候使用flex比grid更好，为什么呢？

    display: flex;
    flex-direction: row;  /* 水平方向，默认就是水平方向 */
    justify-content: start/end/center/space-between;  /* 水平方向：开头、结尾、居中、均匀分布 */
    align-items: stretch/start/center  /* 垂直方向 */
    	
    flex: 1;  /* 类似grid中的1fr */
    max-width: ;

    max-width 配合 justify-content

15. flex只会影响这一层和下一层

16. .class-name::placeholder

17. margin-left: -1px;

18. 防止页面伸缩拉伸时，flex的div也跟着伸缩，flex-shrink: 0; 相反的设置，width: 0;

19. CSS position:

    position: static(default);

    position: fixed; navbar最好的方式在body内加padding

    position: absolute; 与fixed的区别是，这个是在page，而fixed是在window 其他元素可能会跑到navbar上面，使用z-index，比如将navbar中z-index设置为1，相当于设置层数，数字大表示在上层。

    position: relative; 可以用于红点，将absolute放到relative中，这样absolute就会固定在page中而是，在relative中。

20. lesson 16 最后：自己实现一个tooltip