css相关整理-其他

1.设备像素(device pixel): 设备像素是物理概念，指的是设备中使用的物理像素。
CSS像素(css pixel): CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。
通过设备像素比，便可得知设备像素与CSS像素之间的比例。当这个比率为1:1时，使用1个设备像素显示1个CSS像素。当这个比率为2:1时，使用4个设备像素显示1个CSS像素，当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素
<img srcset="small.jpg 450w ,large.jpg 900w" sizes="(min-width:17em) 100vw (min-width:40em) 50vw " src="small.jpg">
srcset+sizes结合使用：
srcset 图片名 图片宽度（w告诉浏览器图片有多大，相当于css像素大小）
sizes 设备宽度 图片展示宽度
对于设备屏幕宽度大于40em的，图片展示宽度是屏幕的50% 设备屏幕小鱼17em的，图片展示宽度时100%
em和rem的区别：rem相对于HTML根元素来讲的，通过rem既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应

2. 解决图片底部差的3像素，方法有很多种
给img图片标签添加属性vertical-align:top;（不是baseline即可）：img{ vertical-align:top; }
img的父标签添加属性：font-size：0；
给图片添加属性：display:block;

3.输入视频外链路径可以直接转代码，字段自适应 http://embedresponsively.com/
浏览器对css样式的支持情况 https://caniuse.com/

4. word-wrap:break-wrap; //文字换行（支持IE5.5）

5.检测浏览器的JavaScript库
<script src="/js/libs/modernizr.min.js"></script>
@supports ( (display:flex)and(pointer:coarse) ) or (transform:translate3d(0,0,0)){
.item{ display:inline-flex; }
}
@supports (fill:black){//判断浏览器支持fill属性也就支持展示svg图片
.item{ background-image:url('image.svg'); }
}
//@supports 当浏览器支持条件内的样式的时候，才会渲染内部的样式
//@supports not

6.属性选择符
^ 以xx开头 * 包含xx $ 以xx结尾 ~ 空格
[attribute*="value"]
注意：多个属性是被当做字符串的

7. :has伪类
a:has(figcaption){ padding:1rem; s}

8.CSS3还支持HSL颜色系统
color:hsl(359,99%,40%) //色相(共360) 饱和度 亮度
hsl和rgb与十六进制的区别：支持透明通道，可以让原来被元素挡住的东西透过来

9.颜色渐变
background:linear-gradient(to top right,red,blue); //渐变位置，初始颜色，结束颜色，
等价于background:linear-gradient(45deg,red,blue);
background:linear-gradient(red -50%,blue); //从不可见的位置开始渐变
径向渐变：
background:radial-gradient(12rem cricle at bottom, yellow,orange,red); //
重复渐变
background:repeagting-radial-gradient(12rem cricle at bottom, yellow,orange,red);

10.css滤镜 filter
在filter属性后面指定要使用哪种滤镜
.txt{
filter:drop-shadow(8px 8px 6px #ccc); //创建三角形的阴影
}
filter:url('./img') //定义一个svg滤镜
fliter:blur(3px) //模糊，值越大越模糊
filter:brightness(2) //0全黑 1正常 >1越大越亮
filter:contrast(2) //0全黑 1正常 >1越大对比度越高
filter:drop-shadow(4px 4px 6px #ccc) //drop-shadow是真正意义上的投影，box-shadow只是加一个模糊的盒阴影而已
filter:grayscale(0.8) //灰度
filter:hue-rotate(25deg) //颜色在色轮上的变化
filter:invert(75%) //元素中反色的程度
filter:opacity(50%) //透明度
filter:saturate(15%) //饱和度
filtersepia(0.74) //褐色化

11.Object是w3c推荐的装载非HTML内容的容器，data是链接svg资源的方式，type描述了内容的mime类型
object里的内容会在浏览器不支持引入的数据类型的情况下做出简单的内容反馈
<object data="img/svgfile.svg" type="image/svg+xml">
<span>this browser not support</span>
</object>
//image/svg+xml是svg的互联网媒体类型

给svg-icon加样式 (利用原图标的阴影区域，同时将原图标移动超过之前父元素范围)
filter: drop-shadow(red 80px 0);
transform: translateX(-80px);
给父元素加样式 （父元素超范围隐藏，正好把原图标的隐藏掉，显示阴影区域）
overflow:hidden;

12.动画变形
宽高不明确的子绝父相的元素居中：top:50%; left:50%; transform:translate(-50%,-50%)
transform-origin:50% 50%; //变形原点是元素正中心（默认是50% 50%）
perspective: 400px; //确定元素透视点位置的。该值越大，角度出现的越远，相当低的强度和非常小的3D空间变化(空间变化的程度)
transform-style: preserve-3d; //父元素3d变化时子元素也跟着3d变化
backface-visibility: hidden; //隐藏元素背面
关键帧：基于webkit内核的浏览器（ios safari）对from和to的支持性不是太好，所以还是使用百分比
animation: 动画名 持续时长 延迟 运行次数(infinite) 播放方向(alternate) 保存动画开始或结束时的状态(forwards后 backwards前 both)

13.input相关
input:placeholder-shown{ ... } //使用placeholder-shown 伪类选择器为placeholder添加样式
//只能修改color以外的样式
autofocus //表单加载完成之后既有一个表单被默认选中
autocomplete //自动补全 autocomplete="off"
appearance=none //移除浏览器对于表单元素的默认样式

14.获取伪元素的样式
window.getComputedStyle() //返回元素的所有CSS属性的计算值,第二个变量是伪元素名，普通元素时省略或者null
window.getComputedStyle(document.body,':after').getPropertyValue('content')