前端小手册

小经验：

1. 图片居中：
   水平居中：img{margin：auto；display：block；}
   正中央：showimg{height:153px; width:100%;background-position:center; position:relative;}（高宽要赋值不然元素会塌陷）

2. 文字靠右：
   div{text-align：right}

3. 颜色效果变化自然与否
   过程：A的bt部分是透明灰色的，鼠标滑过A时bt上升且颜色变为透明蓝色。
   效果：当鼠标滑出由透明蓝色变回透明灰色时
   ①效果过渡突兀：前设置rgba，后设置背景图
   .A h1.bt{ background:rgba(0,0,0,0.3);}
   .A:hover h1.bt{bottom:60px;background:url(blue.png);}
   ②效果过渡平滑自然：前设置rgba，后仍设置rgba
   .A h1.bt{ background:rgba(0,0,0,0.3);}
   .A:hover h1.bt{bottom:60px;background:rgba(11, 65, 155, 0.88);}
   ③效果过渡平滑自然：前设置背景图，后仍设置背景图
   .A h1.bt{ background:url(yellow.png);}
   .A:hover h1.bt{bottom:60px;background:url(blue.png);}

3. position（定位）

适用情况：所有主流浏览器都支持 position 属性。，任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
对象：任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。

4. float（浮动）

属性值：left，right，none，inherit
注意：元素浮动之后要用clear 属性值：left，right，both，none，inherit。不然会影响后面元素的排版。
影响：
（1）自身：变为块元素。
（2）父元素：因为元素浮动之后，脱离当前正常的文档流，所以它无法撑开其父元素，造成父元素的塌陷。（高度为0）
（3-1）其兄弟元素浮动：不会无视
（3-2）其兄弟元素非浮动：
（3-2-1）如果兄弟元素为内联元素，则元素会环绕浮动元素排列。
（3-2-2）如果兄弟元素为块级元素，在现代浏览器和IE8+下，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。需要注意的是，在IE 6、7下则分别都有不同的表现，IE 6、7中，该兄弟元素会紧跟在浮动元素的右侧，并且在IE6中两者之间留有3px的空隙。这就是著名的“IE 3px bug”.
（4-1）父元素之外的浮动元素：不会无视
（4-2）父元素之外的非浮动元素：无视
（5）子元素浮动：可以撑开它，使它宽度自适应。
详见: https://www.w3cplus.com/css/float.html © w3cplus.com

5. overflow（溢出）

规定当内容溢出元素框时发生的事情。
如果overflow-x overflow-y 值相同， 则等同于 overflow，如果两者值不同，其中一个为visible 另外一个为其他值，这个visible会被重置为auto。
在ie7下内容器设置宽度百分百水平会出现滚动条

、

JavaScript	DOM	jQuery
轻量级的编程语言	HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。它独立于平台和编程语言，可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。	jQuery是js的一个函数库，$()实际就是一个函数
-	对象	-
内置对象：String、Date、Array	document.getElementById(“id1”)；	$("#id1")
通过js获取的DOM对象就是js对象	使用js操作DOM返回的结果。当浏览器支持js的dom接口(api)时，这里狭义的dom对象是以js对象的形式出现的	通过jQuery包装DOM对象后产生的对象。属于js的数组。
-	jQuery对象不能使用DOM对象的方法和属性；DOM对象不能使用jQuery对象的方法和属性	-
-	DOM对象 = jQuery对象.[inex] 或者 DOM对象 = jQuery对象.get(index)	jQuery对象 = $(DOM对象)
	innerHTML ; getAttribute(“src”) ; setAttribute(‘src’,src1) ;	text() ; html() ; val() ; attr(“src”) ; attr(‘src’ , src1)
	DOM文档加载步骤：1、解析HTML结构 2、加载外部的脚本和样式文件 3、解析并执行脚本代码 4、执行$(function(){})内对应代码 5、加载图片等二进制资源 6、页面加载完毕，执行window.onload
onload、load事件必须等到网页中所有内容全部加载完毕之后才被执行。onload如果有多个定义则只执行最后一个。load会执行多个。		ready事件在DOM结构（html标签）绘制完成之后就会执行。如果有多个定义则依次执行。
window.οnlοad=function(){} 和 document.getElementById(“imgID”).οnlοad=function(){}		$(document).ready(function(){}) 和 $().ready(function(){}) 和 $(function(){})
		最完整的写法是：$(document).ready(function(){})，ready()函数仅能用于当前文档，因此无需选择器。所以document选择器可以不要，那么就可以写成 $().ready(function(){}) 最后 $ 的默认事件就是ready，所以，ready也可以省略，写成 $(function(){});

CSS3选择器

xpath选择器

https://www.w3school.com.cn/xpath/xpath_syntax.asp