Html笔记

一、H5语义标签
header头部标签、footer标签、nav导航标签、article内容部分、aside侧边栏、section局部区域
二、视口

<meta name="viewport" content="width=device-width, initial-scale=1.0">

三、弹性布局
1、容器=行

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：换行，第一行在下方

2、项目（列）

flex：n  列占总宽比。
flex属性是flex-grow,
 flex-shrink 和
  flex-basis的简写，默认值为0 1 auto。后两个属性可选
flex-grow：定义列的放大比例。默认为0，即如果存在剩余空间，也不放大
flex-shrink：定义列的缩小比例。默认为1，即如果空间不足，该项目将缩小
order：n定义列的排列顺序，值越小越靠前

两种情况下可以父元素为弹性布局容器：
第1种、想要子元素水平排列，把父元素设为弹性布局容器
第2种、想要子元素在父元素中垂直居中，把父元素设为弹性布局容器，并设父容器align-items: center;

display:none|block  不要与display:flex一起使用

四、媒体查询：根据不同的设备输出不同的样式

@media screen and  (min-width:768px) {//如果屏幕 宽度大于等于768px则输出{}里面的样式
     css样式
}

五、css3特效

1、圆角边框：border-radius:左上  右上  右下  左下
2、文本阴影：text-shadow: 水平阴影位置  垂直阴影位置  模糊距离  阴影的颜色
3、盒子阴影：box-shadow: 水平阴影位置  垂直阴影位置  模糊距离  阴影尺寸  阴影颜色
4、线性渐变：background: linear-gradient(<angle> || <direction>,< color_stop1>, <color_stop2>...)
5、径向渐变：background: radial-gradient (<shape> || <size> at <position>, <color_stop1>, 

<color_stop2>, …)
6、过渡效果：transition: css属性名称 持续时间 速度曲线 延迟时间
7、动画

第1步、设置动画帧序列
   @keyframes 关键帧组名（动画名）{
     0%{ 样式属性值 }
     20%{ 样式属性值 }
     50%{ 样式属性值 }
     100%{ 样式属性值 }
   }
第2步、使用动画
   animation: 动画名称   持续时间

8、transform:变换属性

translate(<x长度值或百分数值>,<y长度值或百分数值>)指定在水平和垂直两个方向上平移元素
translateX(<长度值或百分数值>)指定在水平方向上平移元素
translateY(<长度值或百分数值>)指定在垂直方向上平移元素
scale(<x数值>,<y数值>)指定在水平和垂直两个方向上缩放元素
scaleX(<数值>)指定在水平方向上缩放元素
scaleY(<数值>)指定在垂直方向上缩放元素
rotate(<角度>)旋转元素。单位deg度skew(<x角度>,<y角度>)指定在水平和垂直两个方向上使元素倾斜一定的角度
skewX(<角度>)指定在水平方向上使元素倾斜一定的角度
skewY(<角度>)指定在垂直方向上使元素倾斜一定的角度