html+css基础知识体系思维导图模板_ProcessOn思维导图、流程图

HTML5

补充：媒体操作

元素内容编辑

contenteditable="true"

document.designMode = "on"

拖拽

拖拽元素

设置了 draggable="true"，不能省略 ="true"

事件

dragstart

event.dataTransfer.setData(key,value)

dragleave

drag

dragend

目标元素

与拖拽元素有交互的元素

事件

dragenter

dragleave

dragover

阻止默认事件，让drop可以执行

drop

event.dataTransfer.getData(key)

存储

localStroage

1. 同源共享

2. 除非用户删除，否则一直存在

sessionStorage

1. 每个页面有自己的存储

2. 关闭页面，存储内容清空

方法

.setItem(key, value)

.getItem(key)

.removeItem(key)

.clear()

.length + .key(index)

获取所有存储内容

注意

1. 存储内容下标不以存储顺序论

2. 存储引用类型需要借助 JSON 保全格式

全屏

开启

ele.requestFullscreen()

关闭

document.exitFullscreen()

判断

document.fullscreen

存在兼容

样式伪类

:fullscreen

:-webkit-full-screen

元素到可视区域的距离

ele.getBoundingClientRect()

top/left

width/height

offsetWidth/Height

bottom/right

CSS3

计算长度

calc(数学表达式)

运算符之间要加空格

带单位的只能相加减

单位与数字之间只能相乘除

遵循数学运算优先级

变量

声明

--变量名: CSS值

使用

var(--变量名, 默认值)

默认值仅在变量不存在或者值为 initial 时生效

通过JS操作

ele.style.getPropertyValue("变量名")

getComputedStyle(ele, null).getPropertyValue("变量名")

ele.style.setProperty("变量名", 值)

ele:not()

选择不符合条件的xx

动画属性

通过 @keyframes 定义动画序列

百分比设置动画节点

起点可以写为 from，终点可以写为 to

动画节点可以重复书写

可以同时书写多个动画节点的样式，以逗号隔开

动画节点的顺序可以打乱

通过animation样式添加动画

样式 animation-*

name

duration

timing-function

delay

iteration-count

direction

normal

reverse

alternate

alternate-reverse

fill-mode

 backwards

both

play-state

paused

running

帧动画

将 timing-function 改为 steps(n)

实现鲨鱼效果、表效果....

Flex

弹性容器布局

弹性容器

设置了 display: flex/inline-flex; 样式的元素，效果类似于 block

样式

justify-content

控制弹性元素在主轴的排列方式

flex-start

默认

center

flex-end

space-around

spac-between

space-evenly

align-items

控制单行弹性元素在交叉轴的排列方式

flex-start

默认

flex-end

center

baseline

stretch

flex-wrap

控制弹性元素是否主轴空间不足时是否可以换行

nowrap

默认

wrap

align-content

设置交叉轴多行内容的排列方式

flex-start

center

flex-end

space-around

space-between

space-evenly

flex-direction

设置主轴的起点方向

row

row-reverse

column

column-reverse

flex-flow

flex-wrap flex-direction 的简写形式，位置可以更换

弹性元素

弹性容器的直接子元素，也可以设置为弹性容器，效果类似于 float

order

0

默认

调节元素顺序，值越小，排列越靠前

align-self

单独设置弹性元素自身的交叉轴排列方式，权重高于父元素设置

值与align-items一致

flex-grow

0

默认

弹性元素在容器主轴有剩余空间时，占据剩余空间的比例

flex-shrink

1

默认

弹性元素在主轴空间不足时，自身缩小的比例

flex-basis

auto

默认

设置弹性元素占据的主轴空间大小，权重高于 width/height 设置

flex

flex-grow flex-shrink flex-basis 三者的简写

可以写为一个值

auto

表示为：1 1 auto

none

表示为：0 0 auto

9

表示为：9 1 0%

10%

表示为：1 1 10%

4 50px

表示为：4 1 50px

HTML

超文本标记语言,依赖于浏览器运行

标签分类

块级标签

段落标签 p

标题标签

div 标签

列表标签

表格标签

行内标签

a 超链接

span

文本标签

行内块标签

img

button

input

头部功能标签

标签语法

标签属性

标签关系

表单 form

input

type:text

type:password

type:radio

type:checkbox

type:file

type:submit

下拉选择: select > option

多行文本text-area

label

for属性实现和某个控件的绑定

提示信息

method

post

通常用于提交数据

get

通常用于获取数据

难点

name属性/value属性的理解

语义化标签

article

header/footer

section

nav

表单新增input

type:tel

type:email

type:number

type:range

type:color

type:date

type:url

表单新增控件

data-list

meter

progress

表单新增属性

checked/selected

disabled

readonly

required

tabindex

autocomplete

音视频

audio

video

controls音视频控件属性

CSS

样式规则

选择器

简单选择器

标签选择器

class选择器(.)

id选择器(#)

属性选择器([])

组合选择器

后代选择器

交集选择器

并集选择器

子代选择器

兄弟选择器

书写位置

行内样式

内联样式

外联样式

三大特性

继承性

层叠性

优先级

字体系列

font-family

font-size

font-weight

font-style

文本系列

text-align

line-height

color

text-indent

显示和隐藏

display

visibility

overflow

文本溢出省略

vertical-align

middle/baseline/top/bottom/具体像素

设置行内块(图片)与文本的对齐方式

解决图片下方的间隙

background背景

background-color

background-image

background-repeat

background-position

background-attachment

background-size

CSS-Sprite

将多个图标合并到一张图片里边,目的是为了减少服务器请求次数

通过调整背景图片位置,显示相应的图标

CSS布局

盒子模型

content

内容区,由宽高设置

padding

内边距,内容区与边框之间的间距

border

边框

margin

外边距,标签与标签之间的间距

设置方法

一个值: 上下左右同时设置

两个值: 代表上下/左右

三个值: 代表上/左右/下

四个值: 代表上/右/下/左

也可以单独设置某个方向上的margin/padding/border

盒子大小

盒子大小: content+padding+border

显示模式display

块级元素:block

设置宽高,无法同行展示

行内元素:inline

设置宽高无效,同行展示,放不下才换行

行内块元素: inline-block

介于两者之间,可以设置宽高,可以同行展示

注意

浮动float

float

left;左浮动

right;右浮动

none;

可以解决块级元素同行展示的问题

元素浮动之后,默认会变为行内块的表现形式

元素浮动之后,会从父元素的边界开始同行排列,放不下换行,无法浮动到父元素之外

建议:元素在父元素当中浮动之后,其余兄弟元素最好也浮动(或者定位)

元素浮动之后无法在撑起父元素的高度,有可能会造成父元素高度塌陷

解决高度塌陷,清除浮动带来的影响

定位position

position

开启定位之后,需要通过left/right/top/bottom进行位置的描述

static; 默认(不定位)

relative; 相对定位

不改变元素本身的表现特性

参照物: 元素自身的位置

absolute; 绝对定位

元素特性改变

不设置宽度时,宽度由内容撑开

脱离文档流,不在占据位置

参照物

距离自己最近的具有定位属性的父元素

如果层层向上查找,没有符合规则的,就以html为参照物

子绝父相

fixed; 固定定位

元素特性改变

不设置宽度时,宽度由内容撑开

脱离文档流,不再占据位置

参照物

浏览器视口,不会随着网页滚动

z-index

开启定位之后,可以通过设置z-index属性,调整元素的层叠顺序

使用技巧

定位时,先想清楚要以谁作为参照物,从而选择相应的属性