2018整理的前端面试题

根据给定文件的信息，我们可以总结出以下前端技术相关的知识点： ### 一、清除浮动方法（Clearing Floats） #### 方法1：使用 `clear:both` 属性 ```css .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } ``` 此方法适用于IE6及以上版本浏览器，通过添加一个伪元素并在其后使用 `clear:both` 来清除浮动。 #### 方法2：使用伪元素和 `zoom` 属性 ```css .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { zoom: 1; } ``` 这个方法同样适用于IE6及以上版本，通过在容器上添加 `zoom: 1` 来触发hasLayout，从而解决IE下的兼容性问题。 #### 方法3：使用 `overflow:hidden` 属性 ```css .clearfix { overflow: hidden; } ``` 简单且有效的方式，但需要注意可能会导致父元素高度塌陷。 #### 方法4：使用双伪元素 ```css .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } ``` 该方法兼容性较好，能够确保清除所有子元素的浮动。 ### 二、设置字体大小适应屏幕 为了解决不同设备屏幕尺寸下的字体大小问题，可以使用以下CSS属性： ```css -webkit-text-size-adjust: none; ``` 这可以帮助调整字体大小以适应屏幕宽度，特别是在移动设备上非常有用。 ### 三、设置元素的高度为自动或固定值 当需要让元素高度自适应时，可以使用如下CSS代码来处理高度问题： ```css div { height: auto !important; height: 200px; min-height: 200px; } ``` 这种方法可以确保元素在内容超出时不会出现高度塌陷的问题，并且能够兼容各种浏览器。 ### 四、CSS3选择器 #### 1. 基础选择器 - 元素选择器（如 `div`） - 类选择器（如 `.className`） - ID选择器（如 `#idName`） #### 2. 后代选择器 - 通用兄弟选择器（如 `p ~ span`） - 直接子选择器（如 `ul > li`） #### 3. 属性选择器 - 选择具有指定属性的元素（如 `[type]`） - 选择具有特定属性值的元素（如 `[type="text"]`） - 使用 `^=`、`$=`、`*=` 等来匹配属性值的开头、结尾或包含情况（如 `[href^="http"]`） #### 4. 伪类 - 表示元素状态（如 `:hover`, `:active`, `:focus`） - 表示元素类型（如 `:link`, `:visited`） - 表示元素的结构（如 `:first-child`, `:last-child`, `:nth-child()`） #### 5. 伪元素 - `::before` 和 `::after` 可用于向元素内部插入内容。 - `::selection` 可以用来改变文本被选中的样式（IE9及以上支持）。 ### 五、HTML5 新标签 #### 1. `article` - 代表文档、页面或者应用程序中的独立部分。 #### 2. `aside` - 用于表示与页面内容相关但又不是主要内容的一部分，比如侧边栏。 #### 3. `section` - 通常用于表示文档中的一个大的部分，比如章节、页眉、页脚等。 #### 4. `header` - 用于表示页面的头部区域，可以包含导航菜单、logo等。 #### 5. `footer` - 用于表示页面的底部区域，一般包含版权声明、联系方式等信息。 #### 6. `nav` - 专门用来表示页面的导航链接部分。 #### 7. `hgroup` - 用于分组标题，但已被废弃，在 HTML5.1 中不再推荐使用。 #### 8. `figure` - 用于标记图片、图表等自包含的内容，常与 `figcaption` 结合使用。 #### 9. `figcaption` - 用于定义 `figure` 内容的标题或说明文字。 #### 10. `details` - 用于显示可折叠的详细信息，可以配合 `summary` 使用来定义标题。 #### 11. `summary` - 定义了 `details` 元素的标题，点击时会展示或隐藏详情内容。 #### 12. `datalist` - 与 `<input>` 元素结合使用，为输入字段提供预定义选项列表。 #### 13. `progress` - 显示进度条，可以通过 `value` 和 `max` 属性来定义当前值和最大值。 #### 14. `mark` - 用于高亮显示文档中的文本。 #### 15. `keygen` - 用于表单的密钥生成控件，但在 HTML5.1 中已被废弃。 ### 六、CSS3 动画和过渡效果 #### 1. CSS3 动画 - 需要定义关键帧 (`@keyframes`) 来控制动画的变化过程。 - 例如： ```css @keyframes dropdown { from { top: 0; } to { top: 200px; } } .c:hover { animation: dropdown 8s linear infinite; } ``` #### 2. CSS3 过渡效果 - 例如： ```css .box { transition: background-color 0.4s linear, border-radius 1s; } .box:hover { background-color: red; border-radius: 50%; } ``` ### 七、ES6 实现数组去重 #### 方法1：使用 Set 对象 ```javascript const unique = (arr) => [...new Set(arr)]; ``` #### 方法2：使用 Array.from 和 Set 对象 ```javascript const unique = (arr) => Array.from(new Set(arr)); ``` #### 方法3：使用函数实现 ```javascript function unique(arr) { const seen = {}; return arr.filter(item => { return seen.hasOwnProperty(item) ? false : (seen[item] = true); }); } ``` 以上知识点涵盖了前端开发中常见的技术细节，包括清除浮动的方法、响应式设计的技巧、CSS3高级选择器和动画效果的应用，以及HTML5的新标签使用方法和ES6中的数组操作技巧。这些内容对于前端开发者来说非常实用，可以帮助他们在日常工作中更加高效地完成项目。