知识点

1、haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。

请写出至少五个能够让元素“拥有布局”(即haslayout=true)的属性。

What

 BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

when

既然上文提到BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素决定，CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。

根元素

float的值不为none

overflow的值不为visible

display的值为inline-block、table-cell、table-caption

position的值为absolute或fixed

Why

生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。

生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。

How

<style>

.Left{float:left;width:200px;height:200px;}

.right{float:right;height:200px;height:200px}

.center{overflow:hidden;height:200px}

</style>

<div class=”left”></div>

<div class=”right”></div>

<div class=”center”></div>

2、为什么我们要给图片设置宽高?设置alt属性？

What:

alt属性是一个用于网页语言HTML和XHTML、为输出纯文字的参数属性。

When：

当出现图片没有设置宽高出现浏览器回流，图片加载失败的时候没有提示

Why:

图片设置宽高目的是防止浏览器回流。

Alt属性：①有利于搜素引擎的搜索，优化搜索引擎。

②图片不显示时能出现提示文字。

3、CSS中，用来合并单元格边框的属性及值是

border-collapse:collapse;

What

collapse:定义表格边框合并显示。

When:

当需要合并单元格的时候。

How

border-collapse:collapse;

4、写出以下表单控件（完整写出标签及类型）：

文本框

多行文本域

文件域

密码框

单选按钮

How

<input type=”text”/>

<input type=”textarea”>

<input type=”fifle"/>

<input type=”password”>

<input type=”radio”>

5、CSS3中实现圆角的属性是()

What:

CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等

 

When:

当在页面中需要实现圆角的时候

Why

传统的圆角生成方案，必须使用多张图片作为背景图案。CSS3的出现，使得我们再也不必浪费时间去制作这些图片了，而且还有其他多个优点：

　　* 减少维护的工作量。图片文件的生成、更新、编写网页代码，这些工作都不再需要了。

　　* 提高网页性能。由于不必再发出多余的HTTP请求，网页的载入速度将变快。

　　* 增加视觉可靠性。某些情况下（网络拥堵、服务器出错、网速过慢等等），背景图片会下载失败，导致视觉效果不佳。CSS3就不会发生这种情况。

How

Border-radius:20%;

6、定位的元素要决定其上下层叠关系，使用的属性是()。

What

文档中后来的居上

When

定位的元素要决定其上下层叠关系

How

Z-index:1;

7、填充背景颜色() 填充背景图片() 背景图片水平重复() 背景图片固定() 背景图片定位在右下角()

What

Backgroud-color:red;

Background-image:uri();

Bakground-repeat:repeat;

Background-attachment:fixed;

Background-posiiton:rightbottom;

8、1、设置文字居中() 2、设置行高为150%() 3、设置首行缩进2个字符() 4、设置下划线() 5、取消下划线

What

Text-aligh:center;

Line-hight:150%

Text-indent:2em;

Text-decoration:underline;

Text-decoration:none;

9、块级元素与内联元素分别有哪些

块级：h1-h6 div p table ul dl

内联元素：span b i em strong img

10、文本溢出省略的处理方法

What:

溢出文本指的是多出规定的字符。

When:

当多出规定的字符

How：

{width：200px;white-space:norwrap;overflow:hidden;text-overflow:ellipsis;

}

11、display:none与visibility:hidden的区别是什么？

What：

display:none：

内容在网页不显示

visibility:hidden

是元素“不可视”

How：

display属性设定为“none”的元素将不产生任何的框（Box），也就是说，元素对布局没有影响，浏览器将不显示该元素，包括其后代元素。更不会占位。
而如果设定“visibility : hidden”则会生成元素框，只是元素“不可视”，而其他非视觉的属性都将生效，例如widht、padding等。

12、设置全局字体，哪些标签不收影响？

H1-h6 color img

13可继承属性

不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

所有元素可继承：visibility和cursor。

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

终端块状元素可继承：text-indent和text-align。

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

14.浏览器的内核分别是什么?

what：

浏览器内核就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息

when:

在测试不同浏览器及其兼容的 时候会用到。

why:

不同的浏览器内核对网页编写语法的解释不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也不同。

how:

Trident(IE内核)

Gecko(Firefox内核)

Webkit(Safari内核,Chrome内核原型,开源)

Presto内核：目前只有Opera浏览器采用该内核

15、

在>=992px尺寸中显示4列，在>=768px尺寸中显示3列，在<768px尺寸中显示2列。 使用bootstrap栅格写出以上代码。

<div class=”col-md-4col-sm-3 col-xl-2”></div>

<div class=”col-md-4col-sm-3 col-xl-2”></div>

<div class=”col-md-4col-sm-3 col-xl-2”></div>

<div class=”col-md-4col-sm-3 col-xl-2”></div>

16..container与.container-fluid的区别是？()

.container是固定宽

.container-fluid是百分比

17.html5不在支持的便签：

What：有q,ins,menu,font,不支持的标签是font

When：q标签指的是：定义短的引用

              ins标签指的是：定义被插入的文本

              menu:定义命令的列表或菜单

              font标签：定义字体

18.html5canvas标签

       Canvas是使用JS在网页上绘制图像的，他拥有多种绘制路径，矩形，圆形，字符，以及添加图像的方法

19.html5的5存储

       What：提供了两种存储数据的方法，分别是：localstorage没有时间限制的存储，sessionstorage针对一个数据的存储，只保留一次。之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

20.内联元素设置上padding和下padding不会增加尺寸

      What：内联元素的上padding和下padding都不正常，也就是说，内联元素无法设置上下padding

How：把内联元素设置成内联中的块级：display：linline-block，这样他既是内联元素，但是他也可以设置上下padding。

21：如果对元素设置字体大小10rem，当用户调整浏览器窗口时文本将相应变化的大小

What：不会变化相应的大小，首先是要有根元素的font-size，因为rem是根据他的根元素来计算大小的，如果淡出的给某一个元素设置rem是不会随着窗口大小的改变俩相应变化的。Em的大小是根据他的父级元素来改变大小的