前端-html5+CSS3阶段思维导图模板_ProcessOn思维导图、流程图

Day_02CSS的兼容性，截取边角

CSS的兼容性

css兼容性查询网站

如何给浏览器的CSS样式做兼容性处理

方式:需要在CSS样式之前,添加浏览器的内核前缀

IE浏览器 - 样式前加 -ms- 样式名

safari浏览器以及chrome浏览器 - 样式前加 - webkit - 样式名

firefox浏览器 - 样式前加 -moz-样式名

opera浏览器 - 样式前加 - o - 样式名或者-kthml-样式名

谷歌浏览器 -webkit- 样式名

hack 对于IE浏览器版本的兼容性处理 - 作为了解

截取边角

border-radius: 50px;

border-radius: 150px 50px 0 50px /150px 50px 0 50px;

如果前四和后四个值一样马,则可以代表 1,5 2,6 3,7 4,8

前四 150px和后四50px;

border-radius: 150px 50px;

Day_03

1，边框阴影和文字阴影

box-shadow

边框阴影:默认为外置阴影,如果设置inset则为内置阴影;

box-shadow:阴影的扩散方向(外置还是内置) X轴的偏移量 Y轴的偏移量阴影的模块半径阴影的扩散半径阴影的颜色;

/* 边框阴影  外置一层阴影*/
    /* box-shadow: 0 0 50px 10px; */
    /* 边框阴影,内置一层阴影 */
    /* box-shadow: inset 0px 0px 60px 20px blue; */
    /* 多层阴影 */
    box-shadow: 0px 0px 60px red,
        inset   0px 0px 90px blue,
             0px 0px 50px aqua;

text-shadow 文字阴影

text-shadow:X轴的偏移量 Y轴的偏移量阴影的模糊半径阴影的颜色;

2，CSS滤镜

filter: blur(5px);

高斯模式,值越大,越模糊

filter: invert();

反色

filter: sepia(100%);

复古

filter: saturate(300%);

饱和度

filter: contrast(300%);

对比度

3，关键帧动画

自定义关键帧动画的使用

方式一：推荐使用的方式

@keyframes 动画名 {
       0%{
        修改属性值
       }
       百分比{
        修改属性值
       }
       ...
       100%{
        修改属性值
       }
      }

方式二：

@keyframes 动画名 {
             from{
              修改属性值
             }
             百分比{
              修改属性值
             }
             ...
             to{
              修改属性值
             }
      }

1.添加动画名-处理兼容性

-webkit-animation-name: move1;

2.添加动画一次执行的时间

-webkit-animation-duration: 5s;

3.设置动画执行的效果 - 函数

linear 匀速

ease 由快到慢

ease -in 加速

ease -out 减速

ease -in-out 先加速后减速

animation-timing-function: linear;

4.设置动画执行的次数,默认执行一次

infinite 无限循环

animation-iteration-count: 3;

5.设置动画延迟的时间,单位s秒

animation-delay: 3s;

总写:

animation:动画名称动画时间动画过渡效果延时时间动画执行的次数

6.设置动画执行完毕之后的状态

backwards 设置动画结束之后,回到动画标签的初始状态; 默认值

forwards 设置动画结束之后,保留动画结束时标签的状态

animation-fill-mode: forwards;

7.设置动画的播放方向

normal 默认正常播放

1.0%-100%

2.0%-100%

......

alternate 动画执行超出一次之后,则轮流反向播放

1.0%-100%

2.100%-0%

3.0%-100%

......

alternate-reverse 动画轮流反向播放并改变起始位置

1.100%-0%

2.0%-100%

3.100%-0%

......

animation-direction: alternate;

8.设置动画的播放状态 - 播放和暂停

running 播放

- 默认值

paused 暂停

animation-play-state: running;

4.animate 第三方动画库

第一种方式：老版本

1.下载animate.css第三方文件；

2.文件使用时，link引入到html；

3.那个标签使用动画，则添加class名为animated，同时，使用那个动画，对照官网效果，添加
对应的动画名为class名即可；

4.如果无限循环播放，则使用class名为infinite；（不满足的动画属性，可以在html文件中修改）

5.背景图background

注意:背景颜色和背景图片并不属于标签的内容,不能撑开所在标签的宽高'

1.背景颜色,不属于背景图片的属性

background-color: aqua;

2.背景图

background: url(" ");

3.背景图是否平铺

默认沿x轴,y轴平铺

no-repeat 不平铺

repeat-x 背景图沿x轴平铺

repeat-y 背景图沿y轴平铺

background-repeat: no-repeat;

4.背景图的尺寸,不设置的情况下,则是原图片大小

background-size: width height;

只写一个值，代表宽高按图片原比例缩放；

如果设置百分比，则是相对于该标签的宽高百分比；

background-size: 20%;

5.背景图的位置

background-position: 距离标签右上角x轴的位置，距离右上角Y轴的位置;

默认是 0 0

方式一：直接写固定值 X和Y，使用px，代表距离右上角的X轴和Y轴距离

方式二：直接写固定值px ，如果只写一个值，代表距离右上角x轴的距离，Y轴垂直方向局长；

方式三：使用百分比，相对于背景图所在的标签剩余空间的x轴，y轴的百分比大小；

方式四：使用关键字 left top bottom right centent

background-position: center;

总写:background:背景图背景图平效果背景图的位置背景图的颜色

设置背景图片完整标签所在大小的三种方式

第一种：background-size: 100% 100%;

作用:按标签容器宽高比例撑满,图片会变形

第二种：background-size: cover; （塞满）

作用：把背景图片放大到合适标签元素容器的尺寸，图片比例不变，但是要注意，超出容器部分可能会裁剪掉；

第一种效果你一定会看到完整的背景图片,但是有可能会被挤压(图片失去原有比例)

第二种效果你不一定会看到完全的背景图片，会发生裁剪，但是图片的比例没有改变

background-size: contain;(包含)

在no-repeat的情况下:

cover:图片宽高比例不变,铺满整个容器标签的宽高,图片多出来的部分会被裁掉;

contain: 图片宽高比例不变，缩放至图片完全展示出来，所以会有空白区域；

在repeat情况下，contain只是空白部分会被平铺；

background-size: contain;

Day_05

01倒影

box-reflect:倒影的方向倒影与原标签之间的距离蒙版（文字或图片渐变的蒙版）

倒影方向

above 上

below 下

left 左

right 右

特点：不占用文档流位置；

webkit-box-reflect: below 50px linear-gradient(to bottom,transparent,white);

02CSS3中的变形-平移

translateX(n) 向X轴的方向平移，正值代表向右移动，负值代表向左移动；

translateY(n) 向Y轴的方向平移，正值代表向下移动，负值代表向上移动；

translateZ(n) 向Z轴的方向平移，正值代表向前移动，负值代表向后移动；（需要做3d设置）

translate(X,Y) 同时向X轴，Y轴平移；

translate3d(X,Y,Z) 同时向X轴，Y轴，Z轴平移；

transform: translateX(200px);

03CSS3中的变形-旋转

rotateX() 沿X轴旋转，正值代表顺时针旋转；

rotateY() 沿Y轴旋转，正值代表顺时针旋转；

rotateZ() 沿Z轴旋转，正值代表顺时针旋转；

rotate(X,Y) 同时沿X,Y轴旋转;

rotate3d(X,Y,Z) 同时沿X,Y,Z轴旋转；

transform: rotateZ(7200deg);

transform-origin: 0px 0px;

默认旋转点是中心点的位置,可以修改旋转点的位置

04CSS3中的变形-缩放

scaleX(n)X轴方向缩放之前的n倍；

scaleX(n)Y轴方向缩放之前的n倍；

scale(X,Y)X轴,Y轴同时缩放之前的n倍；

如果缩放比例为负数，同时翻转180度，在缩放

transform: scale(2,2);

05CSS3中的变形-倾斜

skewX(ndeg) 以X轴倾斜n度

skewY(ndeg) 以Y轴倾斜n度

skew(X,Y) 以X轴,Y轴倾斜n度

transform: skewX(60deg);

06添加3D效果

1.作用:将平面图形转换成具有透视效果3d图形,该属性只能使其子元素产生3d效果

perspective: 1000px;

2.要想实现一个3d效果,必须指定一个容器(父级标签),并设置容器本身transform-style: preserve-3d;

作用:是其后代元素具有3d效果

transform-style: preserve-3d;

Day_08弹性盒模型

弹性布局

使用弹性布局（display：fiex）之后，弹性容器元素（父级元素）内的弹性子元素

使用float，vertical-align，clear属性都会失效；

如何使用弹性布局？

概念：容器开启后弹性布局：display：flex；-弹性容器；

弹性子元素：弹性容器内的子标签元素；

主轴：所有的弹性子元素从主轴开始位置到结束位置；（默认方向是水平方向的轴）

交叉轴：与主轴是垂直居中的轴；（侧轴）

1.display: flex;

设置弹性容器(弹性伸缩容器)

弹性容器默认宽高有内容撑开,高度百分之一百-相对于父级弹性容器高度而言;

弹性子元素可以设置宽高;

弹性子元素默认横向排列,沿主轴方向排列;

2.flex-direction

该属性设置主轴的方向(弹性子元素的排列位置)

row 默认值，沿主轴（水平方向），从开始位置到结束位置排列

column 弹性子元素沿交叉轴（默认的交叉轴）上下方向，从开始位置到结束位置排列；

row-reverse 弹性子元素沿主轴左右方向，从结束位置向开始位置排列（反向）；

column-reverse 弹性子元素沿交叉轴上下方向，从结束位置向开始位置排列（反向）

flex-direction: row;

3. flex-wrap

该属性用来设置伸缩容器中的弹性子元素在排列空间不足的情况下，是否允许换行

nowrap 默认值，弹性子元素剩余空间不足的情况下，不允许换行；

wrap 默认值，弹性子元素剩余空间不足的情况下，允许换行；

wrap-reverse 弹性子元素在伸缩容器剩余空间不足的的情况选，允许换行；（反向换行）

flex-wrap: nowrap;

4. flex-flow: row wrap;

flex-flow 是 flex-direction和flex-wrap的总写

5. justify-content

设置弹性子元素在排序方向上（主轴还是交叉轴）的对齐方式

flex-start 默认值，向此时排列排列方向轴的起始位置靠齐；

flex-end 向此时排列排列方向轴的结束位置靠齐；

center 向此时排列排列方向轴的中心位置靠齐；

space-between 伸缩容器的子元素会平局分配剩余空间在此时排列轴的方向上，而且，
起始位置和结束位置两个子元素会靠边对齐，中间元素自适应剩余间距-平局很配；

space-around 伸缩容器的子元素会平局分配剩余空间在此时排列轴的方向上，而且，起始位置和结束位置
两个子元素的间距是中间元素间距的一半；

justify-content: space-around;

6. align-items

设置单行子元素在交叉轴（侧轴）方向的对齐方式；

flex-start 子元素向交叉轴的开始位置靠齐；

flex-end 子元素向交叉轴的结束位置靠齐；

center 子元素向交叉轴方向上的中心位置靠齐；

stretch 默认值，规定子元素在交叉轴上的高度，默认填满整个交叉轴的位置；前提是子元素不设置高度

baseline 设置子元素按照基线对齐，反之就是按照标签对齐；

align-items: center;

7. align-content

该属性用来设置弹性子元素再出现换行后,行与行之间的对齐方式;

首先，要保证剩余空间不足的情况下允许换行；flex-wrap：wrap；

flex-start 弹性子元素所在行，向交叉轴起始位置靠齐；

flex-end 弹性子元素所在行，向交叉轴结束位置靠齐；

center 弹性子元素所在行，向交叉轴中心位置靠齐；

space-between 弹性子元素再出现换行后，起始行和结束行向交叉轴开始位置和结束位置靠齐，中间平均分配剩余空间；

space-around 弹性子元素再出现换行后，起始行和结束行所留靠边的空间时中间行的一半；

align-content: space-around;

8.弹性子元素属性

order

该属性作用:用来设置弹性子元素的排列顺序;

order的值越小,弹性子元素越靠前;默认值为0;

flex-grow

设置弹性子元素在排列方向上分配的剩余空间比例,将分配的比例宽度大小增加为弹性子元素的宽度

align-self

单独调整每个弹性子元素在侧轴上的对齐方式。

flex-start 侧轴起点对齐。

flex-end 侧轴终点对齐。

center 侧轴居中。

stretch 默认值, 规定弹性子元素在侧轴方向上的高度, 默认填满整个侧轴, 该效果只在不设置弹性子元素高度的情况下才会出现

baseline 基线对齐。

Day_01新增标签，CSS选择器

HTML5.0中,标签语义化;

header 头部标签

nav 导航条

section 区域标签,

article 侧边栏标签,和div的作用一样的,都是做网页布局的,article 侧重于侧边栏

footer 网页的尾部

新增标签

1.meter 电池条

用于电池的剩余电量,以及游戏中剩余的血量;

value 设置电池条的默认值(当前值) 区间在min~max;

max 用来设置电池条的最大值,默认为1;

min 用来设置电池条的最小值,默认为0;

low 最低警告值;

high 最高警告值;

如果给meter设置兼容性,直接给该标签设置当前的value为该标签内容即可;

2.进度条

progress使用场景:音频,视频的播放进度,缓存进度,下载进度,手机的亮度调节

不能设置最小值,min最小值为0；

3.mark 标记;

4.上标,sup 下标 sub

5.ruby

配合 rt 对ruty的内容做解释;

rp 当前浏览器不兼容ruby时,rt时,设置的提示语

6.input新增type

week周,

ulr网址

email邮箱

date年月日

month年份

time时间

7.可选列表datalist

保证输入框的list属性和datalist的id的值保持一致-绑定

用户名：<input list="show" type="text">
   <datalist id="show">
    <option value="子扬"></option>
    <option value="天栋"></option>
    <option value="宇翔"></option>
   </datalist>

8. dudio 音频播放器

src 音频播放路径

controls 音频播放的控制菜单

autoplay 开启自动播放谷歌浏览器下不允许非用户主观意思下，自动播放

muted 静音模式

loop 开启循环播放模式

audio 支持的音频文件播放格式,mp3,wav,ogg格式

为了防止浏览器不兼容audio标签,我们对此标签做兼容性处理

方式:在audio标签内容部分,添加source标签,用来处理不同的格式的音频文件;

9. video 视频播放标签

src 音频播放路径

controls 视频播放控制菜单

autoplay 开启自动播放谷歌浏览器下不允许非用户主观意思下，自动播放

muted 静音模式

loop 开启循环播放模式

poster 设置视频未播放之前,设置的第一帧图片,视频的引导页

video 视频支持的播放格式:mp4,ogg\,webm

依然使用source做兼容

02.CSS选择器

1.属性选择器

[属性名=属性值] 解释:找到符合属性名 = 属性值的所有标签样式;

[属性名^=属性值] 解释:找到符合属性名以某某符号开头的属性值对应的标签设置样式;

[属性名$=属性值] 解释:找到符合属性名以某某符号结尾的属性值对应的标签设置样式;

[属性名*=属性值] 解释:找到符合属性名对应的值包含此字符对应的标签设置样式;

2.伪类选择器 :nth-child （）选择器

odd 奇数项

even 偶数项

A:nth-child（n）正着数，为第n个选择器对应的标签设置样式；

从0开始，可以通过n设置任何的A选择器对应的标签设置样式

B:first-child 正着数，为第一个B选择器对应的标签设样式；

C:laat-child 正着数，为最后一个C选择器对应的标签设置样式；

D：nth-last-child 倒着数，为第n个选择器对应的标签设置样式；

从0开始，可以通过n设置任何的D选择器对应的标签设置样式

3. :nth-of-type(n)

正着数，只找到满足A选择器条件的对应的标签，排除其他不同类型选择器标签（不受兄弟标签影响）

A:nth-last-of-type(n) 倒着数，为第n个选择器对应的标签设置样式；

从0开始，可以通过n设置任何的A选择器对应的标签设置样式

4. ::selection 选择器

设置鼠标选择中效果的样式:只能设置背景颜色和字体颜色

5. ::first-letter

设置选择器对应标签的第一个字符的样式;

- 块元素 -行内块元素- 浮动

6::first-line

设置选择器对应的第一行字符的样式

7. 四大伪类选择器

:link 未点击标签之前，默认的样式

:visited 点击已访问过的网页（标签），设置样式

:hover 鼠标移入该标签时，设置样式

:active 鼠标点击该标签时，设置样式

8.伪元素选择器

A:before 在A选择器对应的标签内容之前添加新的内容部分，可以当成标签使用；

B:after 在A选择器对应的标签内容之后添加新的内容部分，可以当成标签使用；

清除浮动造成的影响三:

使用伪元素：after选择器清除

.top::after{
  content: "";
  clear: both;
  display: block;
}

Day_04

01标签上下左右居中

第一种方式：定位+margin

缺点：必须获取此元素的宽高

width: 150px;
    height: 150px;
    /* 第一种方式：定位+margin
    缺点：必须获取此元素的宽高
    */
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -75px;
    margin-top: -75px;

第二种方式:定位+平移

/* 第二种方式:定位+平移 */
    position: absolute;
    /* 定位中使用到的百分比是相对于父级标签宽高的百分比 */
    left: 50%;
    top: 50%;
    /* 仿真变换中的平移的百分比是相对于该标签元素宽高的百分比 */
    transform: translate(-50%,-50%);

第三种方式：使用table及table-cell

02过度动画属性

transition: 过度属性过渡时间过度效果延时时间

all代表所有属性都支持过度，单写属性名，代表该属性设置；

注意：display：none；不支持过度属性；

过度效果

linear 匀速

ease 由快到慢

ease-in 加速过度

ease-out 减速过度

ease-in-out 先加速在减速

可以同时给不同的属性设置不同的过度效果

transition: width 1s linear,
font-size 2s,
border-radius 2s,
background-color 2s;

03线性渐变

linear-gradient 终点位置-渐变的方向，颜色1，颜色2，颜色3...颜色n

颜色必须大于等于两种；

终点位置可以使用to + 关键字 left，right，top，bottom，例如to left，to left top...

终点位置还可以设置角度值，12点钟代表0度位置，顺时针角度越来越大；（正值代表顺时针，负值代表逆时针）

只写颜色，不写位置大小，则平均分配渐变的位置空间；

颜色位置，位置可以写百分比，也可以写固定值；

background-image: linear-gradient(to right,yellow 20%,red 50%,blue 70%,pink);

04径向渐变

radial-gradient(x轴半径 Y轴半径 at 圆心位置x 圆心位置Y，颜色1，颜色2，颜色...)；

使用方式和线性渐变基本一致；

background-image: radial-gradient(300px 300px at 250px 250px,red,yellow,blue,pink);

Day_06

01流水似布局

（百分比布局）

1.子集标签宽高相对于父级标签宽高的百分比而言；

2.如果标签设置了margin或者padding中的百分比，那么此时百分比相对于父级标签的宽度百分比而言，和父级标签的高度无关；

3.如果仿真变换中的平移（translate）设置了百分比，那么此时相对于该标签的宽高百分比而言；

4.如果定位中设置了百分比，则相对于父级标签宽高而言；

02vhvw视口布局

viewport width(vw) viewport height(vh)

vh,vw 视口布局：讲窗口的宽高平均分成100等份，n vw 就是占多少等份的宽度

n vh 就是占用多少等份的高度

03双飞翼布局（圣杯布局）

左右模块固定，中间模块随着窗口的宽度改变而适应宽度

04SEO搜索引擎优化

SEO做网站排名的：

对SEO搜索引擎优化排名有用的标签：（SEO权重排名标签）

1.h1~h2一级，二级标题

2.title网站标题

3.mata中的keyworks关键字

4.meta中的description描述关键字

5.img标签中的alt属性，图片未加载成功时，设置的提示

6.a超连接

05meta中的viewport

让传统的PC网页站，能够在移动端正常显示；

1.width：当前移动端网页的宽度；

2.device-width 获取当前设备的宽度；

3.initial-scale=1 设置原始网页缩放比例倍数，1代表不缩放

4.minimum-scale=1 设置网页允许用户缩放的最小比例；

5.maximum-scale=1 设置网页允许用户缩放的最大比例；

6.user-scalable 是否允许用户缩放，yes或1代表允许，no或者0代表不允许；

06媒体查询

旋转执行符合条件的CSS样式;

一般形式：

@media mediatype and空格（条件）{
    当满足当前设备尺寸时，执行的样式；
    madiatype 设备类型，一般写成screen或者only secreen代表手机，平板，电脑设备；
   }

屏幕宽度 <= 800px 时触发的样式

@media screen and (max-width:800px){
    body{
     background-color: yellow;
    }
    .one,.two{
     width: 45%;
     border-radius: 50%;
     background-color: aqua;
    }
   }

07px,em,rem单位的区别

1.px是物理像素，1ps相当于1物理像素，固定单位；

2.em相对于父级标签中的font-size大小倍数而言，em除了font-size字体大小样式以外都是相对于该标签本身字体大小倍数而言；

3.rem 是相对于html中的font-size字体大小而言的，1rem就是html中的字体大小；

4.html中的默认字体大小是16px；

总结：响应式网站布局中，一般使用如下：

1.标签中的字体大小不使用固定值，使用相对单位（rem，em）

2.标签的宽高以及位置使用百分比布局或者rem单位布局；

3.选择性的使用CSS样式灵活处理（媒体查询），根据网页尺寸或者设备尺寸，设置不同的样式布局；

4.如果适配移动端，则使用viewport设置设备宽度，同时能够在移动端正常的显示pc端网页（也可以结合媒体查询做屏幕适配）；

Day_07移动端的适配规范

方式一：写死尺寸

@media screen and (min-width:414px) and (max-width:415px){
    html{
     font-size: 22.08px;
    }
   }
   @media screen and (min-width:768px) and (max-width:769px){
    html{
     font-size: 40.96px;
    }
   }

方式二：从小到大适配

@media screen and (min-width:414px) and (max-width:415px){
    html{
     font-size: 22.08px;
    }
   }
   @media screen and (min-width:768px) and (max-width:769px){
    html{
     font-size: 40.96px;
    }
   }

Day_09 Less语法

作为一门标记语言，CSS的语法相对简单，对开发者的要求较低，但它的弱点是需要书写大量的
看似没有逻辑可言的CSS代码，不方便后期维护以及扩展，不利于复用；

Less(Leaner Style Sheets)是一门向后兼容的CSS扩展语言；

Less的出现，为Web开发者带来了很大的便利，他是一门CSS预处理语言，引入了变量
运算，函数，继承等功能，为CSS语言赋予了动态语言的特性；

优点：less极大的简化了CSS的编写，并且降低了CSS的维护成本。就像官网中叙述的一样，less可以
让我们用更少的代码做更多的事情；

1.首先浏览器不能直接编译less语法文件，需要在html文件中link导入

2.如果我们想手动查看less文件语法编译的普通css语法，我们可以执行并命令操作，查看即可，
只是帮我们验证less语法，转换css语法是否成功；并不使用手动转换CSS文件；

方式一：

1.进入nodejs官网，下载nidejs对应版本，并安装node；（默认安装在C盘的program files文件夹下）

2.通过windows+r 输入cmd进入电脑终端命令，输入npm install -g less环境；（只要电脑安装过node以及less，后期无需再安装）

3.首先查看less文件所在的目录在那个盘，通过C： D：进入该盘，cd文件所在目录，切换到该目录下；

4.通过less命令将less文件语法转化为css文件语法；

命令：lessc less文件名.less css文件名.css

方式二：

直接less文件右键，通过HbuilderX中less插件直接编译；

less中支持声明变量 @变量名:变量值;例如:@price:9;声明了一个变量@proce里面存储了9个这个值;

我们可以这样理解,给变量当成一个容器,容器里边存储的是值;

访问变量名就是访问该变量的值;

变量名由数字,字母,下划线组成,且数字不能作为开头

@a:30px;//全局变量自上而下都可以访问

@wid:@a + 50px;//less中支持运算

#name{
@b:yellow;//局部变量-局部作用域-只能在该选择器以内访问；
color: rebeccapurple;
font-size: @a;
}

@a:50px;//变量允许重复定义- css选择器中永远是最新的值

less中Mixins混合一组属性从一个规则集合包含（或者混入）到另一个规则集的方法；

通过混合设置一套公共样式

调用混合时，在混合后边加上!important关键字表示将混合带来的所有属性标记为！important；

混合带参数默认有值的 -@w参数无接收值时，则使用默认的10px；

嵌套规则:选择器嵌套选择器,来实现样式的继承,嵌套默认实现的后代选择器

& 代表父级选择器

在less语法中,任何数字,颜色或者变量都可以参与运算,运算应该被包裹在括号中