小知识点总结
标签（空格分隔）： 随笔
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)
网友评论