一日小结

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事件流”:三个阶段:事件捕捉,目标阶段,事件冒泡

时间: 2024-10-27 16:52:14

一日小结的相关文章

英语语法最终珍藏版笔记- 21it 用法小结

it 用法小结 it 在英语中的意思较多,用法较广,现总结如下. 一.it作句子的真正主语 1.it 指前面已经提到过的人或事物,有时指心目中的或成为问题的人或事物,作真正主语. 例如: What’s this? -It is a sheep? 这是什么??这是一只绵羊. Who is it? -It’s me (I). 谁??是我. It’s the wind shaking the window. 是风刮得窗户响. 2.it指时间.季节.一般用在无人称动词的主语. 例如: What time

使用Apache POI导出Excel小结--导出XLS格式文档

使用Apache POI导出Excel小结 关于使用Apache POI导出Excel我大概会分三篇文章去写 使用Apache POI导出Excel小结--导出XLS格式文档 使用Apache POI导出Excel小结--导出XLSX格式文档 使用Apache POI导出Excel--大数量导出 导出XLS格式文档 做企业应用项目难免会有数据导出到Excel的需求,最近在使用其,并对导出Excel封装成工具类开放出来供大家参考.关于Apache POI Excel基本的概念与操作我在这里就不啰嗦

【转载】小结一下linux 2.6内核的四种IO调度算法

在LINUX 2.6中,有四种关于IO的调度算法,下面综合小结一下: 1) NOOP NOOP算法的全写为No Operation.该算法实现了最最简单的FIFO队列,所有IO请求大致按照先来后到的顺序进行操作.之所以说“大致”,原因是NOOP在FIFO的基础上还做了相邻IO请求的合并,并不是完完全全按照先进先出的规则满足IO请求.NOOP假定I/O请求由驱动程序或者设备做了优化或者重排了顺序(就像一个智能控制器完成的工作那样).在有些SAN环境下,这个选择可能是最好选择.Noop 对于 IO

Android基础入门教程——8.1.3 Android中的13种Drawable小结 Part 3

Android基础入门教程--8.1.3 Android中的13种Drawable小结 Part 3 标签(空格分隔): Android基础入门教程 本节引言: 本节我们来把剩下的四种Drawable也学完,他们分别是: LayerDrawable,TransitionDrawable,LevelListDrawable和StateListDrawable, 依旧贴下13种Drawable的导图: 1.LayerDrawable 层图形对象,包含一个Drawable数组,然后按照数组对应的顺序来

Android基础入门教程——8.1.2 Android中的13种Drawable小结 Part 2

Android基础入门教程--8.1.2 Android中的13种Drawable小结 Part 2 标签(空格分隔): Android基础入门教程 本节引言: 本节我们继续来学习Android中的Drawable资源,上一节我们学习了: ColorDrawable:NinePatchDrawable: ShapeDrawable:GradientDrawable!这四个Drawable~ 而本节我们继续来学习接下来的五个Drawable,他们分别是: BitmapDrawable:Insert

安卓小结《1》

Activity的生命周期和启动模式的知识点小结: 1.如果Activity切换的时候,新Activity是透明,旧的不会走onStop方法. 2.新的Activity切换的时候,旧Activity  会先执行,onpause,然后才会启动新的activity. 3. Activity在异常情况下被回收时,onSaveInstanceState方法会被回调,回调时机是在onStop之前,当Activity被重新创建的时 候,onRestoreInstanceState方法会被回调,时序在onSt

date命令小结

在写linux shell脚本时,date是经常要用到的一个命令,这篇文章就此做个小结,以防自己用到时到处找 1.最基本的,显示当前的具体时期:直接敲入 date即可,如下, [email protected]:~/scripts$ date 2015年 01月 03日 星期六 21:46:49 CST 2.显示某个文件上次修改的时间:date -r file [email protected]:~/scripts$ date -r save.sh 2015年 01月 02日 星期五 23:29

java 小结2 多态问题。

面向对象这个东西,其实我们一直是不是都没有感觉到自己在用,以后我一定要用用.以前学c#时候认真的看过一次,最近一直研究java.随便再看看. 多态问题: 在java中多态分为(1)编译时多态和(2)运行时多态 (1)编译时多态比较容易理解:其实就是通过方法重载,就是方法的重载,同一个函数名但是可以参数不一样.这就是重载(so easy) (2)运行时多态:这个是通过方法覆盖实现的,就是子类在继承父类的时候,通过对某个方法的重写,覆盖父类方法. 简单的说:比如我们有个父类A,子类B通过Extend

php操作xml小结

<?php #php操作xml,SimpleXMLElement类小结 header('Content-type:text/html;charset=utf-8;'); //1.构造函数 /* $xmlstring=<<<XML <?xml version="1.0" encoding="utf-8"?> <note  xmlns:b="http://www.w3school.com.cn/example/&quo