基础html、css、flex布局、盒子模型知识

学习目标

环境准备：编辑器/浏览器
前置知识准备：html/css、flex布局【重要】、盒子模型

---

学习内容：

开发环境：

1、vs code
常用扩展和快捷键之前发过介绍文章：vs code初次使用必备
https://blog.csdn.net/liuxin_2/article/details/113568602
2、谷歌浏览器----开发必备

新建网页

1、新建文件夹
2、在vs code 内新建网页文件 .html

3、编写网页代码
英文的！再按 回车即可自动生成下图
注意：网页的后缀要保存为.html才可自动生成

4、双击网页显示效果

简单回顾html和css

html 简单

1.块级元 素默认会换行，如 div
2.行内元素 默认不会换行，如 span

css 难知识

1、宽度和高度

• px % 简单
• vw vh 简单，好用；新技术；
  • vw viewport width视口的宽度
  • 100vw等于整个屏幕的宽度
  • vw是可视窗口的宽度单位，1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1200px,那么1vw = 12px。和百分比不一样的是，vw始终相对于可视窗口的宽度，而百
    分比和其父元素的宽度有关

2.字体颜色 背景颜色

■值为颜色名称——red / yellow ;
■值为十六进制值的颜色—— #ffff ；#000000；
■值为rgb代码的颜色——rgb(255,255,255)

div{
   
width: 50vw;
height: 50vh;
/* background- color: aquamarine; */
background