HTML与CSS基础
一、H5语义标签
- header头部标签
- footer标签
- nav导航标签
- article内容部分
- aside侧边栏
- section局部区域
二、视口
<meta name="viewport" content="width=device-width, initial-scale=1.0">
三、弹性布局
- 容器=行
- display: flex; 设为弹性布局容器
- justify-content：center设置水平排列方式，flex-start（默认值）左对齐、flex-end右对齐、center居中
- align-items：垂直对齐方式，center设置元素列垂直居中
- flex-direction：列排列方向。row（默认值）左到右水平排列、row-reverse右到左水平排列：column上到下垂直排列、column-reverse下到上垂直排列
- flex-wrap：换行排列。nowrap（默认）不换行；wrap：换行，第一行在上方；wrap-reverse：换行，第一行在下方
- 项目（列）
- flex：n 列占总宽比。flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
- flex-grow：定义列的放大比例。默认为0，即如果存在剩余空间，也不放大
- flex-shrink：定义列的缩小比例。默认为1，即如果空间不足，该项目将缩小
- order：n定义列的排列顺序，值越小越靠前
- 两种情况下可以父元素为弹性布局容器：
- 想要子元素水平排列，把父元素设为弹性布局容器
- 想要子元素在父元素中垂直居中，把父元素设为弹性布局容器，并设父容器align-items: center;
注：display:none|block 不要与display:flex一起使用
四、媒体查询：根据不同的设备输出不同的样式
@media screen and (min-width:768px) {//如果屏幕 宽度大于等于768px则输出{}里面的样式
css样式
}
五、CSS3特效
- 圆角边框：border-radius:左上 右上 右下 左下
- 文本阴影：text-shadow: 水平阴影位置 垂直阴影位置 模糊距离 阴影的颜色
- 盒子阴影：box-shadow: 水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 阴影颜色
- 线性渐变：background: linear-gradient(
|| ,< color_stop1>, <color_stop2>...) - 径向渐变：background: radial-gradient (
|| at , <color_stop1>, <color_stop2>, ...) - 过渡效果：transition: css属性名称 持续时间 速度曲线 延迟时间
- 动画
第1步、设置动画帧序列
@keyframes 关键帧组名（动画名）{
0%{ 样式属性值 }
20%{ 样式属性值 }
50%{ 样式属性值 }
100%{ 样式属性值 }
}
第2步、使用动画
animation: 动画名称 持续时间
- transform:变换属性
- translate(<x长度值或百分数值>,<y长度值或百分数值>)指定在水平和垂直两个方向上平移元素
- translateX(<长度值或百分数值>)指定在水平方向上平移元素
- translateY(<长度值或百分数值>)指定在垂直方向上平移元素
- scale(<x数值>,<y数值>)指定在水平和垂直两个方向上缩放元素
- scaleX(<数值>)指定在水平方向上缩放元素
- scaleY(<数值>)指定在垂直方向上缩放元素
- rotate(<角度>)旋转元素。单位deg度skew(<x角度>,<y角度>)指定在水平和垂直两个方向上使元素倾斜一定的角度
- skewX(<角度>)指定在水平方向上使元素倾斜一定的角度
- skewY(<角度>)指定在垂直方向上使元素倾斜一定的角度
