前端面试题
浏览器
2、现在的主要浏览器
IE、Firefox、Safari、Chrome、Opera。
它们的浏览器内核（渲染引擎）、css 前缀：
- IE—— Trident —— -ms-
- Firefox—— Gecko —— -mos-
- Safari—— Webkit —— -webkit-
- Chrome—— Blink（WebKit的分支）—— -webkit-
- Opera—— 原为Presto，现为Blink —— -o-
HTML
1、什么是语义化的 html ？
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
2、为什么要语义化？
- 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构。（为了裸奔时好看）
- 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
- 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
- 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
3、列举几个常见的块级元素、行内元素、行内块级元素
块状元素：<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>,<address>,<form>
行内元素：<a>,<span>,<i>,<em>,<strong>,<label>,<img>,<input>,<select>,<textarea>,<button>
行内块级元素: img 、input、select、textarea、button
4、HTML5 新增的语义标签
section： 表示页面中的一个区块
article： 表示一块与上下文无关的独立的内容
aside： 在article之外的，与article内容相关的辅助信息
header： 表示页面中一个内容区块或整个页面的标题
footer：表示页面中一个内容区块或整个页面的脚注
nav： 表示页面中导航链接部分
hgroup：标题的一个分组
CSS
1、css 选择器以及它们的优先级
具体选择器详情可以查看：CSS的四种基本选择器和四种高级选择器
- ！important
- 行内样式 (写在style属性里面的）
- id选择器
- class选择器
- 标签选择器
- 通配符选择器*
- 浏览器自定义属性的继承
2、谈谈 display 这个属性
none：元素不显示，并且从文档流中移除该元素
block：块类型，可设置宽高，可换行（默认宽度为父元素宽度）
inline：行内元素类型，不可设置宽高，不可换行（默认宽度为内容宽度）、margin只有左右有效
inline-block：行内块元素类型，默认宽度为内容宽度，可以设置宽高，不可换行，（行内块元素之间会有空白缝隙）
inherit：规定应该从父元素继承display属性的值
list-item：像块元素一样显示，并添加样式列表标记
table: 作为块级标签来显示
3、link 和 @import 的区别
两者都是引入外部css样式的方法，它们的区别如下：
- link属于XHTML的标签，可以引入RSS等其他事务；@import属于CSS范畴，只能加载CSS
- link引用CSS时，随着页面的加载而加载；@import需要页面网页完全载入以后再去加载（闪屏现象）
- link没有兼容性的问题；@import低版本浏览器不支持
- link支持使用JavaScript控制DOM去改变样式；而@import不支持
伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。
伪元素：在内容元素的前后插入额外的元素的和样式，但是这些元素实际上并不在文档上生成。它们只在外部显示可见，但不会在文档的源代码中找到它们因此成为伪元素。
5、说说 flex 弹性布局
个人觉得阮一峰老师的这篇文章就已经总结的特别好了：Flex布局教程
6、把鼠标移到按钮并点击时，会产生一串什么样的事件？
触发顺序为 link --> visited ---> hover ---> active
然后单独记住focus在hover和active之间即可
7、CSS3 新特性
- 圆角(border-radius)
- 盒子阴影（box-shadow）
- 移动、旋转、缩放，倾斜(transform)
- 图片边框（border-image）
- 文字阴影 (text-shadow)
- 文字自动换行(word-wrap)
- transition 过渡动画
- animation 帧动画
- ......
8、css 中可继承与不可继承的属性
无继承的属性：
- display
- 文本属性(vertical-align,text-decoration,text-shadow),
- 盒子模型的属性
- 背景属性
- 定位属性（float，position）
有继承的属性：
- 字体系列属性（font-size等）
- 文本系列属性（line-height、text-indent、text-align、color）
- 元素可见性（visibility）
- 列表属性布局（list-style）
- 光标属性（cursor）
- 列表元素可继承 (list-style)
8、z-index属性在什么情况下会失效？
z-index是为了解决多个元素重叠时，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越在上层。
z-index属性在下列情况下会失效：
- 父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；
- 元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；
- 元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；
9、display、position、float 的优先级
1. display 的值是 none
如果 display 的值是 none，则 position 和 float 无效。否则，继续进行2。
2. position 的值是 absolute 或 fixed
如果 position 的值是 absolute 或 fixed，则浮动失效，并且 display 的值按照对应表设置。否则，继续进行3。
此时，元素的位置将由 ‘top’，’right’，’bottom’ 和 ‘left’ 属性和该框的包含块确定。
3. float 的值不是 none
如果 float 的值不是 none，则元素浮动，并且 display 的值按照对应表设置。否则，继续进行4。
4. 元素是根元素
如果元素是根元素，display 的值按照对应表设置。否则，继续进行5。
5. 应用指定的 display 特性值
10、display:none 和 visibility:hidden 的区别
15、src 和 href 的区别
- src 指向外部资源的位置, 用于替换当前元素, 比如js脚本, 图片等元素
- href 指向网络资源所在的位置, 用于在当前文档和引用资源间确定联系, 加载css
正在奋力补充中ヾ(◍°∇°◍)ﾉﾞ......
浙公网安备 33010602011771号