总结H5+CSS3笔记

H5标签:

H5就是HTML5

H5新增标签:

1、header:头部信息

2、section:内容

3、footer:底部信息

4、<progress value="" max="100"> </progress>进度条

改变progress背景颜色:

progress::-webkit-progress-bar { background: #e6e6e6; }

progress::-webkit-progress-value  { background: #0064B4; }

value:值

5、移动端适配:

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

">

viewport视口 device-width 设备宽度,  initial-scale=1.0 不缩放

6、article:文章标签，可以包含文字p标签,图片img标签

7、aside:侧边栏:和div相同

8、dialog:对话框,提示框 log:日志(默认样式:display:none;opcaity:0;不显示)

9、  details:带详细信息的列表

<details open="open">

<summary>详细信息内容</summary>

<h3>啥啥啥</h3>

<p>sss<p>

</details>

10、figure:独立流内容 可放图片，图表，图像

figcaption 是figure的标题

<figure>

<figcaption>全国GDP增长</figcaption>

</figure>

11、meter:度量衡

<meter value="30" max="100" height="80"></meter>

value当前值 max:最大值 min:最小 low:最低值 height:最高值

音频：audio

写法①:<audio><source src=""></source></audio>

写法②:<audio src=""></audio>

属性(写在标签上):

   src=""引入音频文件

   controls:audio标签的必须项(写,才显示播放器),作用:控制播放和暂停

   autoplay：自动播放

   loop：循环播放

   muted：静音播放

   prelode="auto/metadata/none"：页面刷新时是否先加载音频

     metadata:刷新页面,加载音频

     none 刷新页面,不加载音频

视频：video

写法①:<video><source src=""></source></video>

写法②:<video src=""></video>

属性:

   src=""引入视频的路径

   controls:视频的播放和暂停 必须写,不写视频不显示播放按钮

   autoplay:视频自动播放

   loop:循环播放

   muted:静音播放

   preload="auto/metadata/none"

auto：刷新页面时,网络好加载视频

metadata：刷新页面时,加载视频

   视频封面:poster="图片url"这个路径代码中不会像img标签那样提示,直接写准确的路径

12、H5本地存储

HTML5本地存储Localstorage 土著

Local本地的   storage存储

一、sessionStorage：session即会话的意思,在这里的session是指用户浏览某个网站时，从进入网站到关闭网站的这个时间段，session对象的有效期就这么长

H5新增input属性

<input type="">:

  1、拾色器：<input type="color">

  2、必须输入邮件：<input type="email">

  3、获取url地址：url<input type="url">

  4、生成数字:<input type="number">

  5、搜索框<input type="search">

  6、日期和时间：<input type="deta">

-tetatime：<input type="datetime">

  7、区间范围:<input type="range">

-range

画布：canvas：是绘制图形,图标等容器，它没有绘画能力(只是个图形的容器)，实现绘画要结合脚本使用

蘑菇街基本布局:

移动端需要注意的细节问题:

1、移动端字体最小不能小于13px

2、移动端的宽度最小是320px，所以对固定的值有最小值

3、移动端的a标签注意宽高设置(手触 触发不了)

4、使用文本超出省略号尽量使用div标签

5、修改input中placeholder 默认字体颜色：input::-webkit-input-placeholder {}

单位换算:

rem,em,px区别

1em=1rem=16px     0.5em=8px

Px 像素 px是固定长度单位，不随其他元素的变化而变化

em em是相对于父级元素的单位,会随父级元素的属性(font-size 或其他属性) 变化而变化。只是父子级

rem(css3新增的相对长度单位)

rem是相对于根目录(html元素)的,所有他会随html元素的属性(font-size)变化而变化(width，height，padding，line-height)

ren，em，px区别

1、px是固定值

2、em和rem 是相对值

3、em是需要设置父级比例,子级根据父级变化，rem是需要设置html根目录比例，页面所有元素根据目录变化

4、em和rem都可以转换成px

1em=16px   （浏览器像素）

1rem=16px   (浏览器像素)

偶数选择器：

&:nth-child(odd){}

奇数选择器：

&:nth-child(event){}

CSS3基础:

1、圆角：border-radius

-值 百分比 50% 100%

-值 像素 根据圆的直径算角的弧度

-如果是合并角 先写上下 再写左右

例：border-top-left-radius:50%;对

       border-left-top-radius:50%;错

13

`

半圆属性：border-radius:50% 0 0 /100% 100% 0 0;

半圆弧线：border-radius:100% 0 100% 0;

  background:transparent; transparent透明

  border-top:red solid 10px;

写伪类和伪元素必备

1、content："";

2、position: absolute（本身需要加relative 相对定位）

不同形状基本都是有宽高，伪类或者边框实现

无宽高 设置边框 和不同颜色是不同三角形

设置宽高 由三角形变成梯形

五边形 是 三角形 + 倒梯形

六边形 是 长方形 + 两边三角形

八边形 是 上下两个等腰梯形 + 中间长方形

2、背景渐变

-线性渐变:

background:linear-gradient(red,green);

如果想让第一个颜色值占整个div的20%，第二个值占80%可以这么写(颜色占比):

background:linear-gradient(red 20%,green 80%);

方向改变:background:linear-gradient(to right,red 40%,green 30%);

-径向渐变:radial-gradient(red,green);

颜色占比 background:radial-gradient(red 40%,green 30%);

-边框图片:border-image 边框图片

3、过渡:transition

transition:3s;

transition:all 3s;所有属性都过渡3秒

4、2D转换 transform

2D位移:translate   转换只有两个轴X轴和Y轴，3D转换有3个轴 X，Y，Z

transform:translate(100px,200px)第一个值是X轴的坐标，第二个值是Y坐标

transform:translateX(100px) 水平位移向右100px，正值往右，负值往左

transform:translatY(100px) 垂直位移向右100px，正值往右，负值往左

2D旋转:rotate

transform:rotate(60deg);正数顺时针,负数逆时针

transform:rotareX(60deg);X轴正数顺时针旋转60°,负数逆时针

transform:rotareY(60deg);Y轴负数逆时针旋转60°,正数数顺时针

2D缩放:scale

0.1-0.9是缩小的倍数,1-无穷大整数放大的倍数

transform:scale(2,3);X放大两倍，Y轴放大3倍

transformscaleX(0.5);X缩小0.5倍

transform:scaleY(0.1);Y轴缩小的0.1倍

2D倾斜:skew

transform:skew(60deg,60deg);X Y轴同时倾斜60deg

transform:skewX(60deg);X轴倾斜60度

transform:skewY(60deg);Y轴倾斜60度

矩阵:matrix(n,n,n,n,n,n) 定义2D转换用6个值

矩阵是通过算法将上面4个 位移，旋转，缩放，倾斜效果同时写出来

要实现位移，旋转，缩放，倾斜同时的效果写法：transform: translate(600px,100px) rotate(-360deg) scale(2,0.5) skew(60deg,60deg);

2d和3d的区别:属性相同,区别就是 3d使用时多了3d两个字母

旋转基点:transform-origin:left/right/top/bottom;

透视旋转基点:perspective-origin:X Y;

5、3D转换 transform:3d;

3d转换是3个轴 X Y Z 都互相垂直

3d空间显示的2个必要条件:

1、透视 :perspective:500px;近大远小

2、transform-style: preserve-3d;让子级元素在3d空间显示

3D位移:translate3d

transform:translate3d(100px,200px,300px);第一个值是X轴的坐标,第二个值是Y轴坐标，第三个值是Z轴坐标

transformtranslateX(100px);水平位移向右100px,正值往右，负值往左

transform:translateY(100px);垂直位移向下100px，正值往下，负值往上

transform:translateZ(100px);前后位移向下100px，正值往前，负值往后

3D旋转:rotate  单位:deg

前面三个数分别是X,Y,Z旋转的矢量值，范围0-1

transform:rotate3d(1,1,1,280deg);正数顺时针，负数逆时针

transform:rotateX(200deg); X轴顺时针旋转200度

transform:totateY(200deg); Y轴逆时针旋转200度

transition:rotateZ(-200deg);Z轴逆时针旋转200度

3D缩放:scale3d;(si gei ou)

0.1-0.9是缩小的倍数,1-无穷大整数放大的倍数

transform:scale(2,3,5);X放大两倍，Y轴放大3倍，Z轴放大5倍

transformscaleX(0.5);X缩小0.5倍

transform:scaleY(0.1);Y轴缩小的0.1倍

transform:scaleZ(0.1);Z轴缩小的0.1倍

6、盒子阴影:box-shadow:apx bpx cpx dpx #e;

       a阴影水平的位置，当a的为0 阴影就是水平左右平均

       b阴影垂直的位置，当b的为0，阴影就垂直上下都平均

       c阴影模糊程度,c值越大模糊越大

       d阴影的范围，d值越大模糊程度越大

       e阴影的颜色，直接写色值或者16进制颜色值

7、文字阴影(只有4个值):text-shadow:apx bpx cpx #d;

第一个值 文字阴影水平 0 就是左右均等,正数往右,负数往左

第二个值 阴影垂直位置 0 上下均等，正数往下，负数往上

第三个值 模糊程度 0是完全不模糊，值越大模糊程度越大

第四个值 阴影的色值

！8、动画:

动画必备条件：

①关键帧：@keyframes

语法1:@keyframes 动画名称{

from{}

to{}

}

语法2:@keyframes 动画名称{

10%{}

50%{}

75%{}

100%{}

}

②时间：（调用动画时候写时间）

调用动画

animation:动画名称 时间 (s) 播放次数

默认属性:

- 播放次数 播放一次linear

- 循环播放 infinite

   9、动画播放的方向:animation-direction

• animation-direction:normal;正序播放
• animation-direction:reverse;倒序播放
• animation-direction:alternate;交替播放
• animation-direction:alternate-reverse;反向交替

  10、时间函数:animation-timing-function:

• ease/is/开始和结束时慢速,中间快速
• ease-in 开始慢速
• ease-out 结束慢速
• ease-in-out 开始结束慢速,中间匀速
• linear 匀速播放

 11、动画延迟:animation-delay:

animation-delay:2s;

 12、动画播放状态:animation-play-state:

• running 默认 动画正常播放

   -   paused 动画暂停播放 不播放

 13、动画填充模式 animation-fill-mode

-animation-fill-mode:none; 动画前后不改变样式

-animation-fill-mode:forwards;(前进) 保持最后一帧样式

-animation-fill-mode:backwards;(后退) 回到第一帧的样式

-animation-fill-mode:both;

14、多媒体查询@media

1、媒体功能

*print 打印机

*color,color-index 彩绘

*scan 定义电视类设备的扫描工序

设备尺寸范围：

@media only screen and(min-width=960px){}

media 多媒体 only仅限于 screen屏幕

min-width 最小宽度 min-height 最小高度

max-width 最大宽度 max-height 最小高度

>=640px min-width:640px

>=640px <960px min-width:641px and max-width:960px

<=640px max-width:640px

多媒体查询优点：可以兼容多个设备以及实现响应式布局

例：@media only screen and(min-width=640px)and(max-width=959px)

{

width:100%

height:521px;

background:#000000;

}

15、弹性布局 flex布局：弹性容器和弹性子元素组成

1、弹性容器设置

display:flex;父级设置flex属性,父级容器变成弹性容器

2、弹性盒子的方向设置

flex-direction:row;横向排列

flex-direction:row-reverse;横向反向排列

flex-directiob:column;纵向排列靠上

flex-direction:column-reverse;纵向反向排列靠下

3、弹性盒子换行

flex-wrap:nowrap;默认设置,不换行

flex-wrap:wrap;换行

flex-wrap:wrap-reverse;反向换行

4、flex-flow可以同时设置flex-direction和flex-wrap

        flex-flow:row wrap;空格隔开两个属性

row可以替换  row reverse column column-reverse;

wrap可以替换  nowrap wrap-reverse

5、控制项目在主轴排列方式:justify-content

flex-start        横向靠左,纵向靠上

flex-end        纵向靠右,横向靠下

center        居中

space-between (上下/左右)两边靠边中间平分

space-around 两边有空隙中间平分,两边空隙是中间一半

6、控制轴线排列方式:align-content

       flex-start      横向靠左,纵向靠上

       flex-end       底对齐

       center          垂直方向居中对齐

       stretch(子项不能设置高度,拉伸至父级高度)         强制填满容器

       space-between(两者之间)     上下两端对齐

       space-around       上下环绕居中

       space-evenly  两边间隙居中间相等

space(太空 空间)

between(两者之间)

around(周围)

streth(拉伸)

7、align-items控制子项再交叉轴上位置

align-items:flex-start  横向靠上 纵向靠左

align-items:flex-end 横向靠下 纵向靠右

align-items:center  居中

align-items:baseline  基线

align-items:streth     (子项不能设置高度)拉伸至父级高度或宽度

8、align-self  属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式

align-self:flex-start  横向靠上,纵向靠左

align-self:flex-end  横向靠下 纵向靠右

align-self:center  居中

align-self:baseline  基线 与flex-start效果类似

align-self:(子项不能设置高度)  拉伸至父级高、宽度

width:-webkit-fit-content; 不能设置宽度具体值和百分比时,横向撑满一整屏

order 设置子项排序 order="1" order="2"        设置子元素在上面还是下面

flex-shrink         当子项超出父级时所有子项收缩比例

1、如果设置0就代表不收缩,flex-wrap:normal;

flex-basis basis基准,如果父级有空余空间,可以单独设置flex-basis,如果有这个会把之前的width的值替换

flex:flex-grow flex-shrink flex-basis; flex可以综合三个属性同时写到一起 空格隔开,也可以单独设置