我的总结

我就是我 2022-07-12 05:28 119阅读 0赞

[https://zhidao.baidu.com/share/490c2a9d0b57c749a2c23d1bb1b3e888.html][https_zhidao.baidu.com_share_490c2a9d0b57c749a2c23d1bb1b3e888.html]  
[http://www.cnblogs.com/ranran/p/4668071.html][http_www.cnblogs.com_ranran_p_4668071.html]  
[http://www.jianshu.com/p/b4cd4dea0489][http_www.jianshu.com_p_b4cd4dea0489]  
设置表格布局算法：`table{table-layout}`  
设置是否将表格边框折叠为单一边框`border-collapse`

table-layout: fixed;//默认。列宽度由单元格内容设定。
    table-layout: automatic;//列宽由表格宽度和列宽度设定,文字会超出表格。
    border-collapse:collapse;//折叠为单一边框
    text-align:left;//水平对齐方式(left/right/center)
    vertical-align:top;//垂直对齐方式(top/bottom)
    border-collapse:separate;
    border-spacing: 10px 50px;//object.style.borderSpacing="15px"

![答案：1,2,3（这种不实践真是太难做出来了）][1_2_3]

--------------------

### 图片的HTTP请求总结，web图片http请求汇总，网页图片预加载 ###

#### 1.隐藏图片,只有Opera不产生请求。 注意：用visibility: hidden隐藏图片时，在Opera下也会产生请求。(有待测试) ####

#### 2.重复图片，所有浏览器都只产生一次请求（有待测试） ####

<img src="haorooms.jpg" />
    <img src="haorooms.jpg" />
    .test1 { background: url(haorooms.jpg) }
    .test2 { background: url(haorooms.jpg) }

#### 3.背景仅在应用的元素在页面中存在时，才会产生请求 ####

#### 4.Opera和Firefox对于用display: none隐藏的元素背景，不会产生HTTP请求。仅当这些元素非display: none时，才会请求背景图片。 ####

#### 5.多重背景 ####

//只会请求http2.jpg这一张图片，原因是test1的class把上面的给覆盖掉了，所有只请求后面的一张图片
    <style type="text/css"> .test1 { background: url(haorooms.jpg); } .test1 { background: url(http2.jpg); } </style>
    <div class="test1">test1</div>
    
    //那么http请求如下：webkit引擎浏览器对背景图都请求
    <style type="text/css"> .test1 { background-image:url("haorooms.jpg"),url("http2.jpg");} </style>
    <div class="test1">test1</div>

#### 6.触发hover时，才会请求hover状态下的背景。不触发的话，只请求默认的背景图片。 ####

#### 7.只有Opera不会马上请求图片，当添加到DOM树上时，Opera才会发送请求。 ####

#### 8.在无JS支持的环境下，可以采用隐藏元素来预加载 ####

![有待测试][SouthEast]

### 总:[http://www.haorooms.com/post/web\_http\_request][http_www.haorooms.com_post_web_http_request] ###

1、对于隐藏图片和隐藏元素的背景，Opera不会产生请求。  
2、对于隐藏元素的背景，Firefox也不会产生请求。  
3、对于尚未插入DOM树的img元素，Opera不会产生请求。  
4、基于webkit引擎的Safari和Chrome，支持多背景图。  
5、其它情景，所有主流浏览器保持一致。

--------------------

![这个当真是不知，据说选12456][12456]

--------------------

### 13>>2=3 -13>>2=? ###

alert(5*015===5.075)      //false
    13>>2=3 -13>>2=?
    var temp;
    temp = 14 << 2;
    /* 14 的二进制是 00111000 00001110 向左位移2位 00111000 = 56 */
    alert(temp);
    // 弹出【56】

13|5    //按位或：13 
    13&5    //按位与：5

var date = new Date();   
    var mouth = date.getMonth();    //js获取当前日期的月份

sort(); //按字符排序的算法。
    var arr = [1,2,55,12,88];
    arr.sort();//ASCII字符代码从小到大排，arr结果为[1,12,2,55,88];

<span style="font-size:18px;">
        isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;
        //isChrome=true时，为chrome浏览器
    </span>

### 进制转化 ###

//10->2
    <span>123.toString(2);</span>

### 回车键提交 ###

document.onkeydown = function(event){  
        event = event?event:window.event;  
        if (event.keyCode == 13) {  
            alert(“hello world!”);  
        }  
    };

var s="tencent is perfect";
    var arr=s.split(" ");
    s="";
    for(var i=0;i<arr.length;i++){
        s+=arr[i]+(i+1)+" ";
    }

### 编写js的类，使其拥有public和private类型的属性和方法 ###

### 一些常用的网络优化工具 ###

> 优化大师，超级兔子

SEO（Search Engine Optimization）缩写而来， 中文意译为“搜索引擎优化”。

SEO优化工具：TrafficTravis——SEO分析工具；Backlinkwatch.com—反链检测；XENU Link Sleuth

死链检测；SEO Tool Bar (火狐插件)；SEO Quake (火狐插件)

### css的样式在不同类型的浏览器之间的显示差异如何解决 ###

答：（个人理解）先判断为何种浏览器，再为不同浏览器加载不同的css  
a. CSS中几种浏览器对不同关键字的支持，可进行浏览器兼容性重复定义 !important 可被FireFox和IE7识别 \* 可被IE6、IE7识别 \_ 可被IE6识别 \*+ 可被IE7识别  
b. 应用条件注释（只对IE有效）,因为IE各版本的浏览器对我们制作的WEB标准的页面解释不一样，具体就是对CSS的解释不同，我们为了兼容这些，可运用条件注释来各自定义，最终达到兼容的目的。  
比如：

<!DOCTYPE html>  
    <html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>三栏布局-浮动方法</title>  
    <style type="text/css"> body,div,p{ margin:0; padding:0; } #wrap { padding:0 300px 0 200px; *overflow:hidden;} #main { float:left; width:100%; height:600px; background:#fffaba;} #left, #right { position:relative; height:600px; _display:inline;} #left { width:200px; float:left; margin-left:-100%; right:200px; _right:-300px; background:#8fc41f;} #right { width:300px; float:right; margin-right:-300px; background:#00b7ef;} </style>  
    </head>  
    <body>  
    <span style="white-space:pre"></span>
    <div id="wrap">  
        <div id="main">main</div>  
        <div id="left">left</div>  
        <div id="right">right</div>  
    </div>  
    </body>  
    </html>

### 清除浮动的方法 ###

//01
    <style type="text/css"> .div1{ background:#000080;border:1px solid red;/*解决代码*/height:200px;} .div2{ background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{ float:left;width:20%;height:200px;background:#DDD} .right{ float:right;width:30%;height:80px;background:#DDD} </style> 
    <div class="div1"> 
        <div class="left">Left</div> 
        <div class="right">Right</div> 
    </div>
    <div class="div2">div2</div>
    /*原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题
    优点：简单，代码少，容易掌握
    缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
    建议：不推荐使用，只建议高度固定的布局时使用*/

//02
    <style type="text/css"> .div1{ background:#000080;border:1px solid red} .div2{ background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{ float:left;width:20%;height:200px;background:#DDD} .right{ float:right;width:30%;height:80px;background:#DDD} /*清除浮动代码*/ .clearfloat{ clear:both} </style> 
    <div class="div1"> 
        <div class="left">Left</div> 
        <div class="right">Right</div>
        <div class="clearfloat"></div>
    </div>
    <div class="div2">div2</div>
    /*原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
    优点：简单，代码少，浏览器支持好，不容易出现怪问题
    缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不爽
    建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法*/

//03
    <style type="text/css"> .div1{ background:#000080;border:1px solid red;} .div2{ background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{ float:left;width:20%;height:200px;background:#DDD} .right{ float:right;width:30%;height:80px;background:#DDD} /*清除浮动代码*/ .clearfloat:after{ display:block;clear:both;content:"";visibility:hidden;height:0} .clearfloat{ zoom:1} </style> 
    <div class="div1 clearfloat"> 
        <div class="left">Left</div> 
        <div class="right">Right</div> 
    </div>
    <div class="div2">div2</div>
    /*原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
    优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
    缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持
    建议：推荐使用，建议定义公共类，以减少CSS代码*/

//04
    <style type="text/css"> .div1{ background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden} .div2{ background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} .left{ float:left;width:20%;height:200px;background:#DDD} .right{ float:right;width:30%;height:80px;background:#DDD} </style> 
    <div class="div1"> 
        <div class="left">Left</div> 
        <div class="right">Right</div>
    </div>
    <div class="div2">div2</div>
    /*原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
    优点：简单，代码少，浏览器支持好
    缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
    建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用*/

//05
    <style type="text/css"> .div1{ background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto} .div2{ background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} .left{ float:left;width:20%;height:200px;background:#DDD} .right{ float:right;width:30%;height:80px;background:#DDD} </style> 
    <div class="div1"> 
        <div class="left">Left</div> 
        <div class="right">Right</div>
    </div>
    <div class="div2">div2</div>
    /*原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
    优点：简单，代码少，浏览器支持好
    缺点：内部宽高超过父级div时，会出现滚动条。
    建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。*/

//06
    <style type="text/css"> .div1{ background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left} .div2{ background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both} .left{ float:left;width:20%;height:200px;background:#DDD} .right{ float:right;width:30%;height:80px;background:#DDD} </style> 
    <div class="div1"> 
        <div class="left">Left</div> 
        <div class="right">Right</div>
    </div>
    <div class="div2">div2</div>
    /*原理：所有代码一起浮动，就变成了一个整体
    优点：没有优点
    缺点：会产生新的浮动问题。
    建议：不推荐使用，只作了解。*/

//07
    <style type="text/css"> .div1{ background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;} .div2{ background:#800080;border:1px solid red;height:100px;width:98%;} .left{ float:left;width:20%;height:200px;background:#DDD} .right{ float:right;width:30%;height:80px;background:#DDD} </style> 
    <div class="div1"> 
        <div class="left">Left</div> 
        <div class="right">Right</div>
    </div>
    <div class="div2">div2</div>
    /*原理：将div属性变成表格
    优点：没有优点
    缺点：会产生新的未知问题
    建议：不推荐使用，只作了解*/

//08
    <style type="text/css"> .div1{ background:#000080;border:1px solid red;margin-bottom:10px;zoom:1} .div2{ background:#800080;border:1px solid red;height:100px} .left{ float:left;width:20%;height:200px;background:#DDD} .right{ float:right;width:30%;height:80px;background:#DDD} .clearfloat{ clear:both} </style> 
    <div class="div1"> 
        <div class="left">Left</div> 
        <div class="right">Right</div><br class="clearfloat" />
    </div>
    <div class="div2">div2</div>
    /*原理：父级div定义zoom:1来解决IE浮动问题，结尾处加br标签clear:both
    建议：不推荐使用，只作了解*/

[https_zhidao.baidu.com_share_490c2a9d0b57c749a2c23d1bb1b3e888.html]: https://zhidao.baidu.com/share/490c2a9d0b57c749a2c23d1bb1b3e888.html
[http_www.cnblogs.com_ranran_p_4668071.html]: http://www.cnblogs.com/ranran/p/4668071.html
[http_www.jianshu.com_p_b4cd4dea0489]: http://www.jianshu.com/p/b4cd4dea0489
[1_2_3]: /images/20220711/a7c9d4e9fc274422aa99695629c63fbe.png
[SouthEast]: /images/20220711/4439102d8c8b4bc7b2d933ac07894b9c.png
[http_www.haorooms.com_post_web_http_request]: http://www.haorooms.com/post/web_http_request
[12456]: /images/20220711/c7eab4983dcb48c3a9d72e85de0b99b8.png