一个浏览器内核几个主要部分,HTML/CSS解析器,网络处理,JavaScript引擎,2D/3D图形引擎,多媒体支持等; HTML 解析和 DOM 网页基本结构 一个网页(Page),每个Page都有一个主框(Main Frame),该框通常包含一个HTML Document, 主框也可能包含子框(sub frame); 这些框构成一个树型结构,以主框为根节点,每个框也可能包含自己的HTML Document,它是一颗DOM树; WebKit相对应的类,和网页的结构一一对应; WebKit设计…

IE6常见CSS兼容问题总结 1)图片间隙 A)div中的图片间隙(该bug出现在IE6及更低版本中) 描述:在div中插入图片时,图片会将div下方撑大三像素. hack1:将</div>与<img>写在一行上: hack2:将<img>转为块状元素,给<img>添加声明:display:block; B)dt,li中图片间隙(IE6) hack:将<img>转为块状元素,给<img>添加声明:display:block; img设…

浏览器在构造DOM树的同时也在构造着另一棵树-Render Tree,与DOM树相对应暂且叫它Render树吧,我们知道DOM树为javascript提供了一些列的访问接口(DOM API),但这棵树是不对外的.它的主要作用就是把HTML按照一定的布局与样式显示出来,用到了CSS的相关知识.从MVC的角度来说,可以将render树看成是V,dom树看成是M,C则是具体的调度者,比HTMLDocumentParser等. 新概念Render树 每一个Render树的节点称之为renderer或者r…

1.因为css对空格不敏感,因此在每个样式后都要加一个分号,不然会把写在后面的样式当成一个整体来解析,直到遇到分号为止. 2.当遇见不认识的属性或值时,将忽略这个属性,继续解析后面的属性. 3.对于复合属性,只要其中一个值是错误的,那么整个属性都不解析. 4.最后一个CSS规则的大括号可以不闭合. 5.后代选择器中间必须加空格. 6.换行会被当做一个空格. 7.关键字不可以用引号,否则会被忽略. 8.在多组选择器中,只要有一个选择器是错误的其他的也不会执行. 9.在CSS中,如果需要使用到@im…

选择器 其实现由CSSSelector类来完成: CSSSelector的作用是储存从解析器生成的结果信息; 这里匹配指的是当需要为每个DOM中的节点计算样式时,WebKit需要根据当前的节点信息来从规则列表中找到能够符合调节的规则,并把规则中的属性列表提取出来生成节点的样式信息; 应用到具体元素上 StyleResolver是管理类,负责根据样式规则为每一个Document中的元素匹配相应的样式属性,和Document节点一一对应;即当WebKit为每个Document创建一个StyleRes…

错误情况是web界面排版错误,js.css文件加载失败,通过调试器查看js和css文件路径都是对的,而且可访问. 业务使用的是 nginx+php+mysql+redis的架构 解决办法: 查了很多资料有的是路径问题,有的是   include             /etc/nginx/mime.types;文件问题,都没有解决我对问题, 最终更改了send_timeout 的超时时间, (nginx.conf) send_timeout :后端服务器数据回传时间_就是在规定时间之内后端服务…

很多地方都提到过CSS Reset这个概念,而且细心的朋友会发现,许多大网站的CSS文件中也含有CSS Reset内容. CSS Reset是什么? 在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式.不同浏览器的默认样式之间也会有差别,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的.在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率…

第一:图片间隙 a:div中的图片间隙: 描述:在div中插入图片时,图片会将div下方撑大3像素 hack1:将<div>和<img>写在一行 hack2:将<img>转为块元素,给<img>添加声明:display:block; hack3:给<div>设置:overflow:hidden b:dt,li中图片间隙 hack:同a中的hack2,hack3方法 第二:默认高度 描述:在IE6及以下版本中,部分块元素具有默认高度(低于18px高…

CSS(层叠样式表) CSS层叠样式表(Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化. CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力. 引入CSS的方式 1. 内联style样式 2. style标签 3.外联样式表,外部css文件…

摘要: 理解浏览器原理. 解析 一旦 CSS 被浏览器下载,CSS 解析器就会被打开来处理它遇到的任何 CSS.这可以是单个文档内的 CSS.<style>标记内的 CSS,也可以是 DOM 元素的style属性内嵌的 CSS.所 有 CSS 都根据语法规范进行解析和标记.解析完成后,就会生成有一个包含所有选择器.属性和属性各自值的数据结构. 例如,考虑以下 CSS: .fancy-button { background: green; border: 3px solid red; font-…