慕课链接:https://coding.imooc.com/class/chapter/164.html
暑假第一步:因为好久没弄前端的东西了,先系统温故下知识,别说还真有新收获

基础知识

设配移动端的第一步:

在header里面加上**“viewport”**

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML 相关需要关注的点

image-20220712234549562
1
2
3
4
<button type="button">普通按钮</button>
<button type="submit">提交按钮一</button>
<input type="submit" value="提交按钮二"/>
<button type="reset">重置按钮</button>

HTML版本迭代

新的HTML5的新增语法:http://h5o.github.io/ 可以像看大纲一样看

image-20220712235818022

验证网站:https://validator.w3.org/check

1
2
3
4
5
6
7
8
9
10
11
<!--在XML中-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!--在HTML5中-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

HTML分类

会不会独占一行:块级 block — inline-block — 行内 inline

image-20220713001258558

HTML嵌套关系

  1. 块级元素可以包含行内元素的

  2. 块级元素不一定能包含行内元素的

  3. “行内元素一般不能包含块级元素” <a>可以包含块级元素

  4. 引入CSS Reset 来重置浏览器带来的样式

    1. https://meyerweb.com/eric/tools/css/reset/

    2. https://clarle.github.io/yui3/yui/docs/cssreset/

    3. <style>
          *{
             margin:0;
             padding:0;
           }
      </style>
      
    4. https://necolas.github.io/normalize.css/

CSS布局

选择器的分类

image-20220716104004182

选择器权重

累加是不进位的

image-20220716104540664 image-20220716104934422

字体

image-20220716105112755 image-20220716110055652

文字的 vertical-align 来设置一行文字通过什么线进行对齐

使用display: block 将inline换成块元素

滚动

  • visible:滚动条隐藏
  • hidden:滚动条隐藏
  • scroll:滚动条显示
  • auto:滚动条自动显示

文字折行

  • overflow-wrap 通用换行控制
  • word-break 针对多字节文字
  • white-space 空白处是否可以换行

如何隐藏checkbox

image-20220716185203611

布局知识体系

image-20220716185910455 image-20220716190327636
  • Float
    • 可以将inline形成块
    • 位置尽量靠上
    • 不影响其他块级元素位置
    • 影响其他块级元素内部文本

清除浮动的方式:

image-20220716192921244

响应式

  1. 隐藏 + 折行 + 自适应空间

  2. 加上 viewport

image-20220716203041824
  1. rem单位:根据font-size进行设置

动画和效果

image-20220716213401401 image-20220716215915364 image-20220716220434018 image-20220716220616559
  1. transition 使用
  2. 关键帧使用:
image-20220717095309743 image-20220717100332207

框架集成和CSS工程

预处理器

image-20220717105944216
  1. 变量:
image-20220717110347199 image-20220717111026614
  1. mixin 复用样式:直接加在css中
image-20220717113431832 image-20220717113501351 image-20220717114417447
  1. extend
image-20220717114908970 image-20220717114932023
  1. loop 循环
image-20220717115545611 image-20220717115813693 image-20220717115910993
  1. import 模块化
image-20220717120556629
  1. 框架处理
  • compass
  • est

Bootstrap

去官网看文档:提供了CSS与JS组件

image-20220717153750093 image-20220717154552536

工程化

  1. PostCSS
image-20220717161609959 image-20220717161750054
  1. webpack
image-20220717162946940 image-20220717164330742