前端小tips（持续更新）
目录
一、公共样式
二、网站title图标
三、列表可点击链接
四、子元素与文字重叠
五、元素渐变显示
六、小三角方框
七、让盒子不显示但占用位置
八、在全网页中固定定位
九、精简项目代码（vscode中）
十、表单中的样式设计
十一、样式像素匹配
一、公共样式
--在编写css时，除了重置样式，也可以自己编写公共样式，然后一起导入，通常以base命名
--比如居中效果、清除浮动、body字体设置等等
二、网站title图标
--通过在网站首页url后面添加/favicon.ico访问原图片并下载
三、列表可点击链接
--当列表中多个内容都可点击时，一般是把a元素作为li的子元素
四、子元素与文字重叠
--当某个元素中，既放了子元素，又放了文字时，可能会出现错乱的情况
--可以设置文字的line-height，不确定高度时可以设置为1
五、元素渐变显示
--当一个元素默认被隐藏，但点击时又需要渐变出现
--把高度设置为0，overflow设置为hidden把内容全部隐藏，然后设置transition属性为height 0.5s，可以修改，然后在hover类中display时就会渐变出现
六、小三角方框
--有时候需要显示小三角的盒子
--一般在伪类中撰写，after或者before
--将width和height设置为0，border的颜色显示设置为transparent，并重新设置boder-color，你想在哪方设置小三角，就只在那方设置颜色，其它方向设置为transparent
border: transparent 10px solid;
border-top: none;
border-color: transparent transparent white transparent;七、让盒子不显示但占用位置
--visibility: hidden
八、在全网页中固定定位
--首先要使该盒子出现在屏幕中，一般是设置left或者right为50%
--如果是left就继续设置margin-left，同理，right就是margin-right
九、精简项目代码（vscode中）
--扩展中下载JS & CSS Minifier (Minify)
--在代码网页打开命令面板（查看-命令面板）
--选中Minifier document，就会生成压缩代码文件
十、表单中的样式设计
--对text的边框设计，可以用outline，就是边框线，和border相同
--text的鼠标效果，要设置focus伪类而不是hover
--表单的基本样式一般都有padding和margin，记得按需设置
十一、样式像素匹配
--当盒子的像素大小难以匹配时
--可以把box-sizing设置为border-box