web前端面试题（百度）

最新推荐文章于 2021-12-14 20:42:55 发布

sunny327

最新推荐文章于 2021-12-14 20:42:55 发布

阅读量1.1k

点赞数

分类专栏： haslayout 面试题在什么情况下需要触发haslayout 百度面试题文章标签： css javascript web前端面试题浏览器

本文链接：https://blog.csdn.net/sunny327/article/details/38072201

版权

haslayout 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

面试题

4 篇文章 0 订阅

订阅专栏

在什么情况下需要触发haslayout

2 篇文章 0 订阅

订阅专栏

1、<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">中的DOCTYPE是什么含义。

DTD是什么含义。DTD用来解析session还用来解析什么？Html5的这个部分该怎么写？

！：文档类型。一个文档类型标记是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用语言解析器，这应该使用什么样的文档定义（DTD）来解析文档。

二、公共的外联文档类型定义（使用公共标识符）：

<!DOCTYPE 根元素

PUBLIC "注册//组织//类型标签//定义语言"

"文档类型定义位置"

[< !--内部子集声明，可选项目-->]

实例具体应用：（根元素是超文本网页）

<!DOCTYPE　HTML

　PUBLIC　"+//我公司//DTD超文本5//ZH"

　"网络页面文档类型定义/严格.定义">

DTD定义：文档类型定义，它是一套关于标记符的语法规则。是一种保证标准标记通用语言、可扩展标记语言文档格式正确的有效方法，可通过比较文档与文档类型定义文件来看文档是否符合规范，元素和标签使用是否正确。DTD还用来解析cookie

在html5中这样来定义DOCTYPE：<!DOCTYPE HTML>因为 HTML4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为（让浏览器按照它们应该的方式来运行。）。

2、外部一个div固定宽高，内部img也固定宽高，怎么让img在外部div中垂直居中对齐。

（1） div{ position:relative;width:300px; height:400px; border:solid 1px #ccc;}

img{position:absolute; wdith:100px;height:100px; margin:-50px 0px 0px -50px; top:50%; left:50%;}

（2）使用table-cell

.box{ width:300px; height:400px;border:solid 1px #ccc; text-align:center; vertical-align:middle;display:table-cell; line-height:400px;}

注：但是这种方法ie6不支持。

（3）.box{width:300px; height:400px; border:solid 1px #ccc; display:table;text-aligh:center; *position:relative; overflow:hidden;}

.subbox{ display:table-cell;vertical-align:middle;*position:absolute;*top:50%;}

.img{ *position:relative; *top:-50%;}

注：这种方法其实在ie6和ie7下图片也不是水平居中，总向右偏那么一点。暂时还没想到很好的解决方案。

3、外部一个div,内部有left和right两个div即：<div class=”box”><divclass=”left”></div><div class=”right”></div></div>，左边left是有固定的宽度300px,右边要随着浏览器自适应。想到几种方法就写几种方法。如图

（1）.box{width:auto; padding:3px; border:solid 1px #ccc; overflow:hidden;}

.left{ width:300px; height:300px; float:left; background:#cfcfcf;}

.right{ width:500px; height:300px; float:left; background:#666;}

4、$(“#box”)与document.getElementById(“box”)的返回值有什么区别？运行机制是什么样的？

前者返回的是jQuery对象，后者返回的是DOM对象。Jquery对象不能访问DOM对象的方法，DOM对象也不能访问jquery对象的方法，如val() css() eq() attr() height()不过jquery对象可以转化为DOM对象进行访问，且jQuery提供了很多访问DOM对象的方法，如get()

5、$(“div”)[0]与$(“div”).eq(0)有什么区别？各自的运行机制是什么？

前者是DOM对象，后者是jquery对象。

6、css盒模型。标准的width是怎样来进行定义的。

盒模型有：padding margin width height border 标准的定义：width+padding+margin+border

7、ie的haslayout是什么意思？哪些属性是初始就触发haslayout的？

Haslayout的意思是某些元素默认有一些步局。当我们说一个元素“得到layout”或“拥有layout”的时候或“has layout”的时候，我们就说它的微软专用属性“haslayout”的值为true。负责组织自身的元素会默认有一个步局。如： body html table tr td thead tbody img hr input button file select textarea fieldset marquee frameset frame iframe objects applets embed

8、ie在什么情况下需要触发haslayout?以及如何触发？以及什么时候触发？

Ie显示错误或排版的时候需要触发。如何触发：display:inline-block width/height(给任何的像素值除了auto) float(left或right) position:absolute zoom(除normal外任意值) ie7还有一些额外的属性：min-height(任意值) max-height(除none外任意值) min-width(任意值) max-width(除none外任意值) overflow(除visible外任意值) overflow-x(除visible外任意值) overflow-y(除visible外任意值) position:fixed

当网页在ie中异常表现时，可以尝试触发haslayout，常用的触发方法有：

给某元素 css 设定zoom:1。使用 zoom:1 是因为大多数情况下，它能在不影响现有环境的条件下激发元素的 haslayout。而一旦问题消失，那基本上就可以判断是haslayout 的原因。然后就可以通过设定相应的 css 属性来对这个问题进行修正了。建议首先要考虑的是设定元素的width/height属性，其次再考虑其他属性。

对 IE6 及更早版本来说，常用的方法被称为霍莉破解(Holly hack)，即设定这个元素的高度为 1%(height:1%;)。需要注意的是，当这个元素的 overflow 属性被设置为 visible 时，这个方法就失效了。或者使用 IE的条件注释。

对 IE7 来说，最好的方法是设置元素的最小高度为 0 (min-height:0;)。

haslayout 问题引起的常见 bug

IE6 及更低版本的双空白边浮动 bug

bug 修复: display:inline;

IE5-6/win 的 3 像素偏移 bug

bug 修复: _height:1%;

IE6 的躲躲猫(peek-a-boo) bug

bug 修复: _height:1%;

IE6/7负margin隐藏Bug：

bug 修复:去掉父元素的hasLayout；或者赋hasLayout给子元素,并添加position:relative;

需要注意的是，hasLayout属性是微软特有的过时属性，在IE8、IE9中，hasLayout属性已经被废弃。上文中的InternetExplorer都是指IE7、IE6及以下版本。

9、inline-block inline和block有什么区别？

block元素的特点是：
　　总是在新行上开始；
　　高度，行高以及顶和底边距都可控制；
　　宽度缺省是它的容器的100%，除非设定一个宽度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

display:inline就是将元素显示为行内元素.

inline元素的特点是：
　　和其他元素都在一行上；
　　高，行高及顶和底边距不可改变；
　　宽度就是它的文字或图片的宽度，不可改变。
<span>, <a>, <label>, <input>, <img>,<strong> 和<em>是inline元素的例子。

display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

inline-block的元素特点：

　　将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)

　　并不是所有浏览器都支持此属性，目前支持的浏览器有：Opera、Safari在IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。