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屬性的計算值,第二個變量是僞元素名，普通元素時省略或者nullwindow.getComputedStyle(document.body,':after').getPropertyValue('content')