css+html+dom+bom知识整理

1.Bom对象

1.1 windows

open() 打开一个新浏览器窗口 
alert() 显示警告框 
close() 关闭当前浏览器窗口 
scrollTo() 可把内容滑动到指定坐标 
scrollBy() 可将内容滑动指定的距离（相对于当前位置）
innerWidth 返回窗口的网页显示区域宽度
innerHeight 返回窗口的网页显示区域高度

1.2 location

href 返回当前完整网址
host 返回主机名和端口号，通常指完整域名
protocol 返回网址协议
port 返回端口号
pathname 返回网址路径部分
search 返回网址中的?及?后的字符串（查询部分），通常指查询参数
hash 返回网址中的#及#后的字符串，通常指锚点名称
assign(url) 在当前页面打开指定新 url（增加浏览记录）
reload() 重新加载当前页面
replace(url) 打开新url 替换当前页面（替换当前浏览记录） 

1.3 history 对象

back() 返回历史记录的上一个 url history.back()
forward() 返回历史记录的下一个 url history.back()
go(n) 返回相对于当前记录的第 n 个 url
n>0，表前进；n<0，表后退;
n=0，刷新当前页
history.go(-1)
history.go(1)

1.4 navigator 对象

platform 返回操作系统类型
userAgent 返回用户代理头的值

1.5 screen 对象

availWidth 返回屏幕的宽度（不包括 windows 任务栏)
availHeight 返回屏幕的高度（不包括 windows 任务栏）
width 返回屏幕的总宽度
height 返回屏幕的总高度

2.Bom-定时器

2.1定时器方法

setTimeout() 指定的毫秒数后调用函数或计算表达式 
clearTimeout()  //清除定时
setInterval()按照指定的周期（毫秒）来调用函数或计算表达式
clearInterval()  // 清除周期定时

3.Css

3.1导入方法

外链样式：

在 HTML 初始化时，@import()导入的 CSS 会被直接导入到 HTML 或 CSS 文件中，

3.2背景属性

background-color   颜色值，如 rgb，rgba，十六进制  表示等，设置为 transparent 表示背景透明 设置背景颜色
background-image url( filepath ) 或 none 设置背景图
background-size 宽高、百分比宽高、contain、cover 设置背景图片尺寸
background-repeat repeat/ repeat-x/ repeat-y 设置背景图片重复方式
background-position top left/ top center/ center 等 设置背景图片的位置

background-size 属性
contain
保持图片纵横比例缩放背景图片，使背景图片能够在背景区域完全显示
有可能出现图片无法完全覆盖背景区域
cover
保持图片纵横比不变，最大程度覆盖背景区域
有可能导致背景图片部分区域无法显示
background-repeat
repeat（默认）
允许水平和垂直方向重复（平铺）背景图片
repeat-x
只允许水平方向重复（平铺）背景图片
repeat-y
只允许垂直方向重复（平铺）背景图片

3.3文本属性

color 属性
用于设置文本的颜色，可设置的值有：
颜色名，如【red】
十六进制值，如【#FFFFFF】
RGB 值，如【rgb(255, 0, 0)】
rgba 值，如【rgba(255, 0, 0)]

font-size 属性
用于设置文本字体大小，可以设置为绝对大小，单位为 px，也可设置为相对大小，单
位为 rem、em 等
字体大小未设置时默认字体大小为 16p

font-weight 属性
normal 标准字符（默认）
bold 粗体字符
bolder 更粗的字符
lighter 更细的字符
100、200、300、400、500、600、700、800、900
400 相当于 normal
700 相当于 bold
数值越大字体越粗

font-family 属性

用于规定文本使用的字体名或字体族名列表，字体名在列表越往前优先级越高。如果浏
览器不支持第一个字体，则会尝试下一个，以此类推

text-align 属性

用于设置文本的水平对齐方式，可设置的值有：center（居中对齐）、left（左对齐）、right（右对齐）
文本方向是从左到右则默认左对齐，文本方向是从右至左则默认右对齐

line-height属性

用于设置行间距，可设置的值如下
数字：行间距为当前字体大小乘此数字
固定值：设置固定的行间距，如 20px
百分比：行间距为当前字体大小乘百分比

text-indent属性

用于指定首行缩进值，可设置的值如下
固定值：设置固定首行缩进，如 20px
百分比：首行缩进值为父元素宽度乘此百分比

letter-spacing属性

用于设置字间距，设置固定值为字间距，如 10px

word-spacing属性

用于指定文本中单词之间的间距，设置固定值为单词间距，如 10px

text-decoration属性

text-decoration-line          设置要使用哪种文本装饰的类型（下划线、上划线、删除线）
none 无线条
underline 下划线
overline 上划线
line-through 删除线
text-decoration-color 颜色名、十六进制颜色、rgb 等 设置装饰线颜色
text-decoration-style  设置装饰线的样式
solid 实线
double 双实线
dotted 点划线
dashed 虚线
wavy 波浪

text-transform属性

用于设置文本大小写字母，常用属性如下
uppercase：全部文本均为大写字母
lowercase：全部文本均为小写字母
capitalize：文本的每个单词首字母为大写字母

writing-mode属性

horizontal-tb：文本流在水平方向从上到下排列，文字方向为水平方向
sideways-lr：文本流在垂直方向，从下至上、从左至右排列
sideways-rl：文本流在垂直方向，从上至下、从右至左排列
vertical-lr：文本流在垂直方向，从上至下、从左至右排列，文字方向为水平方向
vertical-rl：文本流在垂直方向，从上至下、从右至左排列，文字方向为水平方向，跟古诗阅读顺序一致

white-space属性

normal 合并空格，换行符转化为一个空格，允许自动换行
nowrap 合并空格，换行符转化为一个空格，不允许自动换行
pre 保留空格，保留换行符，不允许自动换行
pre-line 合并空格，保留换行符，允许自动换行
pre-wrap 保留空格，保留换行符，允许自动换行
break-spaces保留空格，保留换行符，允许自动换行，行尾空格保留，空白符占用空间

3.4选择器

后代选择器 空格 选取该元素的后代元素
子代选择器 > 大于号 选择该元素的第一级子元素
相邻选择器 + 加号
选择该元素之后相邻第一个元素，且两者具有相
同的父元素
兄弟选择器 ~ 波浪号 选择该元素之后的同层级元

3.5伪类选择器

:hover 用于设置鼠标悬停在元素上方时的样式
:focus 用于设置元素获得焦点时的样式
:active 用于设置元素被激活时（按下按键时、松开按键时）
:link 用于设置元素点击之前的样式（仅可用于 a 标签）
:visited 用于设置被访问的元素的样式（仅可用于 a 标签）
:first-child用于选取属于其父元素的第一个子元素，且满足冒号前的基础选择器选取要求
:first-of-type 用于选取属于其父元素的第一个特定类型的子元素
:last-child用于选取属于其父元素的最后一个子元素且满足基础选择器选取要求
:last-of-type 用于选取属于其父元素的最后一个特定类型的子元素
:nth-child(N)选择匹配属于其父元素的第 N 个子元素且满足基础选择器选取要求，N 可以为数字、关键字（odd / even）、公式（如：2n+1）
:nth-of-type(N)选择匹配属于其父元素的第 N 个指定类型的子元素，N 可以为数字、关键字（odd / even）、式
:nth-last-child(N)选择匹配属于其父元素的第 N 个子元素且满足基础选择器选取要求，从最后一个子元素开始数N 可以为数字、关键字（odd / even）、公式
:nth-last-of-type(N)选择匹配属于其父元素的第 N 个指定类型的子元素，从最后一个子元素开始计数，N 可以为数字、关键字

3.6伪元素选择器

::after
用于创建伪元素，在元素内容之后插入内容，
该伪元素默认为行内元素
p::after {
content: ＂结束＂;
}
::before 用于创建伪元素，在元素内容之前插入内容， p::before{content: ＂开始＂;
}  该伪元素默认为行内元素
::first-line
向文本的首行添加样式，只能应用于块级元
素
p::first-line {
color: #333;
}
::first-letter
向文本的首字母添加样式，只能应用于块级元素
p::first-letter {
font-size: 16px;
}
::marker用于改变 li 元素的数字或符号的样式，只能作用于 display 属性值为【list-item】的元素
ul li::marker {
content: '*';
}
::placeholder 用于设置表单元素占位符文本的样式
input::placeholder {
color: blue;
}

3.7css优先级

内联样式 1000
ID 选择器 100
类选择器、属性选择器、伪类选择器 10
标签选择器、伪元素选择器 1
相邻选择符、子代选择符、兄弟选择符、后代选择符 0
当你在一个样式声明中使用【!important】规则时，这个样式将覆盖其他的任何声明
!important 规则与优先级无关，但是会直接影响样式的最终显示结果

3.8盒子模型

【box-sizing：content-box】
标准盒模型的盒子实际宽高 = 内容区域的宽高 + border 大小 + padding 大小
在标准盒模型中，给盒模型设置【width】和【height】，实际上是给内容区域设置大小


怪异盒子box-sizing：border-box
在怪异盒模型中，给盒模型设置的【width】和【height】就是盒模型的实际大小，宽
高已经包含了【border】和【padding】

3.9定位

position 属性用于指定元素的定位类型，属性值可为
static（默认定位）
relative（相对定位）
absolute（绝对定位）
fixed（固定定位）
sticky（粘性定位）
设置定位类型后可以通过设置 top、right、bottom、left 属性确定定位的位置

3.1.0浮动

float:
none 默认值，元素不浮动
left 元素左浮动
right 元素右浮动

clear:
none 默认值，元素不浮动
left 清除左浮动
right 清除右浮动
both 清除左右两侧浮动

4.Dom

getElementById() 获取带有指定 id 的节点
getElementsByTagName() 获取带有指定标签名的节点集合
querySelector() 获取指定选择器或选择器组匹配的第一个节点
querySelectorAll() 获取指定选择器或选择器组匹配的所有节点集合

innerHTML 返回元素内包含的所有 HTML 内容（文本和标签），类型为字符串
parentNode 返回指定节点的父节点
children 返回指定元素的子元素节点集合
firstElementChild 返回指定元素的第一个子元素节点
lastElementChild 返回指定元素的最后一个子元素节点

## Dom修改
innerHTML
innerHTML 除了获取元素内容，也可通过赋值用于修改元
素中内容。如果修改内容中包含 html 字符串会被解析成html 元
setAttribute(name,value)
设置指定元素上的某个属性值。如果属性已经存在，则更
新该值；否则，使用指定的名称和值添加一个新的属性

## Dom增加
createElement(tagName)
创建一个由标签名称 tagName 指定的 HTML元素
appendChild(node)
将一个节点插入到指定父节点的子节点列表的
末尾处
insertAdjacentHTML(position, text)
将指定文本解析为 HTML 字符串，插入到指定
位置

## Dom删除
removeChild(child) 删除选定的子节点，需要指定其父元素
remove() 删除选定节点（IE 不友好

Dom插入位置

position（内容相对当前元素位置）： ‘beforebegin’：元素自身的前面 ‘afterbegin’：插入元素内部的第一个子节点之前 ‘beforeend’：插入元素内部的最后一个子节点之后 ‘afterend’：元素自身的后面

classList

add(class1, class2, …) 添加一个或多个类名 
remove(class1, class2, …) 移除一个或多个类名 
replace(oldClass, newClass) 替换类名 
contains(class) 判定类名是否存在，返回布尔值 
toggle(class, true|false) 如果类名存在，则移除它，否则添加它， 第二个参数代表无论类名是否存在，强制 添加（true）或删除（false）

5.结点写入

innerHTML 返回元素中的 html 内容，通过赋值，可设置元素中的 html 内容
innerText 返回元素中的文本内容，通过赋值，可设置元素中的文本内容
document.write() 将 html 字符串写入到文档

6.事件基础

事件绑定的方式：
     1 方式一：行内事件属性赋值
           <button onclick="alert('行内事件属性赋值')">点击按钮</button>
     方式二：事件属性赋值
           var btn = document.querySelector('button');
           btn.onclick = function() {
           alert('事件属性赋值')
           }
     方式三：事件监听
           addEventListener(type, listener, useCapture)
           type: 事件类型
           listener: 监听器（处理程序）
           useCapture: 默认为 false，设置为 true 时，不会因冒泡触发监听器

7.鼠标事件

click 单击鼠标左键触发。焦点在按钮并按了 Enter 键时，也会触发
contextmenu 右键点击（右键菜单显示前触发）
dblclick 双击左键触发
mouseenter 指针移至元素范围内触发一次
mouseleave 指针移出元素范围外触发一次
mouseover 指针移至元素或其子元素内，可能触发多次
mouseout 指针移出元素，或者移至其子元素内，可能触发多次

8.键盘事件

keydown 按下任意按键，按住可连续触发
keypress
按下按键（包括字母，文字和 Enter）触发，按住可连续触发，不
能监听一些特殊按键（ALT、CTRL、SHIFT、ESC、方向键等）
keyup 释放任意按键

使用时注意触发顺序（keydown->keypress->keyup），不同的键盘事件触发时机不
同，返回的结果有区别


keyCode
keyCode 属性返回 keypress 事件触发的键的值的字符代码，或者
keydown 或 keyup 事件的键盘代码。
- 字符代码 - 表示 ASCII 字符的数字
- 键盘代码 - 表示键盘上真实键的数字
charCode
返回 keypress 事件触发时按下的字符键的字符 Unicode 值，用于
keydown 或 keyup 时总是返回 0
key
返回按键的标识符(字母区分大小写)。keypress，keyup，keydown
返回值相同

9.窗口事件

load
当整个页面及所有依赖资源（如样式表和图片）都已完成加载时，将触发 load 事件
beforeunload window、document 和它们的资源即将卸载时触发。当事件属性
returnValue 被赋值为非空字符串时，会弹出一个对话框，让用户确
认是否离开页面（示例如下）。否则，事件被静默处理。
resize 窗口大小改变时触发
scroll 元素内发生滚动时触发