前端面试01-HTML+CSS
1.每个HTML文件里面都有一个很重要的东西，Doctype，知道这是干什么的么？
- 要点一 : 该标签告知浏览器浏览文档要使用的HTML规范 , 告知浏览器以何种规范解析页面
- 要点二 : 声明对大小写不敏感
2.常用浏览器有哪些，内核都是什么？
常用浏览器有chrome、safari、 IE、火狐(firefox) 、 Opera 、360、搜狗等
浏览器 | 内核 | 备注 |
|---|---|---|
IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
firefox | Gecko | 可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。 |
Safari | webkit | 现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。苹果感觉像被别人抢了媳妇，都哭晕再厕所里面了。 |
chrome | Chromium/Blink | 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发 |
Opera | blink | Presto（已经废弃） 是挪威产浏览器 opera 的 “前任” 内核,现在跟随chrome用blink内核。 |
3.简述一下你对HTML语义化的理解？
- 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构
- 用户体验：例如title、alt用于解释名词
- 有利于SEO：利于被搜索引擎收录，更便于搜索引擎的爬虫程序来识别
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页
- 便于项目的开发及维护，使HTML代码更具有可读性
4.href与src的区别
- href：Hypertext Reference的缩写，超文本引用，它指向一些网络资源，建立和当前元素或者说是本文档的链接关系。在加载它的时候，不会停止对当前文档的处理，浏览器会继续往下走。常用在a、link等标签。
- src：source的所写，表示的是对资源的引用，它指向的内容会嵌入到当前标签所在的位置。由于src的内容是页面必不可少的一部分，因此浏览器在解析src时会停下来对后续文档的处理，直到src的内容加载完毕。常用在script、img、iframe标签中，我们建议js文件放在HTML文档的最后面。如果js文件放在了head标签中，可以使用window.onload实现js的最后加载。
总结：href用于建立当前页面与引用资源之间的关系（链接），而src则会替换当前标签。遇到href，页面会并行加载后续内容；而src则不同，浏览器需要加载完毕src的内容才会继续往下走。
5.页面导入样式时，使用link和@import有什么区别？
1.从属关系区别
- @import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2.加载顺序区别
- 加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3.兼容性区别
- @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4.DOM可控性区别
- 可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM方法是基于文档的，无法使用@import的方式插入样式。
5.权重区别(该项有争议，下文将详解)
- link引入的样式权重大于@import引入的样式。
6.CSS选择器优先级 && CSS选择器效率
!important > 内联样式 > ID选择器 > 类选择器（属性选择器、伪类选择器）> 元素选择器（伪元素选择器）> 通配符选择器
关于CSS的执行效率
- 样式系统从右向左匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。
- 因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点；而从左向右的匹配规则的性能都浪费在了失败的查找上面。
7.CSS margin重叠问题
块级元素的上外边距（ margin-top ）与下外边距（ margin-bottom ）有时会合并为单个外边距， 这样的现象称为 “margin 合并” 。 margin 合并的2 种场景： （ 1 ）相邻兄弟元素 margin 合并。 解决办法：
- 设置块状格式化上下文元素（ float/position:absolute等 ）,或设置其中一个元素的margin
（ 2 ）父级和第一个 / 最后一个子元素的 margin 合并。 解决办法： 对于 margin-top 合并，可以进行如下操作（满足一个条件即可）：
- 父元素设置为块状格式化上下文元素(float/position:absolute等)；
- 父元素设置 border-top 值；
- 父元素设置 padding-top 值；
8.网页布局有哪几种，有什么区别
静态、自适应、流式、响应式四种网页布局;
- 静态布局：意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置；
- 自适应布局：就是说你看到的页面，里面元素的位置会变化而大小不会变化；
- 流式布局：你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
- 响应式布局：每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。
9.position属性和值的含义
position 属性规定元素的定位类型。
值 | 描述 |
|---|---|
absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative | 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
sticky | 粘性定位(而sticky相当于加了一个滚动事件的处理，当页面滚动到相对应的元素上，就会变成固定定位的效果。当滚动到父元素不在可视区域范围内时，定位效果就会消失。) |
static | 默认值。没有定位，元素出现在正常的流中 |
10.display:inline-block 什么时候不会显示间隙？
- 将子元素放置在同一行
- 为父元素中设置font-size: 0，在子元素上重置正确的font-size
- 为inline-block元素添加样式float:left
- 设置子元素margin值为负数
11.你对BFC的理解?
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域.
创建BFC
- body根元素
- 设置浮动,float的值是left或者right
- 设置定位
- position不是static或者relative
- 是absoulte或者fixed
- display的值是inline-block
- 设置overflow
- overflow的值不是visible
- 是hidden，auto，scroll
- 表格单元格，table-cell
- 弹性布局，flex
利用BFC解决问题
- 解决外边距的塌陷问题(垂直塌陷)
- 利用BFC解决包含塌陷
- 清除浮动产生的影响
- BFC可以阻止标准流元素被浮动元素覆盖