HTML+CSS面试题汇总（持续更新）
先注明一下题目来源，剑哥的前端面试每日3+1 大家如果有兴趣可以去github上答题
1、 页面导入样式，使用link与@import有什么区别？
a、从属关系：link是html标签，@import是css提供的
b、加载差异：页面加载时，link会同事加载；而@import引入的css会在页面加载完成后加载
c、兼容性： link没有兼容问题，@import不兼容ie5一下的浏览器
d、link可以通过js操作dom插入link标签改变样式，而@import不能
2、.描述块级元素与行内元素的区别？写出五个块级元素及五个行内元素？img是块级元素还是行内元素？怎么指定元素以块级元素展示？
a 区别
内元素会在一条直线上排列，水平方向排列；块级元素各占据一行，垂直方向排列
块级元素可以包含行内元素和块级元素，行内元素不能包含块级元素，只能包含文字或其它行内元素
行内元素设置width，height无效，margin上下无效，padding上下无效
b 列举
行内元素： span，a, em, strong, i， input, select
块级元素：div,ul,ol, li, h1-h6,p
c img和input属于行内替换元素，height/width/padding/margin均可用。效果等于块元素
d display:block;
3、 H5有哪些新特性？
a 语义化标签： header,footer,section,nav,aside,article
b 增强型表单：input新增多个实用type
c 新增表单元素： datalist，keygen, output
d 新增表单属性：placehoder,require,min,max
e 音频，视频： video,audio
f canvas,地理定位，拖拽
g 本地存储： localStorage---没有时间限制的数据存储，sessionStorage---针对一个session的数据存储，当用户关闭浏览器窗口后，数据会被删除
h 新事件： onresize, onscroll, onerror, onplay,onpause，ondrag，onmousewheel
i webSocket: 单个tcp链接上的全双工协议
4、 cookie，localStorage,sessionStorage的区别
| 特性 | cookie | localStorage | sessionStorage |
| 存储大小 | 4k | 5M | 5M |
| 数据有效期 | cookie在设置的有效期内保存，超过有效期自动清理 | 缓存数据永久有效，可手动清除 | 当前会话有效，关闭页面或浏览器会自动清除 |
| 与服务器通讯 | cookie会参与服务器的通信，每次都会携带在http的头部信息中 | 不参与通信 | 不参与通信 |
| 作用域区别 | 不同浏览器不能共享localStorage，sessionStorage中的数据 | 相同浏览器不同页面可以共享相同的localStorage(页面属于相同的域名及端口)，但是不同页面及标签间不能共享相同的sessionStorage |
5 、css选择器有哪些？优先级？
a.通配符选择器（*）：用来选择所有元素，或者某个元素的所有子元素
b.元素选择器（E）：常见，最基本的选择器
c.id选择器（#ID）：id选择器只能选择页面中的唯一一个ID
d.class选择器（.class）:类选择器会选择页面中class名为指定名的所有标签，组成一个类数组
e.后代选择器（E F）：E为父元素，F为子元素
f.子元素选择器（E>F）：使用大于号 “>”指定
g.相邻选择器（E+F） : 选择一个指定元素的兄弟元素
h.选择器优先：！important > 内联 > ID选择器 > class选择器 > 标签选择器
6 、什么叫css盒模型？有几种盒模型？margin与padding的区别？
css盒模型是css技术的一种思维模式。每个盒模型有内容（content），填充（padding），边框（border），外边距（margin）组成
css盒模型有两种，IE盒模型和w3c标准盒模型，其中IE模型的width=content+padding+border，而标准盒模型width=content
margin是自身容器边框到另一个容器容器边框的距离，就是容器的外边距
padding是自身容器边框到自身内容之间的距离，是为内边距
7、Doctype作用？标准模式与兼容模式各有什么区别? 你知道多少种Doctype文档类型
a、告诉浏览器解析器以什么文档标准来解析文档，DOCtype不存在或者编写错误会以兼容模式来呈现
b、 标准模式下排版和js运行模式都以浏览器支持的最高标准运行
兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为已防止页面无法工作
c、常用的Docytpe有：html5、htm4.1 strict、html4.1 transitional、html4.1 frameset
8、说说你对语义化的理解
根据内容的结构化使用适合的语义化标签，让浏览器的爬虫和机器更好的解析，同时增加代码的可读性及可维护性
9、html与xhtml的区别？
xhtml必须被正确地嵌套
xhmtl便签必须小写
xhtml空标签也必须被关闭
xhtml文档必须有根元素<html></html>
10、css3新增伪类选择器
a、E:not(ele) 除了ele以外的都选中，常用于除最后一个li外就下边框 ---ul li:not(:last-of-type)
b、E:root 获取根元素---:root {background:red}
c、E:first-child 第一个子元素;E: last-child 最后一个子元素; E:only-child 判断是否是独生子，如果是就选中
d、E:nth-child(n) 选中第n个元素，n从1开始；n也可以是表达式，如2n+1;可以配合odd（奇数），even（偶数）使用
e、E:nth-last-child(n),与E:nth-child(n)用法一样，但是是从末尾开始计数的，就是倒数 ;
f、以上cde所述选择器都会受到其它元素的影响，例如父元素的第n个元素不是指定元素，就选不了了
g、E:first-of-type在父元素下查找第一个E；E:last-of-type在父元素下查找最后一个E；E:only-of-type判断是否是独生子，如果是就选中；
h、E:nth-of-type(n) 与nth-child(n)一样，不过不会受到其它元素影响
i、E:nth-of-last-type 与E:nth-of-type(n)相反，是倒数计数
j、以上ghi所述选择都不会受到其它元素影响
k、E:empty 选中一个空元素，里面什么都没有，包括空格
l、E:checked 匹配被选中的表单，radio或者CheckBox
m、E:enabled,E:disabled 匹配input的正常状态和不可操作状态
11. div+css布局的好处
- 代码精简，且结构与样式分离，易于维护
- 代码量减少了，减少了大量的带宽，页面加载的也更快，提升了用户体检
- 对seo搜索引擎更加友好，且H5又新增了许多语义化标签更是如此
- 允许更多炫酷的页面效果，丰富了页面
- 符合W3C标准，保证网站不会因为网络应用的升级而淘汰
12. 盒模型及如何转换
- box-sizing: content-box （W3C盒模型，又名标准盒模型）： 元素的宽高大小表现为内容的大小
- box-sizing: border-box（IE盒模型，又名怪异盒模型）：元素的宽高表现为内容 + 内边距 + 边框的大小
13. 实现水平垂直居中的几种方式
- flex布局
.box {
display: flex;
width: 100px;
height: 100px;
background-color: pink;
justify-content: center;
align-items: center;
}
.box-center{
background-color: greenyellow;
}
- 绝对定位布局
.box {
position: relative;
height: 100px;
width: 100px;
background-color: pink;
}
.box-center{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: 50px;
height: 50px;
background-color: greenyellow;
}
或者
.box {
position: relative;
background-color: pink;
}
.box-center{
position: absolute;
left: 50%;
top: 50%;
transform：translate(-50%,-50%)
margin: auto;
width: 50px;
height: 50px;
background-color: greenyellow;
}
13、flex的兼容性怎么样？？
- IE9（包括IE9）以下不支持，IE10~11部分支持，但是需要-ms-前缀
- 其他主流浏览器包括安卓iOS基本都支持了
14、font样式的便捷式写法
font: font-style font-variant font-weight font-size/line-height font-family
