css小记
图片自适应填充
object-fit: cover; //被替换的内容大小保持其宽高比，该对象将被剪裁以适应
object-fit:contain; //被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比
object-fit:scale-down //依次设置了none或contain, 最终呈现的是尺寸比较小的那个
绝对定位百分比偏移
left: 50%;
transform: translateX(-50%);
多行超文字隐藏
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
字间距
letter-spacing：10px
单行超文字隐藏
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
透明度
opacity: 0.2;
渐变色
参考自 RUNOOB
第一个属性是旋转值
background: linear-gradient(90deg,#FF8A4D 0%,#F95500 100%);
文本上一条删除线
h1 {text-decoration: overline} 上面
h2 {text-decoration: line-through;text-decoration-color: red} 中间 颜色为红色
h3 {text-decoration: underline} 下面
图片阴影
/* 第一个值为左间距 第二个为上间距 第三个模糊距离 第四个模糊尺寸 第五个模糊颜色*/
```css
box-shadow: 10px 10px 10px 10px rgba(0,0,0,.5);
/*考虑浏览器兼容性*/
-moz-box-shadow: 10px 10px 10px 10px rgba(0,0,0,.5);
-webkit-box-shadow: 10px 10px 10px 10px rgba(0,0,0,.5);
粘性布局
参考自MDN Web docs
position: -webkit-sticky;
position: sticky;
top: 20px;
必须提供 一个方向的参数 父级元素不能有overflow：hidden 定位根据父级元素
文字和图片对齐
设置各对象的vertical-align属性，属性说明：
baseline－将支持valign特性的对象的内容与基线对齐
sub－垂直对齐文本的下标
super－垂直对齐文本的上标
top－将支持valign特性的对象的内容与对象顶端对齐
text-top－将支持valign特性的对象的文本与对象顶端对齐
middle－将支持valign特性的对象的内容与对象中部对齐
bottom－将支持valign特性的对象的文本与对象底端对齐
text-bottom－将支持valign特性的对象的文本与对象顶端对齐
计算宽度
width: calc(100% - 20px);
提高css的优先级
!important
清除x轴滚动条和扩展
overflow-x: hidden;
增加滚动条
overflow:scroll;
但是不想显示滚动条 在增加滚动条的div上增加下列样式
.noscroll::-webkit-scrollbar { display: none; }
百分比高度 宽度
vh vw
html圆角
border-radius
第一个子元素才有的效果
youcss:nth-child(1){
}
最后一个子元素才有的效果
youcss:last-child{
}
限定了盒子模型的总面积
box-sizing:border-box;
伪类选择器:before（之前）：after（之后）
使用content属性设置文本或图像出现（浮动）在另一个元素中的什么地方。
使图片不可拖动
pointer-events:none;
移动端设置 （放在.html 文件里）
content属性值 :{
width:可视区域的宽度，值可为数字或关键词device-width
height:同width
intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no 禁止缩放
}
滚动穿透
showzzc() {
this.show = true;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
document.body.style.cssText += 'position:fixed;top:-' + scrollTop + 'px;';
},
closezzc() {
this.show = false;
var body = document.body;
body.style.position = 'static';
var top = body.style.top;
document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
body.style.top = '';
}
可编辑属性（在父级元素div上加后里面的内容可编辑）
contenteditable="true"
使div隐藏
visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。
display: none----将元素的显示设为无，即在网页中不占任何的位置。
！！！！！！！注意！！！！！！！！
可以用来分块
写完高度后可以使用行高
绝对定位后不要用百分比
清除所有的边距
*{
margin: 0;
padding: 0;
}
在恰当的断字点进行换行（比如数字不会换行）
word-break: break-all;
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
图片需要留最小宽度（在苹果有一款手机上会出问题）
min-width：80px；
取消默认点击事件
input{outline: none;}
textarea{outline: none;}
要让图片宽高相等
![]()