大家好，俺是一名大四学生，更新自己学习足迹，谢谢大家
HTML结构层
CSS:样式层
JS：交互层
HTML: 超文本标记语言
1.根标签 <html></html>
2.通过<mate>标签前端优化 1:<mate name = “keywords” content...> 表示网站的关键字 2.<mate name = “description” content...> 指定网站的描述
3.<h>标签 ：只有六级 <h1>---<h6> <br>换行 单标签
4.<em></em><i></i>都可以实现文字倾斜的效果 <>b></b><strong></strong>都可以实现加粗效果
5:表单：用于收集用户信息 表单域<form> 常见的控件 {text password submit reset}
6:选择器六大类：标签选择器 类选择器 id选择器 通配符选择器 后代选择器 群组选择器
如下图 ：出现父子盒子塌陷问题，用overflow:hidden
清除浮动的方法：
- 父元素加高
- 代码后加一个空标签<div></div> 加clear:both
- overflow:hidden
- 万能清除法 推荐使用 .clearfix:after{ content:"";display:block;clear:both;height:0;visiblity:hidden;
设置盒子中的文本溢出时显示省略号：
- 盒子需要设置width属性,设置overflow:hidden;
- 设置white-space:nowrap;
- 设置text-overflow:ellipsis;
解决图像三要素问题：
- 加display:block
- vertical-align:top
子盒子在父盒子中垂直水平居中
- 子绝父相的同时，给子元素设置left:0;top:0;margin-left:-子元素的一半 margin-top:-子元素的一半
- 子绝父相的同时，给子元素设置left:0;right:0;top:0;bottom:0;margin:auto;
- 应用css3的二D转换 子绝父相的同时 transform:translate(-50%,-50%);left:50%;top:50%;
- 弹性盒 给父元素设置为弹性容器 并将主轴侧轴都center
二级菜单的做法
- 当二级菜单的每一个li与父元素宽高不同时，单独设置宽高，会继承
- 将a用鼠标触发时 display:block
- 二级菜单的隐藏 display:none
7:精灵图 ：css技术 很多小图标整合在一张图上，减小了服务器的压力 主要应用背景定位的方法 一般是负值
8:渐变 线性渐变：linear-gradient() 径向渐变 ：radial-gradient() 过渡：transition:all .2s linear; transform:rotate/translate/scale
9:动画：分两步完成 1 定义一个动画用keyframes 2 调用动画animation
10:弹性盒子 ：display:flex 给父元素添加 设置为弹性盒 具体使用方法可以看搜搜 好多 打出来好久 顺便讲了多列 column 可以做类似tb买衣服挑选的那种两数列的布局 column-count:列数；
11：网格布局Grid: 和弹性盒子的用法差不多 给大容器设置display:grid;,主要有grid-template-columns定义列宽 grid-template-columns定义行高