首页 > 代码库 > 一日小结
一日小结
1.关于块级元素和行内元素
首先：对于块级元素来说：块级元素总是独占一行，另起一行开始，其后的元素也另起一行开始。
width height padding margin可以控制；
其次：对于行内元素来说：和相邻的行内元素在同一行显示；
width height padding margin 一般不可控制；
最后：浏览器默认的一些inline-block元素：
<input><label><img><button><textarea>;
块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding
2.<img>的alt 和 title
alt：图片不出现时显示的文字信息；
title：当鼠标移动到图片上时显示的文字介绍
3.盒模型问题
标准盒模型：margin+border+padding+content;
IE盒模型：在已知宽度的基础上在盒子内部进行的margin+padding+content；
IE 盒子模型、标准 W3C 盒子模型；IE 的content部分包含了 border 和 pading;
4.css的hack模式
#text{
width:300px;
height:300px;
/*firefox*/
background-color:red\9; /*all ie*/
*background-color：yellow; /*ie8*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/
}
:root #test { } /*ie9*/
@media all and (min-width:0px)
{ #test {} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0)
{ #test {background-color:gray;} } /*chrome and safari*/
5.rgba()兼容ie8：
CSS：
//一般的高级浏览器都支持
background: rgba(255,255,255,0.1);
//IE8下
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);
第二句话的意思就是当上一行的透明度不起作用的时候执行。这句话的意思本来是用来做渐变的。但是这个地方不需要渐变。所以两个颜色都设置成了相同的颜色。
这个颜色“#19ffffff”是由两部分组成的。
第一部是#号后面的19 。是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如运行截图所示。
第二部分是19后面的六位 。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(255,255,255)对应#ffffff；就是白色。
6.未知元素宽高的居中定位：
#div1{
width: 200px;
height: 200px;
margin:auto;
position: absolute; //父元素需要相对定位
left: 0;
top: 0;
right: 0;
bottom: 0;
}
7.html常见兼容性问题？
。1.双边距BUG float引起的 使用display
。2.3像素问题 使用float引起的 使用dislpay:inline -3px
。3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
。4.Ie z-index问题 给父级添加position:relative
。5.Png 透明 使用js代码 改
。6.Min-height 最小高度 ！Important 解决’
。7.select 在ie6下遮盖 使用iframe嵌套
。8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
。9.IE5-8不支持opacity，解决办法：
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}
。10. IE6不支持PNG透明背景，解决办法: IE6下使用gif图片。
8.权重问题：
!important>id>class>tag
9.css属性继承
可继承： font-size font-family color, ul li dl dd dt;
不可继承 ：border padding margin width height ;
10.js的数据类型：
。1.string；
。2.number；
。3.null；
。4.boolean；
。5.object；
。6.undefined；
11.强制数据类型转换和隐式数据类型转换
强制：parseInt（）；parseFloat（）；Number（）；
隐式：== ，!!;
12.数组的几种API：
splice（）切割数组的形式
join（）将数组转换为字符串
pop（）尾部删除
push（）尾部添加
unshift（）头部添加
shift（）头部删除
slice（）从原数组中从start下标开始到 end-1 下标之间的项组成的新数组
concat（）一个新数组，新数组是将参数添加到原数组中构成的
reverse（）数组的反序
sort（）对按指定的参数数组元素排序，返回排序后的数组地址
length：数组的长度即数组中元素的个数；
prototype：供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。
13.普通事件和事件绑定
普通事件 var btn=document.getElementbyId(#btn);
btn.onclick=function(){
alert(1);
}
btn.onclick=function(){
alert(2);
}
事件绑定 var btn=document.getElementbyId(#btn)
btn.addEventListener("click",function(){
alert(1),false});
btm.addEventListener("click",function(){
alert(2),false});
执行上面的代码会先alert 1 再 alert 2
普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。
addEventListener不兼容低版本IE
普通事件无法取消
addEventLisntener还支持事件冒泡+事件捕获
14,ie和标准模式下的兼容写法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
14call和apply
call：
call(thisObj，Object1,Object2...)
调用一个对象的一个方法，以另一个对象替换当前对象。
说明：
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。
apply：
apply(thisObj，[argArray])
定义：应用某一对象的一个方法，用另一个对象替换当前对象。
说明：
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。
15.增删改查
appendChild；
insertBefore；
replaceChild；
removeChild；
16，事件流模型；
“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡
一日小结