html与css基础题目整理

Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

答： doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下，“阅读程序”通常是浏览器或者校验器这样的一个程序，“规则”则是W3C所发布的一个文档类型定义（DTD）中包含的规则。

(1) 声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的HTML 文档。 

(2)所谓的标准模式是指，浏览器按 W3C 标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。 严格模式是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法，如

。严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行混杂模式则是一种向后兼容的解析方法，说的透明点就是可以实现IE5.5以下版本浏览器的渲染模式。 

(3)浏览器解析时到底使用标准模式还是怪异模式，与你网页中的 DTD 声明直接相关， DTD 声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略 DTD 声明 ,将使网页进入怪异模式。

 

常见的浏览器内核有哪些？

答：1.Trident内核： IE,MaxThon,TT,The World,360, 搜狗浏览器等。 [ 又称 MSHTML]

2.Gecko内核： Netscape6 及以上版本， FF,MozillaSuite/SeaMonkey 等

3.Presto内核： Opera7 及以上。       [Opera 内核原为： Presto ，现为： Blink;]

4.Webkit内核： Safari,Chrome 等。    [ Chrome 的： Blink （ WebKit 的分支） ]

 

link和@import的区别?

答：XML/HTML代码

<link rel='stylesheet' rev='stylesheet' href='CSS文件 ' type='text/css' media='all' />

XML/HTML代码

<style type='text/css' media='screen'>

@import url('CSS文件 ');

</style>

两者都是外部引用CSS的方式，但是存在一定的区别：

区别1： link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他务； @import 属于 CSS 范畴，只能加载 CSS 。

区别2： link 引用 CSS 时，在页面载入时同时加载； @import 需要页面网页完全载入以后加载。

区别3： link 是 XHTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，低版本的浏览器不支持。

区别4： link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。

 

block，inline和inlinke-block细节对比？

答：•（1）display:block 
a、block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
b、block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
c、block元素可以设置margin和padding属性。
（2）display:inline 
a、inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
b、inline元素设置width,height属性无效。
c、inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
（3）display:inline-block 
a、简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
补充说明 
a、一般我们会用display:block，display:inline或者display:inline-block来调整元素的布局级别，其实display的参数远远不止这三种，仅仅是比较常用而已。
b、IE（低版本IE）本来是不支持inline-block的，所以在IE中对内联元素使用display:inline-block，理论上IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表象。