前端小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