这是我的第一篇文章，内容也许不多，但都是自己项目开发过程中新学习到的东西。如果有什么思考不周全的地方，还往多多指点。
1、设置按钮文字有间距并居中
letter-spacing: 20px; // 字符间距
text-indent: 20px; // 首行文本缩进
2、img 标签实现和背景图一样的显示效果—— object-fit 和 object-position
-
object-fit属性还有哪些值呢？
object-fit: fill; object-fit: contain; object-fit: cover; object-fit: none; object-fit: scale-down;
- fill: 中文释义“填充”。默认值。替换内容拉伸填满整个contentbox,不保证保持原有的比例。
- contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
- cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见（上面讲解的例子就是如此）。
- none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
- scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。
-
object-position，就是控制图片在盒子中显示位置的。默认值是50% 50%
3、css 图片宽高相等设置
html:
<div class="imgBox">
<img src="demo.jpg">
</div>
css:
.imgBox{
position:relative;
width:100%;
height:0;
padding-top:100%; //此时的padding-top和padding-bottom使用的也是宽度的百分比
}
.imgBox img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
4、css 文本多列布局
column-count: 2; // 设置多少列
column-gap: 20px; // 列与列之间的间隔
-webkit-column-break-inside:avoid; // 如果不想子元素被截断，给子元素添加
5、flex布局中超出隐藏问题
设置子元素：
overflow：hidden；
text-overflow: ellipsis;
white-space: nowarp;
父元素设置：
width： 0；或 overflow: hidden
才能正常显示超出隐藏，省略号代替
6、tabindex="-1" 的使用：让普通元素获得焦点
<div tabindex="-1" class='model'></div>
$('.model').click()时， .model聚焦
当点击.model 以外的区域，.model 失去焦点
7、css滤镜效果，使用css给图片添加毛玻璃（高斯模糊）效果
.blur {
filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
-webkit-filter: blur(4px); /* Chrome, Opera 值越大越模糊*/
-moz-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false); /* IE6~IE9 */
}
8、CSS强制英文、数字等字符换行
word-break:break-all; // 只对英文、数字起作用，以字母作为换行依据
word-wrap:break-word; // 只对英文、数字起作用，以单词作为换行依据
white-space:pre-wrap; // 只对中文起作用，强制换行
white-space:nowrap; // 强制不换行，都起作用
overflow:hidden;
text-overflow:ellipsis; // 不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）
9、div绘画成正圆：
width: 10px;
height: 10px;
background: #f00;
border-radius: 50%; // 将 50% 换成 height的值 时，可用来作为消息标记
