最近跟着学校出去实践，了解也学了一些前端，随便写点总结，当做笔记也是整理思路的过程。
本篇博客更像是我作为一个刚接触前端的人的自言自语，有些东西，我只是记录，并不会深入分析，因为我还没学多少，可以当个乐子看，当然你如果愿意为我指出哪里的理解有误，那就太好了！
1.
HTML是超文本（⽂本+⾮⽂本：⾳频、视频、图⽚.......）标记（标签）语⾔，也就是真正在⽹⻚显示的内容，写网页是在后缀为.html 的文件中。
2.
VScode中，!加回车就能自动生成一大串内容，如下图
body内是可以直接写文字的，如下：
【到后面的时候，不要以为内容必须写在div里】
3.
body中的内容要遵循文档流原则，即从上到下、从左到右。
4.
a标签是跳转标签：a+回车 就能生成
5.div结构标签（很重要！）
一定要理解为啥要用div标签，div像一个容器，可以将一些内容聚拢在一块。
特征：
①div默认由内容撑大（设置字体的大小，div的宽也会被撑大或者改变），也默认占据父元素的一整行，如果不设置高或者内容，就不会占据网页中的位置，也就是不显示。
【同样也是为什么div中子元素浮走后，需要为父元素(容器)设置一个高让其漂浮在上面，以免挤占下面行的内容】
设置了背景颜色，但没给内容或者高就不会在网页中占空间，所以也就不会显示紫色的背景，这也和后续不设置内容或者高，就显示不了背景图片很像。
不妨看看设置之后会产生什么效果：
②div和并行的div之间不是文档流原则，它们默认占据一整行，会一行一行往下走，而单独的div里的内容是文档流原则，也是从上到下、从左到右。
③注意，设置div的宽是设置的可视内容的宽，并不会影响div还是父元素一整行的事实，譬如有人会认为给两个并行的div设置成50%的宽，它俩就能跑到同一行中，其实是不行的。
④想实现想下面这样的情况：实现不占据一整行的换行
以前想着写两个并行的div，但不好，正确应该是手动设置可视内容的宽度，当文本内容写满一整行后就会自动换行的。
6.浮动float
一开始使用浮动是处理一行中左右都有内容的情况，因为div是默认占据父元素一整行的，所以写两个并行的div的话肯定是上下关系而不是左右关系，使用浮动，就能让div里的内容脱离文档流，即不会再按照从左往右、从上往下的原则，而是飘在网页上端，同时飘着的内容不会重叠，而是会挤占其他内容。
正确的代码实现：
float:left; 让内容浮动在网页左侧，可以使用多个float:left，会按照写float:left的顺序，一个个按照当前的左侧。
7.盒子模型：操场上有一个箱子，箱子里放了一个篮球
Content：箱子里面的内容（篮球），由宽高组成；
Padding：内容与盒子的间距（篮球和箱子之间的空隙）
①会默认跟背景颜色一致
②设置宽度：如果只写padding，会造成视觉上撑大盒子的效果，
单独再写一行box-sizing：border-box就可以避免撑大盒子的效果，即从内容里扣走间距的内容
统一设置/单独设置
1.单独：padding-right、left、top、bottom xxpx
padding +4个px 顺序是从上开始的顺时针方向
2.统一：Padding+1个px 代表四个方向统一设置
Padding +2个px 第一个代表相同的上下，第二个代表相同的左右（纵横）
Border：盒子的厚度（箱子的厚度）——可以设置color、width、style
注意：不写border-style：solid(实线)、dashed(虚线)，就不会展示出border的宽度和颜色
②设置宽度：如果只写border，会造成盒子被撑大的效果。
单独再写一行box-sizing：border-box就可以避免，即从内容里扣走间距的内容
这么一看，感觉padding和border似乎很像，只是说padding可以设置颜色、宽高和类型。
③颜色，宽度和样式都是可以设置的
1.四个方向上三个属性一起设置：border:颜色、宽度、样式（三个的顺序可以颠倒）
2.某一方向上三个属性一起设置
3.四个方向上单独属性设置：border-color/width/style:
4.具体到某个方向的某个属性：border-left-color：
拓展：圆角 border-radius
Margin：有多个箱子时，箱子与箱子之间的距离
①设置宽度：统一/单独设置
②margin:auto; 使容器div里的可视范围居于文档流宽度一整行的左右中央（与上下无关）
8.辨析text-align和margin:auto
text-align：写在容器的属性里，使得容器里的内容处于容器可视范围的左右居中位置
margin:auto：写在容器的属性里，使得容器的可视范围处于文档流宽度的左右居中位置
9.标签选择器：用标签的名字控制标签，注意是标签的名字，比如body、div、img等等
10.通配符
11.background-image
①不设置高是看不见背景图的，背景图不是内容！
②精灵图技术：将许多张小图片放在一起组成大图片
12.img 与 background-image
img是写在body里的，但background-img是写在style里的
13.定位 position：
relative：相对定位
①无论写不写偏移量，都不会脱离文档流；
②偏移点是文档流的左上角。
absolute：绝对定位
①只要在容器属性position中一写absolute就会脱离文档流，无论写不写偏移量；
②由于脱离文档流，所以它会先找一个离他最近的带有定位属性（relative：对祖先元素本身没有影响）的祖先元素（层级关系），再以该祖先元素的左上角为偏移点进行偏移，如果一直找找不到就会以网页的左上角进行偏移，此时会随着网页的滚动而滚动
【子绝父相】
fixed：定死，不会随着页面的滚动而滚动
14.一张图片放在div容器中，给容器设置宽高，图片的宽高如果不适配就会溢出，这是可以给img加属性，手动设置宽高即可。
15.div里的内容单行的情况下，想要上下居中，要设置行高line-height等于div的高度
16.隐藏元素
17.父子伪类：通过父亲控制儿子
鼠标移进造成属性的变化
