css相关（持续更新）

css减法运算

在css中我们经常遇到一些百分比或者自适应的布局这个时候就遇到用到百分比宽度减去固定宽度

width:calc(100vw - 300px)

渐变

//线性渐变  颜色后面加百分比
background-image: linear-gradient(#061833, rgba(0, 0, 0, 0));
//径向渐变
background-image: radial-gradient(red 5%, yellow 15%, green 60%);

背景图片不动，内容滚动

background-attachment: fixed;

隐藏滑动条

::-webkit-scrollbar{
    display: none;
}

css首行缩进

text-indent:2em;

table表格

/*表格的表框成为一条线*/
table {
   border-collapse: collapse;
}

垂直方向对齐样式

vertical-align:bottom

文本隐藏

一些固定宽度的盒子，文字超出后显示省略号

单行文本隐藏

overflow: hidden;    
text-overflow: ellipsis;    
white-space: nowrap;

多行文本隐藏

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;

鼠标移入变成手型

cursor: pointer;

清除浮动

父元素中某个子元素使用了浮动属性，这时候无法撑开父元素的高度，利用清楚浮动即可
content必须写

.fuyuansu::after{
    content: "";    
    height: 0;
    display: block;
    clear: both;
}

input表单获取焦点取消样式

border:none;  //取消边框
outline:none;//获取焦点的时候取消样式

图片沾满盒子，不变形

.box img{
      width: 100%;
      height: 100%;
      object-fit: cover;
}

文字两端对齐

text-align:justify;
text-align-last:justify;