小知識點總結
標簽（空格分隔）： 隨筆
1.H5&C3新知識點
H5新標簽
H5中新增了很多具有“語義化”的新標簽:
- article
- aside
設置關聯度不高的模塊- datalist
配合input的list屬性使用，給輸入框提供備選項- details
定義一小塊區域，可以收起可以展開
summary
修改下拉圖標旁邊的顯示文字
open
默認下拉區域展開- figure
figcaption- section
- header
- main
- footer
- nav
- mark
- time
- progress
- output
- ::after
content:"";
display:block;
clear:both;
H5新表單元素
input[type]
- date
- time
- week
- month
帶驗證效果，只能驗證中部是夠含有@- url
email和url都需要借助form表單才能起作用- number
- 只能驗證數字*
- range
*有四個屬性值：max/min/step/value- color
required:讓表單中的元素成為必須項
multiple：讓具有select和file等屬性的input標簽可以多選選項
CSS3新選擇器
- =
- *=
- ^=
- $=
- :root
- :not
- :emtpy
- :targrt
使用錨點鏈接時，可以選中錨點區域給錨點區域設置樣式
幀動畫
@keyframes move {
0% {
left: 0;
top: 0;
}
50%{
left: 1000px;
top: 0;
}
100% {
left: 0;
top: 0;
}
}
.ball {
position: absolute;
animation: move 5s;
}
- animation-name
- animation-duration
- animation-iteration-count
infinite：可以設置動畫無限循環- animation-delay
動畫延遲- animation-direction
設置動畫是否返程
alternate-reverse：返程也執行- animation-timing-function
linear:動畫速度曲線線性- animation-fill-mode
forwards:動畫結束時應用最后一幀樣式
backwards:動畫開始前應用第一幀樣式
both：都應用- animation-play-state
設置動畫的暫停與播放，一般配合按鈕的點擊事件
2.多列布局、2D變換、border/background
column
- column-count
- column-width
- column-gap
設置列之間的縫隙- column-rule
column-rule-color
column-rule-style：設置實線還是虛線
column-rule-width
border-radius
- border-radius后面最多可以寫8個值，第四個后用/隔開，分開代表：上左 上右 下右 下左 / 左上 右上 右下 左下*
- outline：設置元素的外邊框，其本身不占據dom文檔流
- box-shadow：設置元素的邊框陰影
- textshadow：設置文字的陰影
background
- background:linear-gradient(35deg,blue,red)
設置背景線性漸變，第一個參數是漸變的方向
- background：radial-gradient（at 0 0, circle, red,blue）
設置背景徑向漸變，at..可以設置圓心的位置。如果容器不是正方形則按照橢圓行漸變，可以通過circle變成圓心漸變
3.視口、響應式布局、flex布局、3D動畫
視口：為了適應各種設備的不同屏幕大小，開啟視口模式，在文檔上形成一個新的適配當前設備的坐標軸，保證看到的東西大小合適。只需要在head部分加上以下代碼：
<head>
<meta charset="utf-8">
`<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">`
<title>viewport</title>
</head>
響應式媒體：設置多套CSS樣式，在窗口大小改變到不同范圍的時候使用，代碼如下：
@media screen and (max-width: 1000px) {
.div1 {
background-color: red;
}
}
flex布局：，也叫彈性布局，將box設置為flex容器，其子元素自動成為inline-flex。默認寬度由內容撐開，高度和容器一致，并可以設置寬高
1.加在flex容器上的屬性
- flex-direction：設置主軸方向
row、row-reverse、column、column-reverse- justify-content：設置項目在主軸上對齊方式
flex-start、flex-end、center、stretch、baseline- align-items：設置項目在交叉軸上對齊方式
flex-start、flex-end、center、space-between、space-around- flex-wrap：設置當項目數量過多超出主軸寬度時是否換行
nowrap、wrap、wrap-reverse- align-content：設置當有多條主軸時項目在交叉軸上的對齊方式
flex-start、flex-end、center、space-between、space-around、stretch
2.加在項目上的屬性
- flex-grow：設置項目在行內占據的寬度比例
- flex-basis：設置項目在主軸上占據的百分比，可調整列數
- align-self：單獨設置項目在交叉軸上對齊方式
- order：設置項目的排列序號，誰小誰在前
4.3D動畫、drap&Drop、file
transform-style:preserve-3d;：開啟3D效果perspective: 2000px;：設置舞臺深度perspective-origin: 100% 0;:設置舞臺基準點
無論是開啟3D模式，還是設置舞臺深度，還是設置基準點，都是設置給父級元素的backface-visibility:hidden;:設置元素背面不可見
transform：變幻- 平移
translate3d(100px,100px,1000px)：平移- 拉伸
scaleX(1.5)：X軸拉伸1.5倍
scaleY(.5)：Y軸縮放0.5倍
scale3d(1.5,0.5,100)：Z軸的設置無效（非0除外），因為Z軸沒有厚度- 旋轉
rotateX(45deg)
rotateY(45deg)
rotateZ(45deg)
rotate(45deg, 45deg, 45deg)
rotate3d(1, 0, 0, 60deg)
