HTML+CSS面试常见问题解答

“html+css面试题答案.docx” 在HTML和CSS领域，了解基本元素类型、布局技巧以及属性差异对于面试至关重要。以下是对这些知识点的详细解读： 1. **HTML元素类型** - **行内元素**：这些元素通常与其他元素并排显示，不占据整行空间。例如，`<a>`（链接）、`<b>`（加粗）、`<span>`（可扩展的文本容器）、`<img>`（图像）、`<input>`（表单元素）、`<strong>`（强调）、`<select>`（下拉列表）、`<label>`（表单标签）、`<em>`（斜体）、`<button>`（按钮）和`<textarea>`（多行文本输入框）。 - **块级元素**：这些元素各自占据一行，可以设置宽高。如`<div>`（分隔容器）、`<ul>`（无序列表）、`<li>`（列表项）、`<dl>`（定义列表）、`<dt>`（定义术语）、`<dd>`（定义描述）、`<p>`（段落）、`<h1>`-`<h6>`（标题）、`<blockquote>`（引用）。 - **空(void)元素**：这些元素没有闭合标签，例如`<br>`（换行）、`<meta>`（元数据）、`<hr>`（水平线）、`<link>`（外部资源链接）、`<input>`（表单元素）和`<img>`（图像）。 2. **CSS实现垂直水平居中** - 垂直水平居中是一种常见的布局需求。示例代码中，`.wrapper`设置了相对定位，`.content`使用绝对定位，并通过`top`和`left`属性相对于其父元素居中，然后利用负边距`margin-top`和`margin-left`调整，使得内容框的中心与父元素的中心对齐。这种方法适用于已知内容尺寸的情况。 3. **src与href的区别** - **src**：主要用于引入外部资源，比如`<script>`、`<img>`和`<iframe>`等元素，当浏览器遇到`src`属性时，会暂停当前页面的渲染，直到该资源加载完成。例如，`<img src="image.jpg">`会显示指定图片。 - **href**：主要用于链接，比如`<a>`（超链接）和`<link>`（外部样式表链接）。`<a href="http://example.com">`创建了一个指向其他网页的链接，而`<link href="style.css">`引入了外部样式表，它不会阻塞页面渲染，而是异步加载。 4. **CSS Hack** - CSS Hack是为了应对不同浏览器对CSS的解析差异而采取的解决策略。常见的CSS Hack包括条件Hack、属性级Hack和选择符Hack。 - **条件Hack**：使用条件注释，如`<!--[if IE]> ... <![endif]-->`，只在Internet Explorer中执行特定的CSS代码。 - **属性级Hack**：在属性名前添加特殊字符，例如`\9`（针对IE8+）或`*`（针对IE7及更早版本），如`color:#090\9;`。 - **选择符Hack**：利用某些浏览器对选择器的不同解析，如`_property`（仅IE6识别）或`:first-child+html .selector`（仅IE7识别）。 这些是HTML和CSS面试中常见的问题，理解和掌握它们有助于在面试中表现出色。同时，随着前端技术的发展，面试者还需要关注HTML5新特性、响应式设计、CSS预处理器以及浏览器兼容性等问题。