前端开发面试题2前端开发面试题2.pdf

1. Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? （1）、!DOCTYPE 声明位于文档中的最前面，处于 html 标签之前。告知浏览器 的解析器，用什么文档类型 规范来解析这个文档。 （2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 （3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止 站点无法工作 （4）、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。 其次是这样的意义 各个浏览器的混杂模式，基本就是各个浏览器的私有模式，不相互兼容。 所以，除非是为了兼容的问题，比如你不想修改很久很久以前做的IE ONLY 的网页，否则 刻意触发混杂模式没有任何意义。 2：行内元素有哪些？块级元素有哪些？CSS 的盒模型？ （1）CSS 规范规定，每个元素都有display 属性，确定该元素的类型，每个元素都有默认 的display 值，比如div 默认display 属性值为“block”，成为“块级”元素；span 默认display 属性值为“inline”，是“行内”元素。 （2）行内元素有：a b span img input select strong （强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p （3）知名的空元素： br hr img input link meta 鲜为人知的是： area base col command embed keygen param source track wbr CSS 的盒子模型两种: IE 盒子模型、标准 W3C 盒子模型；IE 的 content 部分包含了 border 和 padding; 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border). 二.行内元素与块级元素有什么不同？ 不同：行内元素是一个一个挨着的，块级元素是占据一整行。 记住对行内元素 设置宽度width 无效。 设置高度height 无效，可以通过line-height 来设置。 设置margin 只有左右margin 有效，上下无效。 设置padding 只有左右padding 有效，上下则无效。注意元素范围是增大了，但是对元 素周围的内容是没影响的，看图上效果就知道了 盒子模型 W3C 组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义 来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个 区域：内容(content)、边框距(padding)、边界 (border)和边距(margin)。对于初学者， 经常会搞不清楚margin，background-color，background- image，padding，content， border 之间的层次、关系和相互影响。这里提供一张盒模型的3D 示意图，希望便于你的 理解和记忆。 每个HTML 元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间 的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间， 还有边界（margin）。 盒模型的实际宽度 关于盒模型，还有以下几点需要注意： 对于块级元素（display:block），未浮动的垂直相邻元素的上边界和下边界会被压缩，例 如：有上下2 个元素，上元素的下边界为5px，下面元素的上边界为20px，则实际2 个 元素的间距为20px （2 个边界值中较大的值）。如图所示。 注 1. 块级元素（display： block） 每个块级元素都从一个新行开始，而且其后的元素也需另起一行开始，标题、段落、 表格、层、body 等都是块级元素。块级元素只能作为其他块级元素的子元素，而且需要一 定的条件。 内联元素，例如a、span等，定义上下边界不会影响到行高（line-height）， 内联元素距离上一行元素的距离由行高决定，而不是填充或边界。 注2. 内联元素（display：inline） 内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如a、em、span 等 都为内联元素。内联元素可以为任何其他元素的子元素。 ·浮动元素（无论左或者右浮动）边界不压缩，且若浮动元素不声明宽度，则其