CSS面试知识点-CSDN博客

本文链接：https://blog.csdn.net/linxi_1988/article/details/9966051

偶然发现，公司里多了很多新面孔。在电梯里，总能遇到面容似曾相识却叫不出名字的同事，才后知后觉，貌似又进入了求职高峰期。曾经一起奋战的同事，如今又在另外一片天空追寻自己的梦想，祝福他们，希望所有的程序员都能幸福。

回想起去年这个时候，也是在求职的路上磕磕绊绊。去年很不顺，迷信的说法也许是本命年犯太岁。不过幸好，进入了如今的公司，虽然对于现在的公司有很多吐槽点，但是我依然热爱我的岗位和同事们。

因为个人的习惯，做事喜欢井井有条，面试的问题会罗列一下（PS：记住的那些，有些因为紧张会忘记），平时遇到的知识点也会记下。话不多说，现在对CSS的面试题总结几条，希望能帮助到初入前端这个行业的亲们。

1、 DTD文档类型定义。

DTD全称Document Type Definition，是一种保证HTML文档格式正确的有效防范，可以通过比较HTML文档和DTD文件来看文档是否符合规范，以及元素和标签使用是否正确。

一共有4种常见的DTD类型。

⑴ 用于HTML 4.01的严格型

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">

⑵用于HTML 4.01的过渡型

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/DTD/loose.dtd">

⑶用于XHTML 1.0的严格型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

⑷用于XHTML 1.0的过渡型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果漏写DTD声明会引发什么状况？

Firefox仍然会按照标准模式来解析网页，但在IE中（包括IE6、7、8）就会触发怪异模式。

前几天就遇到一个因为缺少DTD而引发的BUG，后台开发的页面中，背景图片始终与它相邻的对不齐，偶然发现，只有全是数字时才可以正常显示。对比了静态页与开发页面的样式，毫无区别，突然想到是否是DTD产生的这个灵异事件。果然，后台开发的页面中缺少了DTD声明。

2、语义化标签

其实这个东西是给搜索引擎看的，搜索引擎看不到视觉效果，看到的只是代码，只能通过标签来判断内容的语义。通俗易懂的说，就是网站去掉css，你还能分辨出哪里是标题，哪里是内容，哪里是段落等等。

常见的语义化标签有：div、span、ul、ol、li、dl、dt、dd、del、h1-h6、p、a、strong、em、b、i 等等

3、行内元素有哪些？

常见的行内元素有span、strong、em、a等

常见的块级元素有div、p、form、ul、ol、li等

他们的区别是：块级元素会独占一行，默认情况下，其宽度自动填满其父元素宽度，行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化。

4、hasLayout

hasLayout是IE浏览器专有的一个属性，用于CSS的解析引擎。有时候在IE下一些复杂的CSS设置接卸起来会出现BUG，其原因可能与hasLayout没有被自动触发有关系。

hasLayout的触发方法：zoom:1

5、tittle和alt

title用来给链接文字或普通文字提示的。

alt用来给图片来提示的。

6、盒模型

标准盒子模型

IE盒子模型

7、CSS sprite

意思就是将背景图合并到一张大图上，然后利用background-position属性来展示我们需要的部分。

将多张图片合并成一张大图，会大大减少网页的HTTP请求数，减小服务器压力。

不过，也不是所有网站都需要CSS sprite技术的，这个技术的可维护性很低。

8、CSS hack

一般情况下，我写页面都是以FF为准，再针对不同浏览器产生的bug进行调试。

IE6：_

IE7：*

IE8：\0

IE9：":root .test{color:#f00\9;}"

google和safria：@media screen and (-webkit-min-device-pixel-ratio:0) {.test{color:#f00;}}

9、相对定位和绝对定位。

相对定位：position: relative;其中的位置控制属性有margin-left、margin-right、margin-top、margin-bottom、left、right、top、bottom。

绝对定位：position: absolute;其中的位置控制属性有left、right、top、bottom。

绝对定位的这些属性很容易了解，初学的时候，相对定位的margin和top这些很容易让人产生混淆，现对他们解释一下。

⑴ 相对定位的margin类

元素相对于最近元素的偏移，文档流中的位置也偏移，会影响到后面的元素。也就是说，它的位置变化时，后面元素的位置也会相对应变化。

⑵ 相对定位的top类

元素在文档流中的位置不变，只是相对于自己在文档流中位置的便宜，不会影响后来的元素。