前端面试必备：CSS与JavaScript常见问题及答案

本文主要涵盖了一系列前端面试中常见的问题及答案，涉及CSS布局、样式技巧、浏览器兼容性处理以及JavaScript和jQuery的相关知识点。 1. 单行文本垂直居中 在CSS中，可以通过设置`line-height`属性来实现单行文本的垂直居中。例如： ```css .element { line-height: 1.5; /* 或者设置为具体的高度值 */ } ``` 2. 英文或数字自动换行 要使过长的英文或数字自动换行，可以使用以下CSS样式： ```css .element { word-wrap: break-word; word-break: break-all; } ``` 3. 超出宽度显示省略号 若要使超出宽度的文字显示为省略号，可以使用以下CSS样式： ```css .element { width: 50px; /* 自定义宽度 */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ``` 4. 水平垂直居中div 一个通用的CSS方法是使用绝对定位： ```css .centered-div { position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin-left: -50px; /* 宽度的一半 */ margin-top: -50px; /* 高度的一半 */ } ``` 5. CSS Hack技巧 CSS Hack是为了应对不同浏览器之间的兼容性问题。以下是一些常用的Hack示例： - `-IE6专有的hack`: `*property: value;` - `+IE6、IE7识别`: `+html .selector { property: value; }` - `\9` IE6/7/8/9/10都生效 - `\0` IE8/9/10都生效 - `\9\0` 只对IE9/10生效 - `-webkit-` Chrome/Safari私有属性 - `-moz-` Firefox私有属性 - `-ms-` IE私有属性 6. display:none与visibility:hidden的区别 - `display:none` 不占用页面空间，内容完全不可见。 - `visibility:hidden` 占用页面空间，内容只是不可见。 7. box-sizing属性 - `content-box`：元素的宽度和高度只包含内容区域，不包括内边距和边框。 - `border-box`：元素的宽度和高度包括内容、内边距和边框。 - `inherit`：从父元素继承`box-sizing`属性。 8. 清除浮动的方法 - 父级div定义高度：`parent {height: /* 子元素总高度 */}` - 结尾处添加空div：`<div class="clear"></div>` 且 `.clear {clear: both;}` - 父级div定义伪类`:after`和`zoom`：`.parent:after {content: ""; display: table; clear: both;}` 以及 `.parent {zoom: 1;}` - 结尾处添加`br`标签：`<br class="clear" />` 且 `.clear {clear: both;}` 9. JavaScript与jQuery中的$(this)和this关键字 - `$(this)` 是jQuery对象，它引用了当前上下文中的DOM元素，可以使用jQuery方法。 - `this` 是JavaScript中的关键字，它根据上下文引用当前对象。在事件处理函数中，`this`通常指向触发事件的元素。 以上内容是前端开发面试中常见的一些技术问题和解答，涵盖了CSS布局、样式处理、浏览器兼容性和JavaScript基础等多个方面。掌握这些知识将有助于提升前端开发者的技能和面试表现。