HTML&&CSS基础知识点整理

时间 2020-05-15

原文原文链接

HTML&&CSS基础知识点整理

1、WEB标准：一系列标准的集合

1. 结构（Structure）：html   语言：XHTML[可扩展超文本标识语言]和XML[可扩展标记语言]
2. 表现（Preasentation）:css
3. 行为（Behavior）：JS[DOM+ES]

其中一些小的具体要求：css

结构：标签小写、闭合、不能随意嵌套
CSS+JS：精良使用外链，不用行内

优势：

1. 易于维护
2. 页面响应快
3. 可访问性高
4. 提升设备兼容性
5. 易被解析（搜索引擎）

Ps：html

可维护性：出现问题时，修复Bug成本低且维护性好，还有一点是代码可以被其余开发人员理解。
可访问性：全部人都能理解，解析

2、浏览器内核

> - IE：Trident内核(多称：IE内核)
> - Chrome：Webkit内核 ==>  Blink内核
> - Firefox：Gecko内核(多称：IE内核)
> - Safari：Webkit内核
> - Opear：Preato====>Webkit内核  ====>  Blink内核

3、渲染原理

一、涉及到的概念

Dom Tree：浏览器将Html解析成属性的数据结构
Parse(构建Dom树)：生成Dom树的行为
Css Rule Tree：浏览器将Css解析成属性的数据结构
Render Tree：DOM和CSSOM合并后生成Render Tree
Construct(构建渲染树)：解析对应的CSS样式文件信息（包括js生成的样式和外部css文件），而这些文件信息以及HTML中可见的指令（如），构建渲染树
Layout：根据Render Tree已知各个节点以及节点之间的从属关系，计算节点在屏幕中的位置
Painting：根据Layout算出来的结果，经过显卡，把内容滑倒屏幕上
Reflow(回流)：当浏览器发现某个部分发生了点变化影响了布局，须要倒回去从新渲染，这个回退的过程

二、==步骤==

解析HTML：浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的全部子节点都构建好后才会去构建当前节点的下一个兄弟节点。
解析CSS：将CSS解析成 CSS Rule Tree 。
生成渲染树：根据DOM树和CSSOM来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，由于一些像Header或display:none的东西就不必放在渲染树中了。
布局渲染树：已知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。从根节点递归调用，计算每个元素的大小、位置等，给出每一个节点所应该在屏幕上出现的精确坐标
绘制渲染树：遍历render树，并使用UI后端层绘制每一个节点。

三、Reflow{重构/回流/重排}(对应Layout 改变了计算结果)

当渲染树中的一部分(或所有)由于元素的规模尺寸，布局，隐藏等改变而须要从新构建, 这就称为回流(reflow)。== 每一个页面至少须要一次回流，就是在页面第一次加载的时候(第一次布局也称做回流)==。
reflow 几乎是没法避免的。如今界面上流行的一些效果，好比树状目录的折叠、展开（实质上是元素的显示与隐藏：display:none和visibility:hidden）等，都将引发浏览器的 reflow。鼠标滑过、点击……只要这些行为引发了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引发它内部、周围甚至整个页面的从新渲染。一般咱们都没法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。前端

四、Repaint/Redraw{重绘}(对应Painting 改变了屏幕显示样式)

改变某个元素的背景色、文字颜色、边框颜色等等== (外观属性)==不影响它周围或内部布局的属性时，屏幕的一部分要重画，可是元素的几何尺寸== (布局)==没有变。

五、触发Reflow条件

页面渲染初始化；(没法避免)
添加或删除可见的DOM元素；
元素位置的改变，或者使用动画；
元素尺寸的改变——大小，外边距，边框；
浏览器窗口尺寸的变化（resize事件发生时）；
填充内容的改变，好比文本的改变或图片大小改变而引发的计算值宽度和高度的改变；
读取某些元素属性：（offsetLeft/Top/Height/Width,　clientTop/Left/Width/Height,　scrollTop/Left/Width/Height,　width/height,　getComputedStyle(),　currentStyle(IE)

六、触发Repaint条件

改变元素外观属性。如：color，background-color等。

七、Reflow和Repaint的关系

在回流(重排)的时候，浏览器会使布局发生变化。完成回流将变化后的新页面绘制到页面上，则触发重绘。
反之，重绘时不会不必定会使布局发生变化，这不必定触发重排(回流)jquery

有些状况下，好比修改了元素的样式，浏览器并不会马上reflow 或 repaint 一次，而是会把这样的操做积攒一批，而后作一次 reflow，这又叫==异步 reflow 或增量异步 reflow==。可是在有些状况下，好比==resize== 窗口，改变了页面默认的字体等。对于这些操做，==浏览器会立刻进行 reflow==。程序员

==重排(回流)一定会引起重绘，但重绘不必定会引起重排(回流)==web

八、display:none和visibility:hidden

display:none 的节点不会被加入Render Tree，若是某个节点最开始是不显示的，设为display:none是更优的
visibility: hidden 的节点会被加入Render Tree
display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，由于没有发现位置变化。

九、优化重排重绘

==重绘重排的代价：耗时，致使浏览器卡慢==chrome

须要大量重绘重排的场景，例如：动画

优化：express

==浏览器==本身的优化：==(屡次攒一次)==浏览器会维护1个队列，把全部会引发回流、重绘的操做放入这个队列，等队列中的操做到了必定的数量或者到了必定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让屡次的回流、重绘变成一次回流重绘。
==程序员==注意的优化：减小重绘和重排就是要==减小对渲染树的操做==，能够合并屡次的DOM和样式的修改。并减小对style样式的请求。如下：

直接改变元素的className(==一次改变多个须要一样的样式变化的元素==)
display：none；先设置元素为display：none；而后进行页面布局等操做；设置完成后将元素设置为display：block；这样的话就只引起两次重绘和重排；(将重绘重排隐藏起来操做)
不要常常访问浏览器的flush队列属性；若是必定要访问，能够利用缓存。将访问的值存储起来，接下来使用就不会再引起回流
使用cloneNode(true or false) 和 replaceChild 技术，引起一次回流和重绘；(==操做复制节点，将改变后的节点一次从新绘制==)
将须要屡次重排的元素，position属性设为absolute或fixed，元素脱离了文档流，它的变化不会影响到其余元素；(==脱离文档会不会再影响页面布局==)
若是须要建立多个DOM节点，可使用DocumentFragment建立完后一次性的加入document；(==一次改变多个==)
==尽可能不要使用table布局==

4、依赖管理

5、AMD、CMD和CommonJs

1. 前端模块规范有三种：CommonJs,AMD和CMD。

* CommonJs用在服务器端，AMD和CMD用在浏览器环境
* AMD 是 RequireJS 在推广过程当中对模块定义的规范化产出。
* MD 是 SeaJS 在推广过程当中对模块定义的规范化产出。
* AMD:提早执行（异步加载：依赖先执行）+延迟执行
* CMD:延迟执行（运行到需加载，根据顺序执行）

2. 模块

模块就是实现特定功能的文件，把几个函数放在一个文件里就构成了一个模块。
须要的时候加载这个文件，调用其中的函数便可。

（1）函数写法编程

function f1(){
　　　　//...
　　}
　　function f2(){
　　　　//...
　　}

==缺点==：
这样作会==污染全局变量==，没法保证不与其余模块发生==变量名冲突==，并且==模块成员之间没什么关系==。后端

（2）对象写法

var module = {
　　　　star : 0,
　　　　f1 : function (){
　　　　　　//...
　　　　},
　　　　f2 : function (){
　　　　　　//...
　　　　}
　　};
 module.f1();
 module.star = 1;

==优势==：模块写成一个对象，模块成员都封装在对象里，经过调用对象属性，访问使用模块成员。
==缺点==：==暴露了模块成员==，==外部能够修改模块内部状态==。

（3）当即执行函数

var module = (function(){
　　　　var star = 0;
　　　　var f1 = function (){
　　　　　　console.log('ok');
　　　　};
　　　　var f2 = function (){
　　　　　　//...
　　　　};
         return {
            f1:f1,
            f2:f2
         };
　　})();
    module.f1();  //ok
    console.log(module.star)  //undefined

==优势==：外部没法访问内部私有变量

3.CommonJs

CommonJS是服务器端模块的规范，由Node推广使用。
因为服务端编程的复杂性，若是==没有模块很难与操做系统及其余应用程序互动==。

CommonJS规范:

一个单独的文件就是一个模块。每个模块都是一个单独的做用域，也就是说，在该==模块内部定义的变量，没法被其余模块读取==，除非定义为==global==对象的属性。
==输出模块变量==的最好方法是使用==module.exports==对象。
==加载模块使用require==方法，该方法==读取一个文件并执行==，==返回文件内部module.exports对象==

使用方法以下：

//math.js
exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
      sum += args[i++];
    }
    return sum;
};

//increment.js
var add = require('math').add;
exports.increment = function(val) {
    return add(val, 1);
};

//index.js
var increment = require('increment').increment;
var a = increment(1); //2

问题：

require 是同步的。模块系统须要同步读取模块文件内容，并编译执行以获得模块接口。
但在浏览器端问题多多。

缘由：

浏览器端，加载 JavaScript 最佳、最容易的方式是在 document 中插入script标签。
但脚本标签天生异步，传统 CommonJS 模块在浏览器环境中没法正常加载。

解决思路

开发一个服务器端组件，对模块代码做静态分析，将模块与它的依赖列表一块儿返回给浏览器端。这很好使，但须要服务器安装额外的组件，并所以要调整一系列底层架构。
另外一种解决思路是，用一套标准模板来封装模块定义：

define(function(require, exports, module) {

  // The module code goes here

});

这套模板代码为模块加载器提供了机会，使其能在模块代码执行以前，对模块代码进行静态分析，并动态生成==依赖列表==。

//math.js
define(function(require, exports, module) {
  exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
      sum += args[i++];
    }
    return sum;
  };
});

//increment.js
define(function(require, exports, module) {
  var add = require('math').add;
  exports.increment = function(val) {
    return add(val, 1);
  };
});

//index.js
define(function(require, exports, module) {
  var inc = require('increment').increment;
  inc(1); // 2
});

4.AMD(异步模块定义)

* AMD是"Asynchronous Module Definition"的缩写。

* 因为不是JavaScript原生支持，使用AMD规范进行页面开发须要用到对应的库函数RequireJS

* AMD 是 RequireJS 在推广过程当中对模块定义的规范化的产出

* 采用异步方式加载模块，模块的加载不影响它后面语句的运行。全部依赖这个模块的语句，都定义在一个回调函数中，等到加载完成以后，这个回调函数才会运行。

==RequireJS主要解决两个问题：==

多个js文件可能有依赖关系，被依赖的文件须要早于依赖它的文件加载到浏览器
js加载的时候浏览器会中止页面渲染，加载文件越多，页面失去响应时间越长

==RequireJs采用require()语句加载模块，不一样于CommonJS，它要求两个参数：==

第一个参数[module]，是一个数组，里面的成员就是要加载的模块；
第二个参数callback，则是加载成功以后的回调函数。math.add()与math模块加载不是同步的，浏览器不会发生假死。

require([module], callback);

require([increment'], function (increment) {
　   increment.add(1);
});

==define()函数==

RequireJS定义了一个函数 define，它是全局变量，用来定义模块:
define(id?, dependencies?, factory);

==参数说明：==

id：指定义中模块的名字，可选；若是没有提供该参数，模块的名字应该默认为模块加载器请求的指定脚本的名字。若是提供了该参数，模块名必须是“顶级”的和绝对的（不容许相对名字）。
依赖dependencies：是一个当前模块依赖的，已被模块定义的模块标识的数组字面量。

依赖参数是可选的，若是忽略此参数，它应该默认为["require", "exports", "module"]。然而，若是工厂方法的长度属性小于3，加载器会选择以函数的长度属性指定的参数个数调用工厂方法。

工厂方法factory，模块初始化要执行的函数或对象。若是为函数，它应该只被执行一次。若是是对象，此对象应该为模块的输出值。

define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
      exports.verb = function() {
          return beta.verb();
          //Or:
          return require("beta").verb();
      }
  });

==RequireJs使用例子==

require.config是用来定义别名的，在paths属性下配置别名。而后经过requirejs(参数一，参数二)；
第一个参数是数组，传入咱们须要引用的模块名
第二个参数是个回调函数，回调函数传入一个变量，代替刚才所引入的模块。

main.js
//别名配置
requirejs.config({
    paths: {
        jquery: 'jquery.min' //能够省略.js
    }
});
//引入模块，用变量$表示jquery模块
requirejs(['jquery'], function ($) {
    $('body').css('background-color','red');
});

引入模块也能够只写require()。requirejs经过define()定义模块，定义的参数上同。在==此模块内的方法和变量外部是没法访问的==，只有经过return返回才行.

//将该模块命名为math.js保存。
//math.js
define('math',['jquery'], function ($) {//引入jQuery模块
    return {
        add: function(x,y){
            return x + y;
        }
    };
});

//main.js引入模块方法
require(['jquery','math'], function ($,math) {
    console.log(math.add(10,100));//110
});

5.CMD

* CMD 即Common Module Definition通用模块定义
* CMD规范是国内发展出来的
* CMD有个浏览器的实现SeaJS
* SeaJS要解决的问题和requireJS同样，只在🌟模块定义方式和模块加载（能够说运行、解析时机上有所不一样。

==CMD规范：==

（1）一个模块就是一个文件。代码的书写格式以下:

define(function(require, exports, module) {

  // 模块代码

});

require是能够把其余模块导入进来的一个参数;
exports是能够把模块内的一些属性和方法导出的;
module 是一个对象，上面存储了与当前模块相关联的一些属性和方法。

🌟🌟==AMD是依赖关系前置,在定义模块的时候就要声明其依赖的模块;==
🌟🌟==CMD是按需加载依赖就近,只有在用到某个模块的时候再去require：==

//CMD（seajs）使用例子
// 定义模块  myModule.js
define(function(require, exports, module) {
  var $ = require('jquery.js')
  $('div').addClass('active');
  exports.data = 1;
});

// 加载模块
seajs.use(['myModule.js'], function(my){
    var star= my.data;
    console.log(star);  //1
});




// CMD
define(function(require, exports, module) {
  var a = require('./a')
  a.doSomething()
  // 此处略去 100 行
  var b = require('./b') // 依赖能够就近书写
  b.doSomething()
  // ... 
})


// AMD 
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
  a.doSomething()
  // 此处略去 100 行
  b.doSomething()
  ...
})

🌟==以上明显的不一样就是依赖加载方式不一样，具体表如今define的参数构成上，但AMD和CMD都是异步加载==

6、兼容性

1. HTML对象获取问题

FireFox：document.getElementById("idName");
ie:document.idname或者document.getElementById("idName").

==解决办法：统一使用document.getElementById("idName");==

2. const问题

Firefox下,可使用const关键字或var关键字来定义常量;
IE下,只能使用var关键字来定义常量.

==解决方法：统一使用var关键字来定义常量==

3. event.x与event.y问题

IE下,event对象有x,y属性,可是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,可是没有x,y属性.

==解决方法：使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX==

4. window.location.href问题

IE或者Firefox2.0.x下,可使用window.location或window.location.href;
Firefox1.5.x下,只能使用window.location.

==解决方法：使用window.location来代替window.location.href.==

5. frame问题

如下面的frame为例：

(1)访问frame对象:

IE:使用window.frameId或者window.frameName来访问这个frame对象. frameId和frameName能够同名。
Firefox:只能使用window.frameName来访问这个frame对象.

==另外，在IE和Firefox中均可以使用window.document.getElementById("frameId")来访问这个frame对象.==

(2)切换frame内容:

在 IE和Firefox中均可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容.

若是须要将frame中的参数传回父窗口(注意不是opener,而是parent frame)，能够在frame中使用parent来访问父窗口。例如：parent.document.form1.filename.value="Aqing";

6. 模态和非模态窗口问题

IE下,能够经过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.

==解决方法：直接使用window.open(pageURL,name,parameters)方式打开新窗口。
若是须要将子窗口中的参数传递回父窗口,能够在子窗口中使用window.opener来访问父窗口.==

例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";

7. firefox与IE的父元素(parentElement)的区别

IE：obj.parentElement

firefox：obj.parentNode

==解决方法: 由于firefox与IE都支持DOM,所以使用obj.parentNode是不错选择.==

8. document.formName.item(”itemName”) 问题

问题说明：IE下，可使用document.formName.item(”itemName”) 或document.formName.elements ["elementName"];Firefox 下，只能使用document.formName.elements["elementName"]。

==解决方法：统一使用document.formName.elements["elementName"]。==

9. 集合类对象问题

问题说明：IE下，可使用 () 或 [] 获取集合类对象;Firefox下，只能使用 [ ]获取集合类对象。

==解决方法：统一使用 [] 获取集合类对象==。

10. 自定义属性问题

IE下，可使用获取常规属性的方法来获取自定义属性，也可使用getAttribute() 获取自定义属性;
Firefox下，只能使用getAttribute() 获取自定义属性。

==解决方法：统一经过getAttribute() 获取自定义属性。==

11. input.type属性问题

问题说明：IE下input.type属性为只读;可是Firefox下input.type属性为读写。

==解决办法：不修改input.type属性。若是必需要修改，能够先隐藏原来的input，而后在一样的位置再插入一个新的input元素。==

12. event.srcElement问题

IE下，even对象有srcElement属性，可是没有target属性;
Firefox下，even对象有target属性，可是没有srcElement属性。

==解决方法：使用srcObj = event.srcElement ?event.srcElement : event.target;==

若是考虑第8条问题，就改用myEvent代替event便可。

13. body载入问题

Firefox的body对象在body标签没有被浏览器彻底读入以前就存在;
IE的body对象则必须在body标签被浏览器彻底读入以后才存在。

Ps：经验证，IE六、Opera9以及FireFox2中不存在上述问题，单纯的JS脚本能够访问在脚本以前已经载入的全部对象和元素，即便这个元素尚未载入完成。

14. 事件委托方法

IE下，使用document.body.onload = inject; 其中function inject()在这以前已被实现;
在Firefox下，使用document.body.onload = inject();

==解决方法：统一使用document.body.onload=new Function(’inject()’); 或者document.body.onload = function(){}==

[注意] Function和function的区别。

15. Table操做问题

问题说明：ie、firefox以及其它浏览器对于 table 标签的操做都各不相同，在ie中不容许对table和tr的innerHTML赋值，使用js增长一个tr时，使用appendChild方法也无论用。

==解决方法：//向table追加一个空行：==

var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = "";
cell.className = "XXXX";
row.appendChild(cell);

[注] 建议使用JS框架集来操做table，如JQuery。

16. 对象宽高赋值问题

FireFox中相似obj.style.height = imgObj.height的语句无效。
cursor:hand VS cursor:pointer

firefox不支持hand，但ie支持pointer

==解决方法: 统一使用pointer==

17. innerText在IE中能正常工做，但在FireFox中却不行.需用textContent。

解决方法:

if(navigator.appName.indexOf("Explorer") > -1){

    document.getElementById('element').innerText = "my text";

} else{

    document.getElementById('element').textContent = "my text";

}

18. CSS透明

IE：

filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)

FF：opacity:0.6。
opacity 透明，子元素会继承透明属性。

==解决方式：
一、使用 background:rgba(0,0,0,0.6) //IE8及如下无效果。
二、使用定位，背景色与子元素处于同级关系。==

19. css中的width和padding

==在IE7和FF中width宽度不包括padding，在Ie6中包括padding.==

20. FF和IEBOX模型解释不一致致使相差2px

box.style{width:100;border 1px;}

ie理解为box.width = 100
ff理解为box.width = 100 + 1*2 = 102//加上边框2px

==解决方法：p{margin:30px!important;margin:28px;}==

Ps：这两个margin的顺序必定不能写反， IE不能识别!important这个属性，但别的浏览器能够识别。因此在IE下其实解释成这样：p{maring:30px;margin:28px}

重复定义的话按照最后一个来执行，因此不能够只写margin:XXpx!important;

21. IE5 和IE6的BOX解释不一致

IE5下p{width:300px;margin:0 10px 0 10px;}

p 的宽度会被解释为300px-10px(右填充)-10px(左填充)，最终p的宽度为280px

在IE6和其余浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。

==修改 p{width:300px!important;width :340px;margin:0 10px 0 10px}==

22. ul和ol列表缩进问题

消除ul、ol等列表的缩进时，样式应写成：

list-style:none;margin:0px;padding:0px;

经验证，

在IE中，设置margin:0px能够去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响;
在 Firefox 中，设置margin:0px仅仅能够去除上下的空白，设置padding:0px后仅仅能够去掉左右缩进，还必须设置list- style:none才能去除列表编号或圆点。

==在IE中仅仅设置margin:0px便可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。==

23. 元素水平居中问题

FF: margin:0 auto;
IE: 父级{ text-align:center; }

24. p的垂直居中问题

vertical-align:middle;
line-height:200px; //将行距增长到和整个p同样高

而后插入文字，就垂直居中了。缺点是要控制内容不要换行。

25. margin加倍的问题

设置为float的p在ie下设置的margin会加倍。这是一个ie6都存在的bug。

==解决方案是在这个p里面加上display:inline;块变行==

例如：
相应的css为

#imfloat{

   float:left;

   margin:5px;

   display:inline;
}

26. IE与宽度和高度的问题

IE不认得min-这个定义，但实际上它把正常的width和height看成有min的状况来使。这样问题就大了，若是只用宽度和高度，正常的浏览器里这两个值就不会变，若是只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

==解决：设置在html上==

#box{ 
   width: 80px; 
   height: 35px;
}
html>body #box{ 
   width: auto; 
   height: auto; 
   min-width: 80px; 
  min-height: 35px;
}

27. 页面的最小宽度

IE不识别min，要实现最小宽度，可用下面的方法：

#container{ 
   min-width: 600px;
   width:expression(document.body.clientWidth< 600? "600px": "auto" );
}

==第一个min-width是正常的;但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上经过Javascript的判断来实现最小宽度。==

28. p浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{ float:left; width:800px;}

#left{ float:left; width:50%;}

#right{ width:50%;}

🌟html #left{ margin-right:-3px; //这句是关键}

29. IE捉迷藏的问题
当p应用复杂的时候每一个栏中又有一些连接，p等这个时候容易发生捉迷藏的问题。

有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽可能简单。

30. float的p闭合;清除浮动;自适应高度

？（1）例如：

这里的NOTfloatC并不但愿继续平移，而是但愿往下排。(其中floatA、floatB的属性已经设置为float:left;)

这段代码在IE中毫无问题，问题出在FF。缘由是NOTfloatC并不是float标签，必须将float标签闭合。在

之间加上

这个p必定要注意位置，并且必须与两个具备float属性的p同级，之间不能存在嵌套关系，不然会产生异常。而且将clear这种样式定义为为以下便可：==.clear{clear:both;}==

（2）做为外部 wrapper 的 p 不要定死高度,为了让高度能自适应，要在wrapper里面加上overflow:hidden; 当包含float的box的时候，高度自适应在IE下无效，这时候应该触发==IE的layout私有属性(万恶的IE啊!)用zoom:1;==能够作到，这样就达到了兼容。

例如某一个wrapper以下定义：

.colwrapper{overflow:hidden; zoom:1; margin:5px auto;}

（3）对于排版,咱们用得最多的css描述可能就是float:left.有的时候咱们须要在n栏的float p后面作一个统一的背景,譬如:

好比咱们要将page的背景设置成蓝色,以达到全部三栏的背景颜色是蓝色的目的,可是咱们会发现随着left center right的向下拉长,而page竟然保存高度不变,问题来了,缘由在于page不是float属性,而咱们的page因为要居中,不能设置成float,因此咱们应该这样解决：

再嵌入一个float left而宽度是100%的p解决之。

或者另外一种方法：用选择器(：after)在page以后插入一个空标签,并清除浮动

.page:after {content: ""; display: table; clear: both; }

（4）万能float 闭合(很是重要!)

关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将如下代码加入Global CSS 中,给须要闭合的p加上class="clearfix" 便可,屡试不爽。

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

.clearfix { display:inline-block; }

.clearfix {display:block;}

或者这样设置：`.hackbox{ display:table; //将对象做为块元素级的表格显示}
`
31. 高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或padding时。

例：

#box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

p对象中的内容

==解决技巧：在P对象上下各加2个空的p对象CSS代码
{height:0px;overflow:hidden;}
或者为p加上border属性。==

32. IE6下图片下有空隙产生

解决这个BUG的技巧有不少,能够是
==改变html的排版
或者设置img为display:block
或者设置vertical-align属性为vertical-align:top/bottom/middle/text-bottom 均可以解决.==

33. 对齐文本与文本输入框

==加上vertical-align:middle;==

Ps：经验证，在IE下任一版本都不适用，而ff、opera、safari、chrome均OK!

34. li中内容超过长度后以省略号显示

此技巧适用与IE、Opera、safari、chrom浏览器，FF暂不支持。

35. 为何web标准中IE没法设置滚动条颜色了

==解决办法是将body换成html==

39. FORM标签

这个标签

在IE中,将会自动margin一些边距
在FF中margin则是0
所以,若是想显示一致,因此最好在css中指定margin和 padding,

==css中通常首先都使用这样的样式ul,form{margin:0;padding:0;}。==

40. 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}p[id]{}

这个对于IE6.0和IE6.0如下的版本都隐藏
FF和OPera做用.属性选择器和子选择器仍是有区别的，子选择器的范围从形式来讲缩小了,属性选择器的范围比较大,如p[id]中,全部p标签中有id的都是一样式的.

41. 为何FF下文本没法撑开容器的高度

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开须要怎样设置呢?

==去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 能够这样定义:==

{

height:auto!important;

height:200px;

min-height:200px;

}

43. IE和FireFox 对空格的尺寸解释不一样

FireFox为4px,IE为8px;
FireFox对p与p之间的空格是忽略的，可是IE是处理的。
在两个相邻p之间不要有空格跟回车，不然可能形成不一样浏览间之间格式不正确，好比著名的3px误差并且缘由难以查明。
多个img标签连着，而后定义float: left;结果在firefox里面正常，而IE里面显示的每一个img都相隔了3px。我把标签之间的空格都删除都没有做用。

==解决方法是在img外面套li，而且对li定义margin: 0; 避免方式：在必要的时候不要无视 list 标签)==

44. 条件注释

lte -- 小于等于

lt-- 小于

gte --大于等于

gt--大于

! --不等于

45.强制渲染

//这句话的意思是强制使用IE7模式来解析网页代码!

//Google Chrome Frame也可让IE用上Chrome的引擎

或者//强制IE8使用IE7模式来解析

//强制IE8使用IE6或IE5模式来解析

//一个特定版本的IE支持所要求的兼容性模式多于一种

46.js兼容文件

使IE5,IE6兼容到IE7模式(推荐)

使IE5,IE6,IE7兼容到IE8模式

使IE5,IE6,IE7,IE8兼容到IE9模式

47.浏览器识别符

p{ _color:red; } IE6 专用

*html p{ color:#red; }IE6 专用

p{ +color:red; } IE6,7 专用

p{ *color:red; } IE6,7 专用

*html p{ color:red; } IE6,7 专用

p{*+color: red;} IE7 专用

Body> p{ color: red; }屏蔽 IE6

p{ color:red9; } IE8

Firefox: -moz-

Safari: -webkit-

Opera: -o-

IE: -ms-

整理时有一些用到了别人的文章，须要标注版权的请联系