css清除图片默认距离,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;}

要让图片宽高相等

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