html，不同浏览器上显示不一样_百度知道
html，不同浏览器上显示不一样
360上显示正常：
&div id=&sidebar&
class=&widget-area&&
&aside id=&search-2& class=&widget widget_search&&&h3 class=&widget-title&&&i class=&icon-st&&&/i&搜索&/h3&&div id=&searchbar&&
&form method=&get& id=&searchfo...
问题在这个网站：
我有更好的答案
【原因】浏览器对代码的翻译的方法不同，就会导致显示的不一致【解决方法】在不同的浏览器进行调整，对不同的浏览器使用一些不同的代码开发网站时候，使用一些CSS hack之类的，可以避免一些
为您推荐：
其他类似问题
浏览器的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。柴油发电机
汽油发电机
风力发电机
汽车发电机
小型发电机
中国发电机网
广东发电机
18,300,000
陕西柯蓝电子
泰豪科技股份有限公司
中国微电机网
北京发电机
37,100,000
北京泰豪科技
收录 / 索引信息
中国发电机网
一般不超过80字符
网站关键词
中国发电机网,发电机,发电机组,柴油发电机,汽油发电机,风力发电机,,汽车发电机,小型发电机
一般不超过100字符
107 个字符
中国发电机网是发电机行业第一门户网站,为您提供海量发电机组,柴油发电机,汽油发电机,风力发电机,,汽车发电机,小型发电机供求信息,中国发电机网现已入驻多家发电机品牌企业,是发电机企业寻求电子商务、网络营销的首选平台
一般不超过200字符
同主机安全
虚假或欺诈网站
挂马或恶意网站
未存在违规内容
alexa排名趋势
服务器信息
服务器类型
源文件大小
压缩后大小
最后修改时间
关闭关闭关闭Flex 布局教程：语法篇 - 阮一峰的网络日志
Flex 布局教程：语法篇
网页布局（layout）是 CSS 的一个重点应用。
布局的传统解决方案，基于，依赖
属性 + 属性 + 属性。它对于那些特殊布局非常不方便，比如，就不容易实现。
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
Flex 布局将成为未来布局的首选方案。本文介绍它的语法，给出常见布局的 Flex 写法。网友
为本文的所有示例制作了 ，也可以参考。
以下内容主要参考了下面两篇文章： 和 。
一、Flex 布局是什么？
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
行内元素也可以使用 Flex 布局。
display: inline-
Webkit 内核的浏览器，必须加上-webkit前缀。
display: -webkit- /* Safari */
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
二、基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
三、容器的属性
以下6个属性设置在容器上。
flex-direction
justify-content
align-items
align-content
3.1 flex-direction属性
flex-direction属性决定主轴的方向（即项目的排列方向）。
flex-direction: row | row-reverse | column | column-
它可能有4个值。
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
3.2 flex-wrap属性
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-wrap: nowrap | wrap | wrap-
它可能取三个值。
（1）nowrap（默认）：不换行。
（2）wrap：换行，第一行在上方。
（3）wrap-reverse：换行，第一行在下方。
3.3 flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow: &flex-direction& || &flex-wrap&;
3.4 justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-
它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
3.5 align-items属性
align-items属性定义项目在交叉轴上如何对齐。
align-items: flex-start | flex-end | center | baseline |
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
3.6 align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around |
该属性可能取6个值。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
四、项目的属性
以下6个属性设置在项目上。
flex-shrink
flex-basis
align-self
4.1 order属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
order: &integer&;
4.2 flex-grow属性
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-grow: &number&; /* default 0 */
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
4.3 flex-shrink属性
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-shrink: &number&; /* default 1 */
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
4.4 flex-basis属性
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex-basis: &length& | /* default auto */
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
4.5 flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
flex: none | [ &'flex-grow'& &'flex-shrink'&? || &'flex-basis'& ]
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
4.6 align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline |
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
Systemd 作为 Linux 的系统启动器，功能强大。
HTTP/2 协议的主要目的是提高网页性能。
春节前，我看到 Nginx 加入了 HTTP/2 的 server push 功能，就很想试一下。
Docker 是一个容器工具，提供虚拟环境。很多人认为，它改变了我们对软件的认识。前端总结的学习笔记
时间： 15:31:29
&&&& 阅读：193
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&&
当用li标签包裹住a标签，鼠标经过，让其它元素显示时。要写li:hover &&div{各种样式}而不能写ul li &a:hover &div{各种样式}
事件代理：为后来添加的元素添加上事件，优化引擎
—&Gecko内核　　& css前缀为"-moz-"　　&火狐浏览器&
—&Presto内核&　　&css前缀为"-o-"&&&&&&&&&&&& Opera(欧朋)
—&Trident内核　　css前缀为"-ms-"&&&&&&&&&& IE
—&WebKit内核　　css前缀为“-webkit- &&&safari &chrome
改变placeholder颜色input::-webkit-input-placeholder&{&color:}
DIV+CSS布局部分
将span变为三角形
display: inline-
border-top:4px solid #676767;
border-right:4
border-bottom:4
border-left:4
让一个元素上下左右居中 &&
盒子居中：
&&垂直居中：top：50%；margin-top：盒子高度的一半的负值水平居中：left：50%；margin-left：盒子宽度的一半的负值
文字居中：
Text-align:center &&&&垂直：line-height：
通栏显示{页面背景&头部&导航&底部}
有通栏的全局变量body中不声明宽度，下面的每个部分单独声明，没有通栏的直接body声明，省得下面单独定义麻烦
通栏的时候里面再套一个div &然后外面的div定义背景颜色边框等。里面的div用width：980和margin：0 auto；限制居中显示
一般头部加上h1写上网站的名字是为了利于搜索引擎的搜索，然后用text-indent：-9999让这个文字不显示
导航栏制作时[文字不一样多] &当鼠标放上去只改变文字颜色时：给li修饰用margin-left：20px；margin-right:20就可以
当鼠标放上导航栏的背景还要变化，以及有小竖线时。给a修饰用padding-left和padding-right,且a元素写上display:block；转化成块状元素使a的宽度继承父级宽度，背景填充，但是当有背景图片小竖条时。给a加上背景小竖条。并且a:hover的background加上背景颜色时，也要再加上背景图片的小竖条才能不覆盖
进行浮动的元素设置宽度
有子元素且子元素加了高度，父元素没有设置高度，子元素浮动了，就会出现高度的塌陷，所有父元素最好加上高度
定位（position）改变元素的位置（脱离了文档流）
Position：static(静态的，不变，和没写一样)
Position:relative(相对定位) &&&
原来的位置保留&&相对自己的位置变化
Position:absolute（绝对定位）
不保留原来的位置，相对于父元素进行改变，但是父元素必须加上相对定位，父元素没加相对或者没加父元素时相对于body改变
Position:fixed(固定定位)
相对于浏览器进行改变，&用相对定位时放在页面的最开头或者最结尾，这个是对联广告，总是漂浮在两边那种
Z-index：0 30 8 98 &&谁的值越大越在上面显示
元素的分类（display）
Block 块级元素的默认显示方式
Inline行内元素的默认显示方式
Inline-block 行内块级元素&&&&常见的有img &&input &&select &&textarea
Display:none隐藏后不占空间&visibility:hidden这个也是隐藏，但是隐藏后占空间
&Opacity：0.8透明度
导航里面的li用display:inline-block （最好用这个，不用浮动）&来布局的时候，li之间会有4像素的空隙，减小这个空隙的办法是先设置ul的font-size:0;然后在下面的li里面设置font –size：？px；就可以了
使用服务器字体及阴影
在样式中首先引入@font-face{font-family: src:url(“http://www.baidu.com/ziti”)}然后需要的标签写上h1{ font-family: }
给字加阴影：Text-shadow:阴影的水平偏移（正直往左，负值往右）；&垂直偏移&（正直往下，负值往下）&；阴影的模糊度；&阴影的颜色；可以添加多个阴影用逗号隔开
Text-shadow:2px 3px 3px red, -2px -3px 3 &如果浏览器不识别，加上浏览器标志
text-shadow: 0&0&90px&#fff, 0&0&40px&#fff, 0&0&10px&#
-webkit-text-shadow：
给盒子加阴影：box-shadow：
第一个值：水平方向的偏移
第二个值;垂直方向的偏移
第三个值：模糊大小
第四个值：阴影的大小
第五个值：阴影的颜色
第六个值：不写的话是外阴影，&写的话就是写inset &内阴影；
无论是字体还是盒子，前两个值不能省略
Box- shadow ：3px 4px 10px yellow&inset；也可以加逗号再加&&&&【一般写四个值就行，水平、垂直、模糊程度、颜色】
Text-overflow属性【文字溢出怎么处理】:ellipsis &省略号形式显示|clip（裁剪掉）
Overfllow: &浏览器自动索引，就是宽高显示不开，浏览器就加上纵向滚动条
Overfllow：多余的部分进行隐藏
Overfllow： &浏览器加上横向和纵向的滚动条
如果只加上横向的【高度去掉，加上overfllow-x:scroll 不过很少用】;
&white-space:nowrap让文字不换号
[给标题加省略号]
overflow：hidden；&white-space：nowrap；&text-overflow:ellipsis；width:400
CSS新增背景属性
背景线性渐变颜色
background-image:linear-gradient(方向，颜色，颜色，颜色……)
background–image:linear-gradient(to top，red，yellow) ；&&从下往上由红变黄
background-clip：border-box默认值从边框开始裁剪，看不出效果
content-box从内容区域开始裁切，有padding的间距没有背景
padding-box从有内填充的地方开始裁剪，就是padding的间距也填充了背景&&
背景图像起始位置
Background-origin &与background-position配合使用
—&border-box:以边框为原点开始计算background-position
—&，边框地下
—&padding-box:默认值 background-position，紧临着边框为原点计算position。
—&content-box:以内容盒子为原点开始计算background-position ，把padding的间距空开为原点；
控制背景图像的大小
Background-size：25px &25px &【横向和纵向，也可以写成百分比】
值Cover，将背景图像等比缩放到完全覆盖容器，但是有可能超出容器
值Contain，将背景图像等比缩放到宽度或者高度与容器的宽度或者高度相等，但是背景图像始终包含在容器之内
写多个背景图像
Background：url（），url（），url（）……
Background：url(../images/pic1.jpg) no-repeat &left &top，url(../images/pic2.jpg) &no-repeat &right &
CSSsprites雪碧图技术（css精灵）
用软件生成一张图片，会自动告诉你坐标，自己量的时候，是整张雪碧图的左上角是坐标00 &&到想用的图标的左上角&&&写XY &但是都是负值写到background：url(./img/icon.jpg) &&norepate &&-X px &-Y &&然后让这个小图标在里面居中就是加上距离边的正值，比方说x是55 &&y是55 &取到的图片是-55px -55px &然后居中比方说在想放的盒子里距离左边是8距离上面是10 才会居中，所以X轴坐标变为-55+8=-47px &&而Y轴坐标变为-55+10=-45px；注意的一点就是在大图标定位到这个想要小图标时候都是负值，然后加上需要显示位置的正值得到最终位置坐标
PC端的布局形式：
固定宽度且居中
自适应宽度（浮动&、定位）
如果左中右三个浮动的div（也叫双飞翼布局）&&然后把center写在div的最前面便于显示；
center：float:left &, height:400width:100%; &&&padding:0 200 &box-sizing:border-
&left:float: width:200 &&position: &margin-left:-100%;
&right: left:float: width:200 position: &margin-left:-200
移动端布局形式：
弹性盒布局（梳理）
1.谁是弹性盒，谁写（一般是父元素）Display:box &&&如果不兼容写：display:-moz-box
&&Display:-webkit-
&&Display:-o-
Display:-ms-
2.父元素决定子元素的排列方向&box-orient：horizontal（水平&&默认的）
Vertical(垂直排列、纵向)
3.父元素决定子元素的显示顺序&box-direction ：reverse（倒序）
4．依然给父元素设置，父元素决定子元素的对齐方式：
水平对其：box-pack:start center end &&&(左中右)
垂直对齐：box-align：&start center end &&&(上中下)
以上四个都是写给父元素的。
5.子元素设置分配空间
Box-flex：1 2 3 4 &写的数字越大，占空间越大
6.子元素位置的改变：box-ordinal-group:1 2 3 4写数值，很少用
&meta name=”viewport” &content=”width=device-width,initial-scale=1.0”
第三个是初始化缩放，1.0 &就是禁止缩放
第二个值是宽度等于设备宽度
第一个是虚拟窗口意思，就是模拟手机等设备
&meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&
当http-equiv="X-UA-Compatible"这句话是遇上IE8的时候以后面最新版本的IE渲染
IE=edge &&&以最新版本IE显示&chrome=1 &而当机器上安装的IE没法渲染就用谷歌浏览器的内核进行渲染
弹性盒子手机布局
分为上中下三个部分，山下给固定的高度45px或者44px ，然后让中间.main部分加上box-flex:1；也就是让剩余的空间全部给中间；【保证html &body 最外层的父亲宽高都是100%】
弹性盒布局(懂懂)
给父元素加的属性:
首先，父元素加上一个display:&让其变成弹性盒&此时,其子元素会默认横向排列起来，类似浮动的效果
属性1：flex-direction:(决定子项在flex容器中的位置)
flex-direction:&&&从上到下排列,从父级上面开始[即纵向从上往下排列（顶对齐）]
flex-direction:&column-&&从下到上排列（ 最后一个元素在最前面）并且从父级底下开始
flex-direction:&(默认值) 即横向从左到右排列（左对齐）
flex-direction:&row-&对齐方式与row相反
属性2：flex-wrap:(规定子项是否换行)
flex-wrap:&/*默认样式，超出不换号，自己平均缩小*/
flex-wrap:&flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap- 超出部分换行，并且反向&仅仅是行反转，单个子元素不变
&属性3 &flex-flow：/*这个属性是direction 和wrap的复合属性*/
属性4 &justify-content&&【默认值flex-start&】
justify-content:flex- /*子元素左对齐*/
justify-content:flex- /*子元素右对齐*/
justify-content:& /*子元素居中对齐*/
justify-content:&space-/*//平均分布&两边会有间距*/
justify-content:&space-&&/*两边对齐中间平均分布【两边靠边了，中间的平分】*/
属性5 &align-content:&flex- 本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的 &‘&&‘& 属性类似。请注意本属性在只有一行的伸缩容器上没有效果
align-content:&flex- /*如果父容器高度大的话原本是行之间平分父容器，有空隙. 加上后 &&行---上对齐*/
align-content:&flex-
align-content:&
align-content:space-/*让行平均分布&最上和最底下还是会有中间行空隙的一半*/
align-content:&space-/*让行平均分布&最上和最底下无空隙，其余平分空隙*/
align-content:&&&『默认值，子元素没有高度时默认会扩大高度，子元素加起来高度充满父元素』
属性6 align-items:&&定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
&align-items:flex-&垂直方向上对齐 左上方
align-items:&flex- /*垂直方向下对其*/
align-items:&/*居中对齐*/
align-items: /*这个属性是个默认值，如果这个元素的子元素没有给高度，子元素会垂直充满容器，给高度的话不起作用*/
align-items:&/*子元素以当前行的首行文字为基准对其*/
加给子元素的
1.Order 默认是0 用整数值来定义排列顺序，数值小的排在前面。可以为负值。
2.flex-grow:&1;&分配剩余空间的 默认是0//*把父级元素剩下的分成grow的份数,此元素占的份数，比方说自己都规定了自己的宽度是30，五个子集，父级300，那么只有一个孩子写grow的话，这个孩子就是本身的50+（300-150 ）| &如果有有两个孩子写了这个属性一个值是1一个是2 &那么这两个孩子就是本身的50 加上把剩下的300-150=150分成三份，这俩再分别加上100 （2份的）和50（1份的） */
3.flex-shrink:&0;&用数值来定义收缩比率。不允许负值&&默认1
/*当容器宽度不够,shrink为0的元素不会缩小 shrink为其他的数，是缩小的倍数，（不是它本身定义宽度的一半，而是其它那些经过挤压后的子元素的）比分说2就是其它的一半，3就是三分之一，所有默认值是1*/
4.flex-basis:&100
：用长度值来定义宽度。不允许负值
：用百分比来定义宽度。不允许负值
auto：无特定宽度值，取决于其它属性值
content：基于内容自动计算宽度
5.flex是 grow shrink basis的缩写
6.align-self:&flex-定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
/*可以控制单个元素的上中下排列方式*/值：auto | flex-start | flex-end | center | baseline | stretch
手机端页面
&meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" /&
fontSize();
function fontSize() {
var w = window.innerWidth/10;
var html= document.querySelector("html");
html.style.fontSize=w + "px";
当窗口的大小发生改变的时候会触发
window.onresize = fontS
将这段话加上，时时监控窗口大小用的
手机端事件
Touchstart事件 手指落在屏幕的事件
Touchmove事件这里面可以阻止默认事件（和PC端的一样preventDefault() 这个默认事件不能加在touchstart上，加上会出a标签不跳转的bug ）
Touchend事件，手指离开
在文本前插入东西
H2:before{content:””；background：}在h2标签内容前添加时间并给他背景颜色 h2：nth-child(3):before{content:}如果none浏览器不认识用normal &&后面插入用：after，当插入图片的时候用content:url(“./img/icon_01.jpg”);就可以
插入计数器&
Counter &计数器 &counter-increment计数器的增量，让其自增长
H2:before{content:”第”counter(abc)”章”；}再写一个
H2{counter-increment:}
这是阿拉伯数字的
要修改成其他的H2:before{content: counter(abc, 其他文字比分说罗马，英文字母啥的)；}
再加上H2{counter-increment:}让它自增长
当想第一个大标题下面出现1-1 1-2 1-3 &第二个大标题下面的是2-1 &2-1时
li:before{
content: "第"counter(z)"章";
counter-reset:&&&&这里是让p标签的自增量重置，重置后li下面的小标题就成了li的大标题----c（每次都从1开始）
counter-increment:
&p:before{
content: counter(z)"-"counter(c)".";
counter-increment:
：first-line 第一行 &&&&&：first-letter第一个字
本页面跳转用锚点链接
清除浮动最有力的方法：
在需要清除浮动的盒子A前面写一个空白的div，里面什么都不需要写，只给个类名B，样式中写
Content:”.”;
Visibility: &&……消失却占用空间
加上这个之后。在A的样式中写上margin-top:多少px；就可以了
既有表单元素又有图片的时候之间会有三个像素的间距，给图片写个margin-left:-3px，让他们挨起来
出现边框当全局样式用了box-sizing：border-时，导航栏写.nav{
height: 36
border-bottom: 2px&solid&#fd3f49;
line-height: 36
下面的盒子部分清除浮动后最上侧有可能会出现1像素的空白条，这是因为上面的导航栏部分line-height应该为34px，因为box-sizeing清除了边框，也就是说36px包括了下边框的2px，但是内容的行高是不应该加上这2px的，所有应该是34px
当一个盒子设置了透明度后，里面的内容也会跟着透明度，如何让内容不透明，背景透明呢？方法如下
&div class="lianxi"&
&img src="img/top_bg.jpg"/&
&div class="bgtouming"&&/div&
&div class="copy"&
&input type="text" &value="这个内容不能透明" /&
width: 900
margin: 0&
.lianxi&.bgtouming{
width: 370
height: 100
background: #ADFF2F;
border-radius: 15
left: 50%; &&&&&&&&&&/*这句和下面的是为了让这个盒子左右居中，-盒子宽度的一半*/
margin-left: -185
top: 50%; &&&&&&&&&&/*这句和下面的是为了让这个盒子上下居中，-盒子高度的一半*/
margin-top: -50
opacity: 0.5;
.lianxi&.copy&{
width: 300
height: 70
background: &/**让背景透明*/
left: 50%; &&&&&&&&&&/*这句和下面的是为了让这个盒子左右居中，-盒子宽度的一半*/
margin-left: -150
top: 50%; &&&&&&&&&&/*这句和下面的是为了让这个盒子上下居中，-盒子高度的一半*/
margin-top: -35
&&&简单来说就是定义一个div是透明的，定位到想要的位置，
再写一个同级的div是不想让透明的，也通过定位，放到透明的div上，想让背景透明就写上background: &/**让背景透明*/就可以了
表单元素&&input type=”#” &name=”” &value=””&一般都放在form表单中
Radio &name=”sex” &checked
Checkbox &name=”like” checked
Submit &提交
Image &提交
&option&&/option&
&textarea cols=”” rows=””&&/textarea&
H5中新增的表单元素&input type=”#” &name=”” &value=””&
Type=”Email” 电子邮件、邮箱 &必须带@
&url 必须网址
date &日期
&&&&&number：数字，属性有 &max &min step
range 范围 进度条 0-100之间数字
color：颜色选择器
tel &电话 手机端选中直接切换数字键盘
search &搜索框&&&属性里面加上&&results=”s”&左侧就会出放大镜
新增的input属性
&&&&Placeholder &&&：空的input提示信息，鼠标点击的时候提示信息就会消失
Autofocus：自动聚集 &&&值为：ture &或者false
Required：必填项
Autocomplete自动完成&&，就是记忆以前输入过的内容
Multiple:多选&&用在file &select
&&&&List属性，配合 Datalist &这两个属性使用Option
&input &type=”text” &list=”list1”&
&datalist &id=”list1”&
&option &value=”1”&深圳&/option&
&option &value=”2”&上海&/option&
&option &value=”3”&北京&/option&
&/datalist&
这个属性的优点在于还可以输入
Enabled:可用&&disabled不可用背景灰色&&readonly 只读&&&maxlength最大长度
Form新增属性：
更改提交方式：formmethod &更改提交地址：formaction
&是否启用表单验证功能：novalidate=“novalidate”
UI伪类选择器：
：checked 选中的表单元素&&checkbox &radio
：disabled &不可用的表单元素&&
：enabled &可用的表单元素
视频音频标签：
Video标签，视频标签，加上controls=“controls”加上控制台，就是让播放按钮啥的
Html新增的标签&figure
响应式布局
布局适口： 电脑页面原本的大小
视觉适口: 手机的可见区域叫视觉适口
理想窗口：
&开头加上;
&meta name="viewport" content="width = device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"&
媒体查询类型：screen(屏幕)、print(打印机)、handheld(手持设备)、all(通用)常用媒体查询参数：width,height,device-width（设备屏幕的宽度）,device-height,orientation(检查设备处于横向lanscape还是竖屏portrait)
Max-width:指的是浏览器窗口宽度
Max-device-width:指的是设备屏幕或者说分辨率支持的最大宽度
引入外部样式的方式
&link rel=”stylesheet”&media=”screen and (orientation:portrait) and(min-width:800px)”&href=”800wide-portrait-screen.css”&/&
当浏览器发现设备是：视口宽度是大于800像素的纵向显示屏设备时加载样式表
第二种：（直接在一个CSS样式表中分别判断）
/*在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC*/
@media (min-width: 992px) and (max-width: 1199px){
这里面写属于这块的样式
@import引入不常用：@import url(“phone.css”) screen and (min-width；200px) and (max-width:360px);
不同设备的分辨率：
页面大于1200 大屏幕，一般为PC端
在992和1199像素之间的屏幕里，中等屏幕 ，分辨率低的PC
在768和991之间的屏幕里 ，小屏幕，主要是pad
在480和767像素之间的屏幕，超小屏幕，主要是手机
小于480的，微小屏幕，更低分辨率的手机
为什么响应式布局要用百分比布局不用固定宽度设计：
固定宽度设计只会从一组CSS媒体查询规则突变到另一组，两者之间没有任何平滑渐变
而使用百分比布局创造的流动弹性界面同时使用媒体查询限制元素变动范围，这两者的结合构成了响应式设计的核心
1.修改宽度
需要牢记的公式：将固定像素宽度转换成对应的百分比宽度;
目标元素宽度 &÷ &上下文元素宽度 &= 百分比宽度
PS：我的理解上下文元素宽度指的就是目标元素的父元素，需要修改成百分比的值，宽度width（当有边框宽度的时候要减去边框宽度再去÷父元素的，因为边框随着拖动变细不好看）
2.修改字体大小
em:根据父元素的font-size为相对单位；rem:根据html的font-size为相对单ice-widt位。
浏览器默认文字大小都是16px；所以body{font-size:100%;font-size:16font-size；1}效果相同。同样可以用上面的公式来计算 12px表示 ：12÷16=0.75rem【这里有用到可以把整体设置成62.5%,也就是10px，然后在这个基础上换算，但是这样会诞生许多问题，谷歌中文版不认识10px,会把他当成12px解读，用hml{-webkit-text-size-adjust:font-size:9}定义之后，虽然认识了，但欧鹏浏览器能解读此内核，所有需要修改成hml{-webkit-text-size-adjust:font-size:9 -webkit-transform:scale(0.75);-o-transform:scale(1)}】
3.修改图片宽度
Img{max-width:100%;}
当然其它的多媒体标签，也可以设置最大宽度，让它缩放和容器100%匹配比如：
Img,object,video,embed{max-width:100%;}
然后特定图片设置特定的100%；比方说一个盒子里并排两个图片，那么每一个图片max-width:50%;有空隙再相应减小
&!--[if lt IE 9]& &script& src=""&/script& &![endif]--&
IE9 以下版本浏览器兼容HTML5的方法，使用百度静态资源的html5shiv包：
&!--[if lt IE9]&
&script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"&&/script&
&![endif]--&
载入后，初始化新标签的CSS：
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
新增的结构性标签，用于布局
acticle &&
aside标签定义其所处内容之外的内容，aside 的内容应该与附近的内容相关
Footer标签
1. 多媒体标签
关于多媒体标签的由来，优点，特性
&&&旧标记：
bgsound : 播放背景音乐，
缺点 ： 兼容性差，不可操控
【IE的】object ：引入外部内容，功能完善，可操控，可以引入多种格式。
缺点 ： 需要控件的支持，性能比较差。
【网景的】embed ：引入外部内容，功能完善，可操控，可以引入多种格式。
缺点 ： 需要控件的支持，性能比较差
&&&&H5新标记：
audio： 音频标签
video：视频标签
优点：功能强大，不需要引入外部文件，性能优越，不需要控件支持
缺点：兼容不是很乐观 所以手机端用H5的，客户端想要兼容到IE8及以下，用上面老的
兼容能够支持HTML5 的所有浏览器
&video autoplay="" controls poster="../music/Penguins.jpg"&
&source src="../music/oceans-clip.mp4" type="video/mp4"&
&source src="../music/oceans-clip.ogg" type="video/ogg"&
&source src="../music/oceans-clip.avi" type="video/avi"&
您的浏览器不支持视频功能
&audio autoplay="" controls&
&source src="../music/wudi.mp3" type="audio/mp3"&
&source src="../music/wudi.ogg" type="video/ogg"&
您的浏览器不支持视频功能
兼容所有主流浏览器
&video autoplay="" controls poster="../music/Penguins.jpg"&
&source src="../music/oceans-clip.mp4" type="video/mp4"&
&source src="../music/oceans-clip.ogg" type="video/mp4"&
&source src="../music/oceans-clip.avi" type="video/mp4"&
&object data="../music/oceans-clip.mp4"&&/object&
您的浏览器不支持视频功能
引入音频标签，如下：
&audio controls autoplay src="../music/wudi.mp3"&
您的浏览器不支持音频
controls ： 显示播放控件
autoplay ：自动播放，准备就绪（准备就绪！=下载完毕）后马上播放，默认不自动播放。
preload ：页面加载完毕之后，准备标签加载，但不播放
loop ：是否进行循环播放，默认是不循环
poster ：视频默认显示图片，只会在播放之前显示。
controls ： 显示播放控件
autoplay ：自动播放，准备就绪（准备就绪！=下载完毕）后马上播放，默认不自动播放。
preload ：页面加载完毕之后，准备标签加载，但不播放
loop ：是否进行循环播放，默认是不循环
JavaScript （方法，事件）
play() ： 播放视频（音频）;
pause() ：暂停视频（音频）;
loop : 循环播放视频（音频）;
paused ：检测当前是否是暂停状态（是则返回true，不是则返回false）;
volume : 获取当前音量值，或者是设置当前音量值
src : 获取当前视频/音频地址，或者是设置当前视频/音频地址
playbackRate : 获取当前视频/音频播放速度，或者设置当前视频/音频播放速度
currentTime : 获取当前播放的进度，或者是设置当前播放的进度
duration ：获取视频的总长度，固定值
muted ：获取当前是否为静音状态，或者设置当前静音状态
ended : 当视频/音频播放完毕之后触发；
ondurationchange : 当总时长发生改变
具体还要很多方法去我的百度文库找去
webStorage提供两种类型的API：localStorage和sessionStorage，两者的区别看名字就有大概了 解，localStorage在本地永久性存储数据，除非显式将其删除或清空，sessionStorage存储的数据只在会话期间有效，关闭浏览器则自 动删除。两个对象都有共同的API
length:唯一的属性，只读，用来获取storage内的键值对数量。
key：根据index获取storage的键名
getItem：根据key获取storage内的对应value
setItem：为storage内添加键值对
removeItem：根据键名，删除键值对
clear：清空storage对象
在网页的html标签中加入&html manifest="test.manifest"&这是告诉浏览器需要缓存.
在manifest中:
CACHE MANIFEST&&&#这个必须在第一行,是来声明这是一个manifest文件
#2016年8月23日09:39:14,为了让本文改变,可以修改这里的时间,或者版本号
#这里写需要缓冲的文件,这里的文件内容修改了,页面也不会变,必须这个manifest文件有修改,重新缓存才行
css/test.css
css/test01.css
#这里是不需要缓冲的文件,这里的文件内容有改变,页面会实时改变
#不存在时使用另一个文件替代,主页面引入的test1不存在,那就用test代替,一般用着没有网络的情况下或者是没有网络时跳转的页面,这个跳转的页面要缓存下来提前
css/test1.css &css/test.css
/404.html &&[根目录下的404页面]
选择器中需要注意的部分:
选择紧接在 &div& 元素之后的第一个&&p& 元素。
但是需要注意的是，首先它们要有共同的父元素，也就是说他们是同级别的，另外当有五个&P&，用P+P时，从第二个开始都变化。因为第三个也是第二个的下一个
属性值包含
&[title~=flower]&选择 title属性包含单词&"flower" 的所有元素。
注意是单词，而不是子串，所以title=flowers 是无法被选中的。这样看来和title=flower就没区别了。其实不然，它可以用在class有多个值的时候使用
&&这个指的是子串中只要有这个子串就行。所以包括flower1 &&flowers &&abcflowers都能被选中
属性值结尾
&选择属性值中以value结尾的
属性值以什么开头
&&&&&&这两个没看出什么区别来？
：focus &&&&&&&&&input:focus 选择所有获得焦点的input输入框
：first-letter &&&&&P:first-letter选中每一个P的开头第一个字或单词
相对应的：first-line &选中的是第一行
P:first-child &&&P:last-child &P:nth-child(1)所指代的是 &是先找到每一个父元素 &如果规定了父元素就先找到指定的父元素 ，然后找孩子，从子元素中第一个开始找（无论是不是P），找到了再看是不是P元素，是就改变。不是就不改变
而P：first-of-type&&&P：last-of-type &P：nth-of-type(n) &和上面是区别是，找到每个父元素里面所有的P进行计数，不是P的它不认识，如果父元素中某几个子元素不是P，那么这几个元素根本不参与计数中找到的是P排名第一的，最后的，或某一个。上面的是找到子元素排名中第几的，再验证是不是要找的
:target找到当前活动的HTML锚，说的太高逼格。其实锚点链接时能用到修改样式用的
:target{border: 2px solid #D4D4D4;}
&p&&a href="#news1"&跳转至内容 1&/a&&/p&
&p&&a href="#news2"&跳转至内容 2&/a&&/p&
请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。
&span id="news1"&&b&内容 1...&/b&&/span&
&span id="news2"&&b&内容 2...&/b&&/span&
CSS3——变形
Translate(20px,30px) &&&第一个值的水平方向平移&&第二个是垂直平移
Rotate（30deg）:旋转 其中deg指的是角度，可以是负值（可分写成XYZ轴）
Scale(1,2)缩放&&前者指的是水平方向多少倍，二是垂直方向缩放倍数，一个参数就是整体缩放，缩放的时候占位不变
Skew（20deg,30deg）倾斜
前者是水平方向倾斜的角度，后者是垂直方向的角度
默认以中心点进行变形
Transform-origin：20px 30px 改变变形的中心点
一般鼠标放上去配合过渡（transition）使用
Transition: &css属性&&（&&全部变的时候写all），&从没有变形到&变形结束需要的时间一般用毫秒或秒来表示&&，&&过渡的动画效果（linear/ease/ease-in/ease-out）&&，动画开始需要延时的时间
Linear线性过渡
Ease 平滑过渡
ease-in &由慢到快
ease-out &由快到慢
比方说：transition：all &0.3s ease 0.5s；
这是复合属性，也可以单独写：
Transition-poterpy:all； &动画给哪个样式加加 &all就是给所有的css属性加
Transition-duration:0.3s； 动画执行多长时间
Transition-timing-function:&&过渡效果
Transition-delay:0.5s;&&延时
谁变化、有动画，给谁加过渡属性!!!
Animation &动画&&&使用关键帧keyframes定义动画
Animation：name &5s{从开始到结束的时间} &&ease(过渡的效果) &6s{动画的延迟时间} &动画的循环次数&写infinite 就是无限循环&&&播放动画的播放方向（alternate摇摆播放、reverse 倒叙播放）&&&&此复合属性6个值
@keyframes &name{
20%{这里面写CSS样式}
QQ对话框背景图片效果
Border：上右下左的最大值有单位border-image：引入图片&&上&右&下&左(四个裁切值，没有单位) &fill(填充满，不是透明的写) &repeat/round/默认的stretch(拉伸)
裁切时注意其他方向别切没了
：first-of-type &同类型的第一个
：last-of-type同类型的最后一个
：nth-of-type()同类型的第几个
:disabled 不可用的表单元素
:enabled 可用&的表单元素
：：selection &选中之后改变的状态&&两个冒号&
浏览器标准规范
Html&&css &&js
结构&&&表现&&行为（动作）
浏览器的兼容性
不同浏览器对CSS解析认识不同，导致生成的页面效果不一样，写针对不同浏览器的css代码代码就叫CSS hack其分类有（hack是修改的意思）：
IE条件注释hack
&!-- [if ie 6]&
&h2&如果等于IE某个版本&/h2&
&![end if]--&
&!-- [if ie]&
&h2&如果等于IE &/h2&
&![end if]--&
&![if gt ie 7]&
&h2&如果大于IE7 &也就是8910 11版本&/h2&
&!--[end if]--&
&![if lt ie 8]&
&h2&小于IE8 &也就是IE6 7&/h2&
&!--[end if]--&
&!-- [if ! ie 8]&
&h2&IE中除了IE8都能看见我&/h2&
&![end if]--&
gte：大于等于
lte：小于等于
！：非或者不等于&&非IE中某个版本，但不能！IE &
2.CSS选择符注释法（只针对IE6 7）在选择器前面加
*html &.header{height:30 background:} &&前面写上*html只有IE6认识它
*+html &. header{height:30 background:} 前面写上*+的话只有IE7 认识它
要求：先写一般的，再写这个带选择符特殊的
3.CSS属性注释法（常用来改变高度）
_color: &&_或者-减号是专门给IE6用的
*+color: &*+是专门对IE7浏览器的
*color：red；是IE6、7都认识的
Height:100px\0; &&ie8 &&ie9 &ie10 &都认识
Height：100px\9;ie6-11 &都认识，其实就是限定IE下的样式
如果只让IE9认识写&&height：100px\9\0; &IE9-11认识；
! important &&IE7以上版本识别&&也就是只有IE6不认识，谷歌啥的也都认识
Color：red!important；&加！important后优先级比行内还高
5新增的css3属性
-moz- &&&&&&&&&FF &&&&&&&&&&&&&&&&&&&&&&&&火狐
-webkit- &&&&&Chrome &&&&&&&&&&&&&&&&谷歌
-o- &&&&&&&&&&&&opera &&&&&&&&&&&&&&&&&&&&欧鹏
-ms- &&&&&&&&&&&IE9以上&&&&&&&&&&&&
常见问题及解决
1.父元素浮动了并且加了边框，里面有图片，下方会产生空隙
解决方法：img（display:block）或者img(vertical-align:)
2.IE6中如果给图片添加上超链接，图片会自带紫色的边框
Img{border:none/0;}
3.给图片添加超链接之后，并且鼠标放上去时候让显示边框，但边框显示不完整
本身写a:hover{border:1px &solid blue}
解决方法：非IE6浏览器下写img:hover{border:1px solid blue}
动的问题的解决方法：在原图片上加一个大小相同的边框白色的
Img{border:1px solid &#ffffff}
在IE6下解决办法：a:hover{border:1px solid red}
a{display:加上图片的宽高&&&如果动的话再加上个1像素的白色边框}
再在a:hover{border:1}
4.如果连续插入图片在不同行写代码时会产生3像素距离&&&&
解决办法img{float:}
5.input标签或文字与插入图像垂直方向不对齐时，怎么让其垂直方向对齐
解决办法Img(vertical-align:middle)
1个块级元素左浮，另一个块级元素没有浮动会产生3个像素的间距
解决办法&&给另外一个不浮动的元素也让它浮动
2 IE6经典的双边距问题（有浮动的元素，给浮动元素加了magin-left：）
给其中设置margin-left的那个元素设置display:inline
第二种margin-left:10px &&&&_margin-left：5px &&因为后者只对IE6起作用
第三种办法给前面的设置margin-right属性
3.IE6水平居中问题（margin:0 &不好用）
Body{ width :800 margin:0 auto；&text-align:}
再加上text-align：center；但是这样会让里面的文字居中对齐，如果不让居中，就再在里面的每一块设置上text-align:
4.*{margin:0; padding:0;}写上这些
5，margin-top引起的两个问题
A：margin-top叠加问题&&上下设置了margin-top和margin-bottom,最后的值是取最大值，上下取最大值，左右累加
B：给子元素加margin-top时，加到父元素上去了
解决办法&&不给子元素加了，给父元素加padding-top，或者依然在子元素随便写多少，但是父元素上要写上个padding-top:0.1
1、&鼠标指针问题
加上cursor:pointer（指针）、hand（手）&&&最好用前面的，hand只有ie认识。Cursor后面也可以加cursor：url();用图片。但是图片是ico、ani、cur后缀的
Cursor:url（img/1447.ani）,
2透明度问题
一般使用Opacity：0.5，但是IE678不认识这个问题，就在它后面再加上个filter:alpha(opacity=50);
3.一行文本的垂直居中方式
Verrtical-align:middle &&&但是这个不实用。用line-height：height；
4：hover对IE6浏览器只能a标签使用，但是我还想给其它标签使用，可以借助JS实现
5.IE中不认识min-height和min-width
语法：less中文简体
@charset “utf-8”;
&&&&&&&&&&&&单行注释：&&// &&&&&&&&&&&&&&&&&&&&&&&&&&&&&编译后不在CSS中出现
多行注释：&/*注释的内容*/ &&&&&&&&&&&&&&&&&编译后会跑到CSS中起
1普通变量的定义
声明@color:#546783;
下面使用h2{color:@background:@}
Mixins(混合)
2在一个类别选择器可以使用已经定义好的另外一个类别选择器
.width{width:960 margin:0}
如果不想在CSS文件中输出这个mixin &声明时.width(){width:960 margin:0}也就是说加个小括号
3带一个参数的mixins
声明&&.pos(@p){
Position：@p;
使用：li{.pos(relative);}
4带一个参数并且有默认值
.pos(@p:relative){position:@p;}
使用&&li{.pos();}这里直接调用就是用的默认值，li{.pos(absolute);}
5 带多个参数的mixins
.pos(@p;@@top){
Position:@p;
.pos(100 20px);
考虑到定位有在左边有在右边，声明中不写@ &使用中就只写.pos(20px); &然后下面单独写left:100 &或者right:100
SEO(搜索引擎优化)
javaScript学习
ECMAscript（基础语法）
BOM：使用js控制浏览器（大小、开关等）
DOM：与网页的内容交互、控制页面中的标签
ECMAscript：基础语法
这三部分组成了javascript
变量名：数字、字母、下划线、$的组合但是首字母不能是数字或者关键字保留字
变量的类型&
数值型：&&1000 &&&4 &&46 等就是数字
字符串：单引号或者双引号引起来的
布尔类型：&&分为true &非0 或者&false &&0两个值&&&&叫bool或者boolean
空类型：&&&&null
Undefined类型：声明了变量但是没有赋值则为此类型
引用类型：object类型
函数typeof();用来得到变量或者常量的类型
将字符串转换成数值型
求整&&&&用函数parseInt(); &&console.log(parseInt(3.14)); &&出来的是3
第一步：找到第一个非空格字符2.如果第一个非空格字符是数字或者正负号，则开始转换3.如果第一个非空格字符不是数字或者正负号，则返回NaN（not a number）；
4.直到碰到第一个非数字字符停止转换。
将字符串互转成浮点型&parseFloat();
比方说“-3.1426”用parseInt();转换后是-3 &&&用parseFloat();得到的是-3.1426
当字符串可以成功转换成number类型数据时，我们可以直接把字符串与number类型数据进行比较，系统会自动转换成number
将数值型转换成字符串
用toString();函数&&&&var a=3.14 &&转换成字符串a.toString();
运算符加上变量或者常量叫表达式
算数运算符：+ - * / &&%(取余数)
其中+除了作为数值运算符，还作为字符串连接符
赋值运算符：=
等号的左边不可是常量，必须是变量
关系运算符：& &&&&&&= &&&&&& &&&&&= &&&&&== &&&&!=
逻辑运算符：&&&&（与、且）&&&||（或）&&&&！（非）
！表达式&&&&&就是颠倒黑白&&&&&&，真的变假的，假的变真的
3&&2；&&&计算机打印的是2 &&&因为需要看&&之后的。。打印的是最后执行的
3|| 2；的话计算机打印的是3 &&因为不需要计算后面的
Var &&a=1,b=1,c=1,d=1,m=1,n=1;
（m=a&b）&&&&(n=c&d); &&&求m &n的值&&&&计算时，左边a&b不成立，为flase &也就是0；所有m=flase &也就是m=0；因为左边是假的，是&&表达式，所有计算机为了效率根本不去执行右侧的部分，所以n为原始值1；
对于表达式1||表达式2，只有表达式1的值为假的时候，才会计算表达式2的值
在&&表达式1&&表达式2 &中，只有当表达式1的值为真的时候，才计算表达式2的值
自增&&&a++ &&让a 的值加1 &&&&&&&&&&&&&&&&&&&&&&&&
自减&&&a - - &&让a 的值减一
//a++ 与&++a的区别在于自增表达式的值；a++是先赋值再+1，表达式的值也就是还没有+1之前的值，而++a是先++后赋值&&&++A表达式的值是a+1之后的值
之后其实a都变成了+1之后的值，但是表达式存在是+1之前或者是+1之前
只可以对变量进行++ &&- -运算
复合算数运算符&&+= &&-= &*= &&&/= &&%=
a+=2; &&&就相当于a=a+2；&&&功能：将a的值加上2后再赋值给a
三目运算符 &
运算符的优先级&&&&&&&&&&()
&! &++ &&-- &&&他们相同
& &&&= &&&& &&= &&!= &&==
= &&+= &&-= &&*= &&/= &&%=
此运算符当牵扯到相同优先级时，按表达式从左到右计算它
Var &是定义变量的关键字
Function是定义函数的关键字，但是函数并不会自动执行，需要调用函数时才会执行，函数是对功能的封装，把多行代码封装到一起。
由事件触发的函数，无论定义在哪里都没有问题，但是不是由事件触发的函数必须定义在body最底下
选择结构（分支结构）
if (表达式/变量) {
当程序自上而下执行时，碰到if结构，首先计算if后面小括号中的表达式的值，表达式的值为真，则执行大括号中的代码块，表达式的值为假，则直接跳过if结构。&&&
二分支结构
【逻辑】当程序执行碰到if-else结构式，首先计算if后面小括号中的表达式的值，如果表达式的值为真则执行代码块1；如果表达式的值为假，则执行代码块2；
它也可以通过三目运算符（选择运算符）来表示：
条件表达式？表达式1：表达式2 &&&&&【意思就是如果条件成立执行表1，否则表2】
例如var &max=（a&=b?a:b）;首先计算a&=b是否成立如果成立整个三木运算符表达式的值是a，否则的话整个三木运算符表达式的值的b
if---else if &
if(表达式1){
}else if(表达式2){
当程序碰到这个结构时；首先计算表达式1的值，表达式1的值为真，执行代码块1，然后跳出if---else if结构（自动跳出不需要加break）；表达式1的值为假则进入else判断表达式2……
在if &&else if结构中，每一个else都是对前面所有if条件的否定
If----else &if经常用在分段条件判断中&&&&每一个else都是对前面所有if条件的否定，所有不需要重复前面的条件
confirm("什么东西"); &&这是BOM自带的确认窗口
调用此方法会得到一个值ture或者false
prompt（“请输入一个整数”）；
这是输入框，可以向浏览器中输入信息，有返回值，返回值为输入的内容，返回值类型是字符串
4.&编写一个成绩测评系统，输入语文、英语、数学、化学和物理五门课程成绩。输出对学生的评级，要求平均分超过85，无不及格成绩，为优秀，有不及格成绩为良好，70以上为良好，60以上为及格，其余为不及格。
&Switch&&当条件是等值判断时，多分支结构
Switch（表达式或者变量）{
Case &值1：代码块1；break；
Case &值2：代码块2；break；
Default：代码块n；break；
【注】小括号中表达式的值或者变量的值&&可以是任意类型的数据。可以number类型，可以string类型&，可以boolean类型等，这是JS语言所特有的；
【逻辑】当程序碰到switch结构的时候，首先计算小括号中表达式或者变量的值，然后根据所得到的值到大括号中起寻找匹配项（case后面的值==表达式的值或者变量的值），然后从对应的匹配项进入进入switch结构，执行代码块。直到碰到break语句跳出switch结构。如果没有找到匹配项则执行default后面的代码块，然后跳出switch结构。
在switch结构中&&&break语句可以省略。但是省略后会继续往下执行，无论case是否匹配，直到又遇见break，break的作用就是跳出switch结构！
我发现当省略break时，往下找到有break的case。这个时候这个case代码块里面得到的值，依然是最开始传进来的值，也就是说
如图。Case2有break。当case1的break不起作用时，而mon=1时，case的mon=1
另外default语句也可以省略，但是不推荐；
[全部都是静态方法，所以要用引用类型名字调用Math.方法，在字符串方法中有个String.fromCharCode()也是静态方法—找asicii码对应的字符]
产生一个随机数：Math.random(); &&&&这个方法产生的是0-1之间的浮点型数据。但是包括0 不包括1也就是[0,1)
如果得到的是0-10 &&就Math.random()*10就可以了
当想得到1-9；也就是得到a-b之间的数Math.random()*(b-a+1)+a
想得到：[2,8] &&乘以（b-a+1）&&&也就是乘以7 &得到&&[0,7) &再加a也就是&+2 &&---&[2,9)但是它永远达不到9，所有取整之后就是【2，8】
Math.pow(x,y) &&是计算x^y也就是x的y次幂
Math.pow()返回值是一个浮点型数值
注意：不要将浮点型的等值判断作为分支条件
比如：var f=2/5;
If(f==0.4){……}
Math.round(3.5);//四舍五入方法=4
Math.ceil(10.0001); &&//向上取整&=11
Math.floor(10.9999);//向下取整=10=parseInt();
&&&Math.max( 1,14,123,204.5,30.3); &&//取最大值&&204.5
Math.max( 1,14,123,204.5,-3，30.3);//取最小值&&&-3
&&&Math.abs(-10) ; &&&//取绝对值
&&Math.sqrt(25); &&&// &开平方
________________________________________________________________
For &&&&&&&&&三种循环
两要素：1循环次数&（循环变量&&初值&&&条件&&步长）&&2.循环操作
循环变量赋初始值
while(循环的条件){
循环变量的步长
Do &-- while循环
循环变量赋初值
循环变量的步长
}while(循环条件)
【逻辑】当程序碰到do---while结构时，首先执行一遍循环体，然后循环变量发生步长，然后判断循环条件，如果成立接着再次执行循环体，直到循环条件不成立，跳出do---while结构。
Do---while &&和while什么区别呢？
While先判断循环条件，再执行循环体，而对于do—while来说，不过条件符不符合，我先执行一遍循环体再来判断条件
所有如果循环条件一开始就不满足，while结构的循环体一次也不会执行，do---while结构的循环体会被执行一次。
For(循环变量赋初值；循环条件；循环变量的步长){
1循环变量赋初值；
2.判断循环条件是否成立，如果成立执行3如果不成立执行第五步
3执行循环操作
4循环变量的补进，然后执行第二部。
计算最大公约数
Var a &= parseInt(prompt(“请输入a的值”));
Var b &= parseInt(prompt(“请输入b的值”));
分析得到，最大公约数比最小的值还要小或者一样大；
for(var i= i&=1;i--){
if(a%i==0&&b%i==0){
alert(“最大公约数是”+i)；
Continue作用：只能用于循环结构，当程序碰到continue语句时候，结束本次循环，继续下次循环
Return；返回语句，只能用在函数体中。程序碰到return语句函数调用结束
。Break语句，只能用于switch结构与循环结构，在switch结构中碰到break语句直接跳出switch结构，在循环结构中碰到break语句直接跳出循环结构；往后就不执行了
Break一般与死循环结合使用 &循环次数无法确定的时候用死循环+break &&while(1){死循环}
循环的 嵌套，循环体中还有循环，外层循环执行一次，内层循环执行一遍
对于while 和dowhile来说，如果后面条件永远为真比方说while(1)则死循环。对于for循环。第二个表达式不写则为死循环。For （var i=1; ; i++）
当循环次数不确定的时候使用死循环，使用死循环必须有能够使其跳出的break语句
函数就是把完成特定功能的一段代码封装起来。给该功能起一个名字（函数名）。哪里需要实现该功能就在那里调用该函数。函数可以在任何时间任何地方调用
作用：使程序变得简短而清晰，有利于程序维护。可以提高程序开发的效率。提高了代码的重用性。
当代码封装到函数中时，这段代码什么时候执行，在什么地方执行都是可控的。
如何定义一个函数？
Function &函数名(参数列表){
函数体，也就是代码块；
function关键字不能少，
函数名----顾名思义（功能名）
（a,b,c）函数中有三个参数，分别是参数a,参数b,参数c.在函数体重可以对这三个参数进行操作
{函数体} &所谓的函数体就是为了实现功能而书&写的代码，其中有个return语句，后面只可以跟一个值，就是函数的返回值。Return可以写也可以不写。碰到return语句时，函数调用结束。
而定义此函数时，。里面的参数叫形参&function &isFlower( a ){} &&里面的a是形参
当调用函数时，小括号里面的值叫做实参，实际的值，具体的数值isFlower(i ) &这个i就是实参，
因为定义函数时需要一个参数，在调用函数时需要给该函数传递一个具体的数值，也就是i，这个行为叫做传参。传参也就是赋值。
对于大部分语言，实参的个数需要与形参的个数类型一致。但是对于js语言来说，不会检查实参的个数，也不会检查形参的个数
Js语言可以传递任意个参数
在js中每一个函数的函数体中都有一个arguments对象。它类似一个数组
获取每一个实参的值arguments[0] &得到第一个实参。Arguments.length得到传递实参的个数
函数的重载：函数名一样，但是函数的形参不一样（个数不一样，类型不一样，顺序不一样）。但是因为JS语言不去检测参数，所以JS中没有函数的重载
所以在js语言中，当函数名与上面的函数名一样的时候，新的函数会覆盖掉旧的函数，函数会被重新定义。不会实现重载！js语言中是没有函数重载的
变量与作用域
函数的作用域
局部变量：在函数块中定义&的变量&&&作用域范围：函数体内
全局变量：函数外面定义的变量，作用域是整个HTML页面，另外在函数块中定义时没有var关键字的也叫全局变量
Js在加载script标签时，先把标签的全局变量的声明给执行一遍（开辟空间），然后才开始执行，所以在定义的全局变量b=“abc”之前alert（b），会提示undifind
当局部变量与全局变量名字一样的时候，在局部变量的作用域范围内，局部变量起作用。&但是如果我想在局部变量的作用域内使用全局变量。写window.全局变量名
函数的返回值：
赋值给一个变量
作为另一个函数调用的参数&&gcd（gcd（2，3），12）
可以作为表达式的一部分参与运算
函数的调用：1函数名（）&&&2.事件触发（js语言中使用概率最高）
函数调用注意：1.可以在任何地方调用函数，2可以在一个函数体中调用另一个函数，3.可以在函数体中自己调用自己（这种函数叫递归函数）
没有函数名的叫匿名函数&&&function（）{代码块}
调用时，把这个匿名函数赋值给一个变量&&var &f=function(){代码块} &&&&&&&&&&通过变量名（）调用匿名函数。&调用时f();
Onfocus()获得焦点&&&&&&&onblur（）失去焦点&&&这是鼠标需要点击以下才能实现
递归函数对栈空间的消耗大。如果递归的次数太多的话会造成栈溢出。理解比较麻烦经常用于特定的情况，比如二叉树的遍历，计算阶乘
递归函数类似于循环，任何一个单层循环都可以写成递归函数
For(var i=1;i&=5;i++){
Document.write(“hero”);
改成递归：
Function &printhero(n){
If(n&=1){ &//循环的条件
Document.write(“hero”); &// 循环操作
Printhero（n-1）;//步进
数组(常用的官方的引用类型)
数组中的每个值叫做元素，每一个元素都有自己的位置。这个位置叫做索引，索引从0开始
对JS语言来说同一个数组中可以放入不同类型的数据
字面量法创建数组
// 1.字面量法创建数组
var arr=[];
//当使用字面量法创建数组的同时给数组赋值，最后一个如果加，会造成ie8及以下读取数组长度+1，造成浏览器兼容问题，所以不加，
var arr1=[1,2,,4,5.56,true,"gag"];
console.log(arr1.length);
console.log(typeof(arr1));//object &引用类型相当于其它语言中的类。
//数组是js语言中使用概率较高的引用类型之一
构造函数法
//2.构造函数法创建数组（new关键字可以省略，new的意思是程序员手动在堆空间开辟空间）
var arr2 = new Array();//空数组
var arr3 = new Array(20);//创建了一个容量为20 的数组
var arr4 = new Array(1,2,3,4)//创建了一个容量为4的数组
var arr6 = new Array(4);
arr6=[1,2,3,4,5,6,7];// 不能这样给new出来的数组这样赋值，要通过遍历
//使用构造函数法穿件数组的时候，如果只传一个值，这个值是number类型的，那么必须是大于等于0的整数，否则会报数组非法
// 获取数组的方法&&&下标法
// 对js而言没有数组越界的概念，当[index]超过数组的长度时，数组会自动扩充到index+1
数组的遍历
var arr=[1,2,3,4,5,6,7,8,9,10];
console.log(arr.length);//获取数组的长度
arr.length=8;//可以通过修改数组length的值来修改数组的长度，长度变化后，后面的值就被删除或者添加undefined。
console.log(arr.length);
// 遍历数组----就是获取数组的每一个数组元素
//先给数组赋值
var arr1=new Array(20);
for(var i=0;i&arr1.i++){
arr1[i]=i*2;
//1,遍历数组for循环方法
for(var i=0;i&arr1.i++){
document.write(arr1[i]+" &");
//2.for &in &前面j是循环变量（也就是下标，从0开始到数组长度）。&in后面是数组名字
for(var j in arr1){
document.write(arr1[j]+" &");
//3.forEach &&ECMAScript5.0的新内容
//forEach是对数组中的每一个数组元素进行函数体中的操作,他不支持break语句&&可以有return语句
// 里面是一个匿名函数，匿名函数的形参(num也可以其它名字，必须有。)就是数组的元素，把整个匿名函数当作forEach的实参
// 只有在遍历数组取值的时候才能使用for in 和forEach
arr1.forEach(function(num){document.write(num+" &&")})
上面的它就相当于：function fun（num）{
Document.write(num+” &”);
For(var i=0;i&arr1.i++){
Fun(arr1[i]);
}只是这两个在底层封装好了
数组中常用的方法
var arr=[1,1,2,3,4];
// 1 .push() 向数组末尾添加元素，返回值是改变之后数组的长度，原数组改变
arr.push("abc",34,23);
// 2 &.pop()弹出数组的元素，删除数组末尾的元素&&数组的长度减一，返回值是弹出来的数组元素
console.log(arr.length);
console.log(arr.pop()+"pop的返回值，也就是最后一个元素");
console.log(arr);
//3.shift() &弹出第一个元素,返回值是删除的第一个元素&&
arr.shift(v1,v2,v3,……);
//4 .unshift()在头部插入元素，返回值是改变后数组的长度
arr.unshift("asdf",200);
// 5.join(str)将数组元素按照写入参数链接成字符串，如果不写是默认逗号链接&返回值是连接好后的字符串&&本身数组不变
arr.join("*");
//6.reverse()将数组元素倒置，返回的是倒置后的数组&&，原数组改变
arr.reverse();
// 7.concat(v1,v2,v3,……)将数组的数组元素与参数拼接起来，在最后面拼接，形成新的数组
// 返回值L：返回新拼接成的数组，但是原来的数组不会改变
arr.concat(1,2,"csd");
// 8.slice(startIndex,endIndex)截取数组的一部分。返回值是返回截取到的部分，原来的不变
arr.slice(2,5);//从下标为2到5，但是包括2 不包括5
// 9 splice（index,howmany,v1,v2，……）&向数组添加数组元素，或者删除数组元素，index必须写，意思是从下标几开始
// howmany为0，表示不删除元素。howmany为2，删除从index开始本身+后面长度共为2的元素
// v1，v2可选的，替换的数组元素，删除了上面的添加了这俩
// 注意上面index都包括了本身
// 10.toString() 将数组转换成字符串，返回值是生成新的字符串，但是原来的数组不会改变
arr.toString();
// 11. indexOf(v1)//从数组的头部开始查找v1，返回v1第一次出现的下标（没找到返回-1）
arr.indexOf(4);
// 12 .lastIndexOf(v1)从数组的尾部开始查找，返回v1第一次出现的下标
数组的排序
冒泡排序法
升序，1相邻的数组进行比较；大的沉底&&2.开始的一对到最后一对比较共进行进行length-1轮&&&外层循环控制趟数&&内层进行比较，比较次数为length-1-i；
3第一轮对所有的数组元素，都要进行冒泡比较，除最后一个元素（它没法和后面的比较了，后面没了）
for(var i=0;i&arry.length-1;i++){
for(var k=0;k&arry.length-1-i;k++){
if(arry[k]&arry[k+1]){
var little=arry[k];
arry[k]=arry[k+1];
arry[k+1]=
从头开始和后面所有的元素进行比较，每次确定最头上的
var arr=[0.4,5,3,12,-3]
for(var i=0;i&arr.length-1;i++){
for(var j=i+1;j&arr.j++){
if(arr[i]&arr[j]){
var thr =arr[i];
arr[i] = arr[j];
alert(arr);
3&&sort官方也定义了一个数组的排序函数，但是是按照ascII码的大小从第一位开始比较，也就是3会大于29；
如果想要按照自己的规则进行排序，我们需要给sort传递一个实参，实参为函数名
var arr=new Array(3,2,8,1,50);
arr.sort(compare);
// 从小到大的排序 &a和b代表的是数组的前一个元素和后一个元素
function compare(a,b){
}else if(a==b){
// 或者直接
// if(a&b){
// 再或者直接
// return a-b;
数组交换元素位置
var arr=["a","b"];
[arr[0],arr[1]] = [arr[1],arr[0]];
字符串常用的方法
// 字符串的包装类型-----添加了方法属性
var str="abc"; &&&&&//string类型
var str2 = new String("abcdefg"); &//object类型，为引用类型，包含属性和方法
console.log(str);
console.log(str2); &&&//{}----引用类型的实例
//在js中string类型的字符串也可以使用object类型中包含的属性&&方法
//js会默认的将string类型转换成object类型，然后使用在object类型中定义好的属性和方法
// 字符串常用的属性和方法
// 1.长度&&length&&&仅仅可读，没法修改
str2.length=10;//不可以
console.log(str2.length);
// 2.获取指定下标的字符&charAt() 下标从0开始的
// 返回值是字符
console.log(str2.charAt(1));
// 3.获取指定下标的字符的ASCII码，&&charCodeAt(index)
// 返回值&&ASCII码（0~127的整数）
console.log(str2.charCodeAt(1));
// 4.将ASCII码转换成对应的字符，&&String.fromCharCode(); &这个必须用引用类的类名String来调用
console.log(String.fromCharCode(65)); &&//输出大写的A
// 5.查找子串，从字符串开头查找子串，返回子串第一次出现的位置，
// indexOf("子串"); 而lastIndexOf("子串")是从后面找，找不到都是返回-1
console.log(str2.indexOf("cde"));
// 6.替换子串&replace("被替换的子串","变化后的子串");
// 返回值是被替换后的字符串，但是原来的字符串并没有改变
// 参数1是被替换的字符串或者正则表达式&参数2是替换后的字符串
/*初窥正则表达式（在//之间写着）
标记：g----就是全局
i--不区分大小写
比方说str="abcabcaacdaacaa"
str2.replace("aa","***");这样只替换第一个aa
str2.replace("/aa/gi","***");这样替换所有aa且不区分大小写Aa也被替换
// 7.截取子串&&substring(参数1，参数2)，只有一个参数的时候是截取到末尾，【两个是截取中间的，无论一个或两个参数原来的字符串不会改变=数组slice】
// 返回值是截取到的子串，
// 8.substr(参数1，参数2); &一个参数截取到末尾，两个参数时，参数二代表截取的长度
// 9.字符串大小写转换toUpperCase(); 转大写toLowerCase();转小写&&原来的字符串不会改变
// 10.字符串相等的判断&&== &返回true或者false
// ==是值相等就可以10=="10" &true &&===是绝对相当&&类型值都一样&10==="10" false
// 11.split字符串分隔符与数组的join()想对应，它是将字符串分割成数组
var str="welcome &to beijing";
alert(str.split(" "));
字符串的大小比较，是从头也就是下标为0开始比较两个字符串的第一个位数的ascri码比较，如果下标为0的相同，再比较下标为1的。。直到找到不同的
字符串调用正则表达式的方法:
Str.math(parrent); &&
Str.search();
// 字符串关于正则表达式的函数
// match() &&返回符合模式的子串组成数组或者是null
// search() &返回下标 或者 -1 &
// 只要找到返回下标，找不到返回-1 全局g修饰无用与RegExp 的test()一样
// replace(parrent,"新内容") &返回值就是替换之后的新字符串 但原来的字符串不变
// split(parrent) &返回值是数组 &
var str="this is a BOX or box?what a box……box";
var rex=str.match(/box/gi);
console.log(rex instanceof Array);
console.log(rex);
console.log(str.search(/box/i));
console.log(str.replace(/box/gi,"top"));
console.log(str);
------浏览器对象模型
// BOM(浏览器对象模型) &Browser Object Model
// BOM就是js获取以及管理各个浏览器的内容
// js通过window这个全局对象来管理浏览器
// 所以在html页面定义全局变量&函数&都属于window这个全局对象的属性和方法
var a=100;
function fun(){
// alert("我是一个函数");
var b="abc";
// alert(window.a);
window.fun();
window的对象属性
// window的对象属性有：
// document文档&&history历史&&location地址&&&frames框架&&navigator导航器（获取浏览器是哪个厂商的）&&screen屏幕（获取分辨率啥的）
// 上面前三个重要
window.location.href="www.baidu.com";
window.location.reload();//刷新&&带本地缓存
window.location.reload(true);//不带本地缓存
window.history.back(); &&//上一个历史记录
window.history.forward(); //下一个历史记录
window.history.//获取历史记录的长度
window.history.go(数值); &去第几条历史记录【在去的历史记录中，back和forward不会产生新的history，正数值往前，负值往后】
常用的方法
window.open("3.html","_blank","width=100px,height=300px,top=100px,left=30px,toolBar=yes,location=no");其中toolBar是工具条
window.open("3.html","","fullscreen=yes");
window.close();//这种方式关闭的窗口，在FF只能关闭window.open();打开的窗口
alert(弹出框)，confirm（选择框）&&prompt（输入框）方法
模态弹出框（意思是不点击让当前窗消失，就无法操作其它的）
showModalDialog("url也就是要跳转的页面",参数2,"dialogWidth=200dialogHeight=200px");
第一个参数是将要打开的模态框的地址，参数2是将要传递到模态框的数据，参数3是模态框的一些数据。
参数2要在那个模态框里面接受一下用，
常用的事件
window.onload()=function(){
//页面加载完成后（执行完最后的html）执行里面，无所谓script的位置了
$("id").onclick=function(){
//这是给按钮的点击事件赋值/绑定了一个函数
window.onscroll()=function(){
//浏览器滚动触发此方法
console.log("go &away!!");
// 浏览器支持那个属性就取哪个属性的值,获取浏览器滚动的高度值
var scrollTop = document.body.scrollTop||document.documentElement.scrollT
console.log(scrollTop);
可以通过修改document.body.scrollTop||document.documentElement.scrollTop这两个的值来控制滚动条滚动的距离;[回到顶部]
var top=document.getElementById(‘top‘);
top.onclick=function(){
document.documentElement.scrollTop=0;
document.body.scrollTop=0;
窗口大小变化事件onresize();
window.onresize=function(){
console.log("便便便便");
//获取可视区域的宽高
var width = document.documentElement.clientWidth||document.body.clientWidth||document.innerW
var height=document.documentElement.clientHeight||document.body.clientHeight||document.innerH
console.log(width+"width"+height+"height");
连续性定时器
setInterval(函数名,时间(毫秒单位));//每隔固定的时间调用一次函数
clearInterval(定时器的名字);//停止某个定时器
延时定时器
setTimeout(函数名,时间); &//过了指定的时间后，函数才会执行，只执行一次
clearTimeout(定时器名字); //清除定时器
&文档对象模型
W3c定义的访问html的标准
如何获取获取、修改、添加、和删除标签
HTML文档中的所有内容都是节点
整个页面是文档节点
整个标签是元素节点
标签里面的属性就是属性节点
页面中直接写的文本或者标签之间的空白叫文本节点
注释叫注释节点
节点层级关系：根节点 、父节点、子节点、兄弟节点
获取元素节点方法：
document.getElementById();
var &oinput =document.getElementsByTagName(“标签名”); &返回值是一个集合（下面俩也是，所以是elements）
用instanceof &&&来判断某个对象是不是某个引用类型的实例
alert(oinput &instanceof Array);
document.getElementsByClassName(“clsaa属性的值”)通过class获取(IE8以下的浏览器无法获取)
document.getElementsByName(“name的值”); 有name属性的标签，一般是表单元素用
上面的四种方法都是从整个文档中查找元素节点。我要是想查找某元素（也就是标签、对象）的子节点元素（这个对象.getElementxxxxxx）：
对象.getElementsXXX();
如：document.getElementById("box").getElementsByTagName("div")；ID为box下面的子节点
获取官方定义的属性节点
document.getElementById().属性名------------也就是先获取到元素节点（标签）然后&&.属性名字【返回的是这个属性的值】
设置官方定义的属性&节点的属性值
document.getElementById(“IDname”).属性名=”属性值”；&&&属性值必须要用引号括起来。
获取自定义的属性节点【用不大到啊】
Document.getElementById(“”).getAttribute(“自己写在标签中的属性名”);//得到的是自己写在标签中的属性名的属性值
Document.getElementById().setAttribute(“自己写的属性的属性名“,”这个名的值”);
修改自己写的属性的属性名的属性值
Document.getElementById().removeAttribute(“自己编写的属性名”);//把自己写的属性名删除掉
获取文本属性的方法
innerHTML获取文本标签之间的内容，但是不包括这个文本标签
outerHTML获取文本标签之间的内容，包括这个文本标签
innerText 只获取里面的文本信息&&&不包括里面的标签
常用的元素节点
对象.tagName标签名字&&&&&对象&.className获取class的值。。不能是.class
对象.id.title
对象.属性名.属性值&&&或者$(“id”).style[“width”];
Css脚本化(样式操作)
设置行间样式表的属性的属性值
$(“id”).style.width=“100px “&&&&如果是个border-radius &修改成borderRadius &不认识-
设置内部样式表或外部样式表
$(“id”).style.width=”100px”;
【这是获取行间样式表的方式】也就是$(“id”).style.
获取内部样式表或外部样式表的属性值
Window.getComputedStyle($(“id”),null)[“属性名”]；这是非IE下的获取方法，null指的是伪类，没有就写null
$(“id”).currentStyle[“属性名”]; &&IE浏览器下获取方法
style与getComputedStyle区别：前者可读可写，后者只读，style获取的属性少，只能获取行间样式表中所设置的（如果复合属性能获取到所有的复合属性的值），后者是获取最终的属性，电脑上所有的样式属性
// 封装一个函数，通过这个函数获得相应的属性
function getStyle(element,attr){
if(window.getComputedStyle){
return getComputedStyle(element,null)[attr];
}else if(window.currentStyle){
return element.currentStyle[attr];
return element.style[attr];
console.log(getStyle(元素,"height"));
创建元素节点
Document.createElement(“div”);
只能由document来调用，参数是标签名字
//父节点.appendChild(子节点名字)
//将子节点添加到父节点孩子列表的最后一个
$("list").insertBefore(firstLi,lis) &在谁前面添加。&参数1是新加的，二是旧的
document.body.appendChild(odiv); &一定要记得添加到页面上用这句话
父节点.removeChild(“子节点名字”); &&//移除节点
this.parentNode.parentNode &&&&&&这个parentNode是当前节点的父节点
document.&createTextNode &&创建一个文本节点，（当然只要是创建就要添加到父节点上咯）
对象偏移量
//offsetLeft-------偏移量&left的值（父元素及以上都没没定位就是相对于body，直到找到有定位的为止）
//offsetTop-------偏移量top的值（父元素及以上都没没定位就是相对于body，直到找到有定位的为止）
// offsetWidth-------节点本身的width的值
// offsetHeight------节点的height的值
//offsetParent -----获取该节点上面进行了相对定位的父节点，都没找到就找到了最终进行了相对定位的body
rightW=$("box").offsetParent.offsetWidth-$("box").offsetLeft-$("box").offsetW
后面为一些常用属性方便查找：
clientHeight&&&& 获取对象的高度，不计算任何边距、边框、滚动条，但包括该对象的补白。clientLeft&&&& 获取&&& offsetLeft&&&& 属性和客户区域的实际左边之间的距离。clientTop&&&& 获取&&& offsetTop&&&& 属性和客户区域的实际顶端之间的距离。clientWidth&&&& 获取对象的宽度，不计算任何边距、边框、滚动条，但包括该对象的补白。offsetHeight&&&& 获取对象相对于版面或由父坐标&offsetParent&&&&属性指定的父坐标的高度。offsetLeft&&&& 获取对象相对于版面或由&&offsetParent&&&属性指定的父坐标的计算左侧位置。offsetParent&&&& 获取定义对象&&& offsetTop&&&& 和&&& offsetLeft&&&& 属性的容器对象的引用。offsetTop&&&& 获取对象相对于版面或由&&& offsetTop&&& 属性指定的父坐标的计算顶端位置。offsetWidth&&&& 获取对象相对于版面或由父坐标& offsetParent&属性指定的父坐标的宽度。offsetX&&&& 设置或获取鼠标指针位置相对于触发事件的对象的&&& x&&&& 坐标。offsetY&&&& 设置或获取鼠标指针位置相对于触发事件的对象的&&& y&&&& 坐标。clientX,clientY&& 鼠标当前相对于网页的位置，当鼠标位于页面左上角时clientX=0, clientY=0screenX, screenY是相对于用户显示器的位置
网页可见区域宽： document.body.clientWidth网页可见区域高： document.body.clientHeight网页可见区域宽： document.body.offsetWidth&&& (包括边线的宽)网页可见区域高： document.body.offsetHeight&& (包括边线的宽)网页正文全文宽： document.body.scrollWidth网页正文全文高： document.body.scrollHeight网页被卷去的高： document.body.scrollTop网页被卷去的左： document.body.scrollLeft网页正文部分上： window.screenTop网页正文部分左： window.screenLeft屏幕分辨率的高： window.screen.height屏幕分辨率的宽： wind ow.screen.width屏幕可用工作区高度： window.screen.availHeight屏幕可用工作区宽度：window.screen.availWidth
事件就是用户或者浏览器执行的某种动作 &click load等都是事件的名字
事件处理程序，就是响应事件的函数，事件处理程序的名字都是on开头的。一般都是小写
比方onclick onblur等
HTML事件处理程序&&将事件处理程序（onclick）添加在html的标签中 &无法使用this指针
DOM0 &&&&事件处理程序
JS中得到HTML标签（元素节点），给这个元素节点的事件处理程序赋值一个匿名函数
这个函数就属于此元素节点的一个方法。在该函数中可以使用this指针，可以访问这个元素节点的其他属性
Var btn=document.getElementById(“box”);
Btn.onclick=function(){ &&&&&&&&&&&&&&&&&&&&Btn.onclick=null取消事件处理程序
Alert(this.id)//会出来box；
常用的事件
window.onload=function(){
alert("网页加载完毕");
window.onunload=function(){
// 页面要跳转走时触发，只有IE支持
alert("本页面要死翘翘了");
//一般进行内存空间的释放
window.onscroll=function(){
// 因为只要滚动就调用，所有最简单的操作
window.onresize=function(){
//最简单的操作，触发频率太高了，为了提高效率
document.getElementById(‘pic‘).onload=function(){
图片加载完成事件
alert("图片加载完毕触发我,需要写在图片html的下面，要不然图片都加载完了就没法触发了");
如果一个元素同时具有单击和双击事件如何处理？不过双击用的比较少
元素(对象).onclick=function(){
clearTimeout(timer);
Timer=setTimeout(function(){
Alert(“单击”)}，500)；
元素(对象).ondblclick=function(){
clearTimeout(timer);
Alert(“双击”);
元素(对象).onmouseover=function(){
鼠标从元素外部进入元素内部的时候触发此事件
Document.onmousemove=function(e){
鼠标滑动执行里面的代码，我如果传过一个e来
e.clientX &和e.clientY 得到当前鼠标位置，然后随鼠标运动
元素(对象).onmouseout=function(){
鼠标从元素内部划出到元素外部的时候触发执行这里面代码
元素(对象).onmousedown=function(){
当鼠标点下去的时候执行此处代码
元素(对象).onmouseup=function(){
当鼠标抬起时触发的事件
document.onkeydown=function(){
键盘按下执行此区域
document.onkeyup=function(e ){
键盘抬起执行此区域
e.keyC得到键盘上的操作的键的ascii码
document.onkeypress=function(){
键盘按下可打印的键时执行此区域【你像shift，Capslk（大写锁定） fn ctrl等就不打印】
只有按下字符键盘才触发这里
页面接收事件的顺序
点击div：Div-----body-----html-----document---------window&&&由小及大 &&事件冒泡IE
点击div：Window-----document-----html----body----div &&&由大及小 &&&&事件捕获 网景
分为三步：事件捕获---------&目标阶段---------& 事件冒泡
Window-----document-----html----body===div===body-----html-----document------window
常用的是事件冒泡，当点击div却不想让div得到这个事件而在半路拦截下来的时候才用事件捕获
DOM0级事件处理程序，只会在事件冒泡中执行，在事件捕获中不起作用
DOM2级事件处理程序，添加一个监听事件addEventListener（）
$(“ID”).addEventListener("事件名",函数,布尔值) &&布尔值true表示在事件捕获阶段触发事件，false为事件冒泡阶段触发事件;函数也可以写在外面，只写个函数名
清除事件处理程序用removeEventListener("事件名",函数,布尔值); &&&里面的参数必须和上面的参数一模一样，并且中间的函数必须是函数名，不能是匿名函数
oDiv.addEventListener("click",btnClick,false); &&
// 布尔值true表示在事件捕获阶段触发事件，false为事件冒泡阶段触发事件
document.addEventListener("click",function(){console.log("document")},false)
function btnClick(){console.log("btn");}
每一个事件处理程序都有一个事件对象event，包含了事件的基本信息，有共有的属性
Event.bubbles &&&返回true或false &&判断此事件是否冒泡 &为true可调用-------&
event.stopPropagation(); &阻止此事件的进一步冒泡或者捕获
$(“id”).onclick=function(eventaa){
eventaa.stopPropagation();
Event.是否能取消默认事件 &&如果能取消就调用event.preventDefault()取消
比方说给a标签加点击了取消默认事件，点击后就不跳转了
Event.type &&返回的是事件名 &&看下面例子
function onevent(e){
switch(e.type){
case "mouseover":
console.log("鼠标悬浮");
case "mouseout":
console.log("鼠标离开");
case "click":
console.log("点击我");
window.onload=function(){
$("box").onclick=
$("box").onmouseover=
$("box").onmouseout=
event.currentTarget&&&获取当前正在处理事件的当前元素，比方说我点击了当前div，当前div的currentTarget是div。但是它的父级body也有点击事件，父级里面的currentTarget指的是body。而下面的target都是出来的div &因为我本身点的就是div。Body的事件只是冒泡造成的
Event.target &&&&事件的目标元素 &，点击的当前，而currentTarget &获取到的可能是冒泡造成的获取成父级
浏览器的鼠标事件属性
// 在浏览器可视窗口的位置
console.log("浏览器可视窗口X+"+e.clientX,"浏览器可视窗口Y+"+e.clientY);
//在页面中的位置
console.log("整个页面X："+e.pageX,"整个页面Y："+e.pageY);
//在屏幕上的坐标
console.log("在整个屏幕上的X"+e.screenX,"在整个屏幕上的Y"+e.screenY);
alert("你按得是谁？"+e.button); &//检测按下的是什么键0是左键1是滚轮2是右键
阻止浏览器右键弹出框
Document.oncontextmenu=function(){
世界协调时间，也就是世界时间。从1970年1月1日0点开始
获取当前时间：
// 获取当前时间,传参是无效的
var d=Date();
console.log(d);
// new Date()构造函数获取时间
var d2=new Date();
}