前端css部分面试笔试题

1.请解释一下DOCTYPE的作用，有DOCTYPE和没有DOCTYPE有什么区别？

　　DOCTYPE声明是指HTML文档开头处的一行或者两行代码，它描述使用哪个DTD（文档类型定义）。DTD是一组机器可读规则，他们定义XML或者HTML的特定版本中允许有什么，不允许有什么。在解析网页时，浏览器将这些规则检查页面的有效性并且采取相应的措施。浏览器通过分析页面的DOCTYPE声明来了解使用哪个DTD，由此知道使用HTML哪个版本。

　　DOCTYPE当前有两种风格，严格（strict）和过渡（transitional）。

　　严格版本禁止使用飞起的元素，内容表现分离。

　　过渡版本是帮助老开发人员从老版本迁移到新的版本，仍然允许使用废弃的元素。

　个人理解：DOCTYPE是向浏览器声明此文件是HTML类型。

2.img的alt与title有什么不同？

　　使用title属性提供非本质的额外信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息（tool tip）。

　　使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户。替换文字是用来替代图像而不是提供额外说明文字的。

　　个人理解：title是鼠标悬浮在图片上面时候显示的文字信息

　　　　　　　alt是当图片加载时候显示的文字信息

3.比较strong和em：

　　em是句意强调，加上不会引起语意的变化。

　　strong是重要性的强调，和局部还是全局无关，局部强调用strong也可以，strong强调的是重要性，不会改变句意，并且在浏览器中，em默认为斜体，strong默认为粗体表示。

　　个人理解：两者都是强调，em表示斜体强调，strong表示粗体强调，是更强调的强调。

4.行内元素有哪些，块级元素有哪些，空元素（单标签）有哪些，请举例说明，每种至少3个？　　

　　行内元素：<a>,<span>,<i>,<em>,<strong>,<label>,<code>,

　　　　　　　<img>,<input>,<select>,<textarea>,<button>

　　块级元素：<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>,<form>

　　空元素（单标签）：<br>,<hr>,<img>,<input>,<link>,<meta>

5.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

（1）有两种： IE 盒子模型、W3C 盒子模型；

（2）盒模型：包括： 内容(content)、填充(padding)、边界(margin)、 边框(border)；

（3）区 别： IE的content部分把 border 和 padding计算了进去;

6.display有哪些值？并且说明他们的作用。

　　1)block 　　 块类型。默认宽度为父元素宽度，可设置宽高，换行显示 块级显示

　　2)none 缺省值。象行内元素类型一样显示。 不显示

　　3)inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。 行内显示

　　4)inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。 行内块级显示

　　5)list-item 像块类型元素一样显示，并添加样式列表标记。

　　6)table 此元素会作为块级表格来显示。

　　7)inherit 规定应该从父元素继承 display 属性的值。

7.CSS优化、提高性能的方法有哪些？

　　1）尽量 把代码写在单独的CSS文件中，然后引用。

　　2）不使用@import

　　3）选择器层级越少越好

　　4）精简样式，去掉重复覆盖的样式。

　　5）多利用css继承减少代码量。

　　6）提高代码的可维护性和使用重复率，命名规范。

8.解释一下em,rem,px这些尺寸单位的不同。

　　1）px是像素，相对屏幕分辨率而言。

　　2）em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸;（任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了）。

　　3）rem 相对于根元素HTML的字体尺寸

9.css实现垂直水平居中

　第一种方法：父级元素设置过相对定位之后，在需要设定的元素中设置绝对定位，使上下左右都为0

　　　　　　　margin：auto

.content{
    position: absolute;
    width: 200px;
    height: 200px;
    /*top、bottom、left和right 均设置为0*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*margin设置为auto*/
    margin:auto;
    border: 1px solid green;    
} 

10.简述一下src和href 的区别

　　href是指向的是网络资源所在的位置，建立当前元素和需要的文档之间的链接，用于超链接。

　　src是指向外部资源的位置，指向的内容会嵌入到标签的当前位置；在请求src资源时候会将其指向的资源下载到应用的文档内，当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到该资源下载 执行完毕，图片和框架等元素也是如此。

　　href是指向所需要的资源，作为链接。src是作为文件加载到当前的元素。

11.浏览器的内核：

　　IE：trident内核

　　Firefox：gecko内核

　　Safari：webkit内核

　　Opera：以前是presto内核，现在改用Google Chrome的Blink内核

　　Chrome：Blink（基于webkit，Google和Opera共同开发）

12.前端开发中，如何优化图像？图像格式的区别？

　　优化图像：

　　(1)不用图片，尽量用css3代替。比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用css达成。

　　(2)使用矢量图代替位图。绝大多是图案图标等，矢量图更小，且可以缩放，无需生成多套图。

　　(3)使用穷爱的那个的图片格式，我们常用的图片格式有JPEG、GIF、PNG。基本上内容图片多适用于JPEG，修饰图片最好用无压缩的PNG。

　　(4)按照HTTP系诶一设置的缓存。

　　(5)使用字体图标webfont、css Sprites等。

　　(6)用css或者JavaScript实现预加载。

　　(7)webP图片格式能给前端带来优化。

　　图像格式的区别：

　　矢量图：图标字体

　　位图：GIF、jgp、png

　　区别：

　　　　　1）gif是一种无损的，8位图片格式。支持动画，索引透明，压缩等特性。适用于做色彩简单（色调少的图片），比如logo各种小图标。

　　　　　2）JPEG是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适合做色彩简单的图片，比如logo 各种小图标。

　　　　　3）png：png可以细分三种格式，png8，png24，png32.后面的数字代表这种png格式最多可以索引的储存的颜色值。

　　　　　　 关于透明：png8支持索引透明和alpha透明，png24不支持透明啊，而png32在24位的png基础上增加了8位的alpha的通道透明。

13.CSS3有哪些新特性？　　

1. CSS3实现圆角（border-radius），阴影（box-shadow），border-image

2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

4. 增加了更多的CSS选择器 多背景 rgba

5. 在CSS3中唯一引入的伪类是 ::selection.

6. 媒体查询，多栏布局

14.CSS中 link 和@import 的区别是？

(1) link属于HTML标签，而@import是CSS提供的;

(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

15.position的absolute与fixed共同点与不同点

共同点：

1.改变行内元素的呈现方式，display被置为inline-block；

2.让元素脱离普通流，不占据空间；

3.默认会覆盖到非定位元素上

不同点：

absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。

当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

16.对BFC规范的理解？

　　BFC，块级格式化上下文

　　通俗理解

　　1）BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。

　　2）如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。

　　3）浮动元素会创建BFC，则浮动元素内部子元素主要受该浮动元素影响，所以两个浮动元素之间是互不影响的。

17.解释下 CSS sprites，以及你要如何在页面或网站中使用它。

CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的"background-image"，"background-repeat"，"background-position" 的组合进行背景定位，background-position 可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了 http2。

18.说说你对语义化的理解？

1. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构

2. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

3. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

4. 便于团队开发和维护，语义化使得网页更具可读性，是进一步开发网页的必要步骤，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

19.HTML与XHTML——二者有什么区别

最主要的不同：

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。