zoukankan      html  css  js  c++  java
  • 一日小结

    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{

    300px;  

            height:300px;  

                  /*firefox*/

            background-color:red9;      /*all ie*/

            *background-color:yellow;         /*ie8*/

            +background-color:pink;        /*ie7*/

            _background-color:orange;       /*ie6*/   

    }

    :root #test { }  /*ie9*/

    @media all and (min-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{

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

  • 相关阅读:
    XCTF Guess-the-Number
    XCTF 3rd-GCTF-2017 hackme
    XCTF IgniteMe
    hdu 1713 相遇周期
    hdu 2092 整数解(一元二次方程解)
    failed to find romfile "efi-virtio.rom"
    在KVM主机和虚拟机之间共享目录
    Ubuntu下载连接(阿里云镜像)
    ubuntu apt-mirror 同步源到本地
    ubuntu 构建 deb 安装包
  • 原文地址:https://www.cnblogs.com/lijingsi9210/p/6002409.html
Copyright © 2011-2022 走看看