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 文件里）

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
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----将元素的显示设为无，即在网页中不占任何的位置。

！！！！！！！注意！！！！！！！！

<section></section>可以用来分块

写完高度后可以使用行高

绝对定位后不要用百分比

清除所有的边距

*{
    margin: 0;
    padding: 0;
}

在恰当的断字点进行换行（比如数字不会换行）

word-break: break-all;
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

图片需要留最小宽度（在苹果有一款手机上会出问题）

min-width：80px；

取消默认点击事件

input{outline: none;}
textarea{outline: none;}

要让图片宽高相等

<div class="promotion-img-block">
   <img :src="item.picture_path" class="promotion-img">
</div>

 <style type="text/css" scoped>
  .promotion-img-block{
    padding-bottom: 100%;
    position: relative;
  }
 .promotion-img{
   width: 100%;
   height: 100%;
   object-fit:contain;
   position: absolute;
 }
 </style>

在text/css中 >>> 表示深入 scoped 是局部！！必须加