前端常用小工具---kalrry
前端小技巧(待完成…)
问题 | 实现原理 | 教程详解 |
---|---|---|
文字垂直居中 | 通过设置文字高度与盒子高度相等,来达到居中效果 | 教程传送门 |
边框合并 | border-collapse:collapse; | 教程传送门 |
父子元素垂直外边距 塌陷问题解决办法 | 给块级父元素指定透明边框和内边距或者添加overflow:hidden; | 教程传送门 |
块级元素水平居中 | 给块级元素指定宽度width;并且margin:0 auto; | |
让行内块元素居中对齐 | 给父元素添加text-align:center; | |
清除内外边距 | 用通配符:* {padding:0; margin:0;}清除 | 教程传送门 |
让图片与父级盒子宽度一样宽 | 用后代选择器选择后添加width:100%; | 教程传送门 |
取消<li>的点 | list-style: none; | |
清除浮动float | 清除浮动四大方式;常用代码在文末复制 | 教程传送门 |
前端小工具(待完成…)
名称 | 作用 | 下载地址 |
---|---|---|
VS Code | 码代码工具 | VS Code下载;教程传送门 |
Snipaste | 实用截图工具 | Snipaste下载;教程传送门 |
常用清除浮动代码:
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}