Doctype的作用？
声明于html文档的最前面。告知浏览器以何种模式来渲染文档
HTML5 为什么只需要写 <!DOCTYPE HTML>？
<!DOCTYPE HTML> 是文档类型声明，它声明了文档类型为html5，告诉浏览器和其他开发者，该文档使用的是html5标准
什么是FOUC，如何避免？
fouc：css放在页面底部，使得css晚于html加载，当加载到此样式表时，页面会停止之前的渲染，此样式表被下载和解析后，会重新渲染页面，也就会出现短暂的花屏现象。
解决：使用link加载css文件，放在head里面
fouc：页面使用了@import或者多个style，css文件放在页面底部加载，使得css文件在html之后加载，导致闪烁，花屏
原理：如果样式表晚于结构html加载，当加载到此样式表时，页面将停止之前的渲染，此样式表被下载和解析后，会重新渲染页面，也就出现了短暂的花屏现象
解决：使用link加载css文件，放在head里面
img标签上的title和alt属性
- title：鼠标滑入提供描述信息
- alt：当图片不显示时，显示在网页上的替代文字
- alt是必要属性，title非必要
img底部边距去除
设置：display:block
设置：float:left
设置：vertical-align: bottom
html5新增哪些新特性？
- 新增标签
article、aside、audio、bdi、canvas、command、datalist、details、embed、figcaption、figure、footer、header、hgroup、keygen、mark、meter、nav、output、progress、rp、rt、ruby、section、source、summary、time、track、video
其中常用标签：
-
- aside：定义页面主区域之外的内容，比如侧边栏；
- article：定义独立的内容；
- video：多媒体
- canvas：画布
- footer：定义文档的底部区域
- header：定义文档的头部区域
- nav：定义导航链接的部分
- section：定义文档中节，比如章节、页眉、页脚
- 新增localStorage 和 sessionStorage
- 新增contenteditable属性（任何dom节点只要加上contenteditable = 'true'，就变得可编辑）
- Geolocation地理定位
什么是标签语义化？
定义：更直观的表现出每个标签的含义作用。
优点：
- 代码结构清晰，易于阅读，利于开发和维护
- 方便其他设备解析（如屏幕阅读器）根据语义渲染网页
- 有利搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重
块级元素有哪些？块级元素有哪些？空（void）元素有哪些？行内元素和块级有什么区别？
- 块级元素：div、ul、li、p、article、main、header、table、tr、h1-h6
- 行级元素：span、a、img、input、select、stron
- 空元素：br、img、input、link、meta
区别：
- 块级元素：独占一行，margin上下左右均有效，可以设置宽高
- 行级元素：不独占一行，margin只对左右有效，不可以设置宽高
HTML全局属性(global attribute)有哪些
- class：为元素设置类标识
- id：文档唯一
- data-*：为元素增加自定义属性
- lang：元素内容的语言
- style：行内css样式
- title：元素相关的建议信息
- dir：规定元素中内容的文本方式（ltr：从左到右，rtl：从右到左）
- contenteditable：设置true，可编辑元素
Canvas和SVG有什么区别？
- canvas：html5新增元素，通过JavaScript来绘制2D图形
- svg：可伸缩矢量图，使用xml描述2D图形的语言，不是html5新增，已存在很久（10几年）
渐进增强与优雅降级的区别
渐进增强：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后在针对高级浏览器进行效果，交互，追加功能达到更好的体验
优雅降级：一开始就构建站点的完整功能，然后针对浏览器测试和修复，
.transition { /*渐进增强写法*/ -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .transition { /*优雅降级写法*/ transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; }
input属性readonly和disabled，有什么区别？
readonly：不可编辑，可以选择和复制，值可以传递到后台
disabled：不能编辑，不可以选择和复制，值不可以传递到后台
iframe的优越点？有什么替代方法？
优点：
- iframe能够原封不动的把嵌入的网页展示出来
- 提高页面代码的复用性
- 避免页面整体刷新
- iframe解决部分跨域问题
- 解决加载缓慢的第三方内容，如图标、广告等的加载问题
缺点
- 阻塞onload，window的onload事件会等页面中iframe的所有内容加载完成，才会运行
- 会产生很对页面，不便于管理
- 移动端无法完全显示框架，设备兼容性差
- 创建iframe比其他dom元素更耗费性能创建iframe耗费的性能比其他DOM元素（包括style或script）多10-100倍
- 无法被一些搜索引擎索引到
- 页面会增加服务器的http请求
- 会出现区域的上下、左右滚动条，挤占页面控件
解决办法：可以使用ajax来代替
CSS中link和@import的区别是什么
- link属于html标签，无兼容问题，而@import是CSS提供的，只能在IE5以上才能识别
- 页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载
- link方式的权重高于@import
- 当使用JavaScript控制DOM去改变样式的时候，只能使用link方式，因为@import只有CSS才能识别，无法控制
CSS3有哪些新特性？
新增特性有：圆角（border-radius）、阴影（box-shadow）、对文字加特效（text-shadow）、线性渐变（gradient）、变形（transform）
增加了更多的css选择器，媒体查询，多栏布局
清除浮动的方式？
- 父级div定位伪类 :after
- 父级div定义height
- 父级div定义 overflow:hidden
- 结尾处 br，clear:both
浮动元素引起的问题？
- 父元素的高度无法撑开，
- 与浮动元素同级的非浮动元素会跟随其后
- 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
clear实现清除浮动的原理？
.clearfix::after {
content: '';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
原理：clear是CSS中的定位属性，规定元素的哪一侧不允许浮动元素，clear: both 就是规定在左右两侧均不允许浮动元素
解释一下浮动及其工作原理？
浮动：浮动元素脱离文档流，不占据空间（引起高度塌陷）
浮动元素碰到包含它的边框或者浮动元素边框停留
display、visibility、opacity的区别？
display: none- dom结构：不会占据空间
- 事件监听：无法进行事件监听
- 性能：动态改变此属性，会引起重排。性能较差
- 继承：不会被子元素继承
- transition：不支持display
visibility: hidden- dom结构：会占据空间
- 事件监听：无法进行事件监听
- 性能：动态改变此属性，会引起重绘，性能较高
- 继承：会被子元素继承，子元素可以设置visibility: visible取消隐藏
- transition：visibility会立即显示，隐藏会延时
- opacity: 0
- dom结构：会占据空间
- 事件监听：可以进行事件监听
- 性能：不会引起重绘，性能较高
- 继承：会被子元素继承，子元素可以通过设置opacity: 1取消隐藏
- transition：opacity可以延时和隐藏
position的absolut与fixed有什么相同点和不同点？
相同：
- 让元素脱离文档流，不占据空间
- 改变行内元素呈现的方式，display被置为block
不同：
- absolut的根元素是可以设置的，而fixed的根元素固定为浏览器窗口
- 滚动网页的时候，fixed在浏览器窗口的位置是不会变化的
position中，relative和absolute分别是相对于谁定位的?
absolute：生成绝对定位的元素，相对于static定位以外的第一个祖先元素进行定位
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位
relative：生成相对定位的元素，相对于其在普通流中的位置进行定位
static：默认值，没有定位，元素出现在正常的文档流中
水平垂直居中的方法？
未知宽高：position+transform
div{
position:absolute;
left:50%;
top:50%;
tansform:translate(-50%, -50%);
}
已知宽高：position+margin
div{
100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
绝对定位方法：top left bottom right为0
div{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: 0;
}
flex布局方法
div{
display: flex;
justify-content: center;
align-items: center;
}
table-cell方法
div{
display: table-cell;
vertical-align: middle;
text-align: center;
}
transition和margin的百分比根据什么计算？
transition 根据自身，margin根据参照物
content-box和border-box，content-box更合理，为什么还是经常使用border-box？
content-box是w3c的标准盒模型，width和heght指的是content区域的宽度和高度，改变内边距、边框、外边距不会影响内容区域的尺寸，但是会增加
border-box是IE的怪异模型，width和heght指的是content区域 + border +padding，在元素基础上添加border或padding，不会把布局撑破
标准盒模型和IE盒模型都包括margin、border、padding、content
浏览器是怎样解析css选择器的？
css选择器是从右向左解析的，为了避免对所有元素进行遍历
若从左向右匹配，发现不符合规则，需要回溯，会损失很多性能
若从右向左匹配，先找到最右节点，向上寻找，会筛选掉大量不符合条件的最右节点
css伪类和伪元素
伪类用单冒号表示：如:link、:visited、:hover、:active、:focus、:first-child、:last-child、:nth-child、:nth-last-child、:not()
伪元素用双冒号表示：如::fist-letter、::first-line、::before、::after
部分伪类解释：
:link 设置未被访问的链接样式 :visited 设置被访问的链接样式
:hover 设置鼠标悬浮的样式 :active 设置鼠标松开的样式 :focus 使用键盘移动页面焦点时的样式
伪类弥补了常规css选择器的不足，伪元素创建了一个虚拟容器
CSS属性content有什么作用？
css的content属性专门应用在after/before伪元素上，用于插入生成内容，可以配合自定义字体显示特殊符号
rgba()和opacity不同点？
- opacity作用于元素，以及元素内的所有内容的透明度，rgba()只作用于元素的颜色或其背景色
- 设置rgba的元素的子元素不会继承透明效果
什么是外边距重叠？重叠的结果是什么？
外边距重叠就是margin-collaps
在css当中，相邻的两个盒子的外边距可以结合成一个单独的外边距，这种合并外边距的方式成为折叠，所结合成的外边距称为折叠外边距
折叠结果计算规则：
- 两个相邻的外边距都是正数时，折叠结果取两者之间较大的值
- 两个相邻的外边距都是负数时，折叠结果取两者绝对值的较大值
- 两个外边距一正一负时，折叠结果取两者相加的和
什么是BFC？怎么创建？有什么作用？
定义：BFC就是块级格式上下文，是页面和模型布局中的一种css渲染模式。相当于一个独立的布局容器，里面的元素和外部的元素相互不影响，
创建方式：
- 浮动元素（float不能为none）
- 绝对定位元素（position不能为relative或static）
- 行内块元素（display为inline-block）
- 弹性元素（display为flex或inline-flex）
- 网格元素（display为grid或inline-grid）
- overflow值不为visible（一般设置为overflow:hidden）
作用：
- 避免外边距重叠(两个相邻的盒子或者父子盒子的外边距塌陷)
- 清除浮动
- 计算BFC高度时，浮动元素也会参与计算