1. 行内元素有哪些？块级元素有哪些？ 空(void)元素有哪些？
行内元素：a、span、img、input... 块级元素：div、footer、header、section、p、h1...h6... 空元素：br、hr...
元素之间的转换问题：
display: inline; 转换成了行内元素 ===>不独占一行的，并且不能设置宽高
display: inline-block; 转换成了行内块元素 ===>不独占一行的，可以设置宽高
display: block;转换成了块元素===>独占一行，并且可以设置宽高
2. 页面导入样式时，使用link和@import有什么区别？
加载顺序差别，浏览器先加载的标签link，后加载@import
3. title与h1的区别、b与strong的区别、i与em的区别？
- title与h1的区别：
定义：
title：概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么 h1：文章主题内容，告诉蜘蛛我们的网站内容最主要是什么
区别：
title他是显示在网页标题上、h1是显示在网页内容上 title比h1添加的重要 (title > h1 ) ==》对于seo的了解
场景：
网站的logo都是用h1标签包裹的
- b与strong的区别：
定义：
b：实体标签，用来给文字加粗的。 strong：逻辑标签，用来加强字符语气的。
区别：
b标签只有加粗的样式，没有实际含义。 strong表示标签内字符比较重要，用以强调的。
题外话：为了符合css3的规范，b尽量少用该用strong就行了。
- i与em的区别：
定义：
i:实体标签，用来做文字倾斜的。 em：是逻辑标签，用来强调文字内容的
区别：
i只是一个倾斜标签，没有实际含义。 em表示标签内字符重要，用以强调的。
场景： i更多的用在字体图标，em术语上（医药，生物）。
5. img标签的title和alt有什么区别？
区别一： title ： 鼠标移入到图片显示的值, alt ：图片无法加载时显示的值
区别二： 在seo的层面上，蜘蛛抓取不到图片的内容，所以前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词。
6. png、jpg、gif 这些图片格式解释一下，分别什么时候用？
png:无损压缩，尺寸体积要比jpg/jpeg的大，适合做小图标。
jpg:采用压缩算法，有一点失真，比png体积要小，适合做中大图片。
gif:一般是做动图的。
webp：同时支持有损或者无损压缩，相同质量的图片，webp具有更小的体积。兼容性不是特别好。
7. 介绍一下CSS的盒子模型
CSS的盒子模型有哪些：标准盒子模型、IE盒子模型
CSS的盒子模型区别：
标准盒子模型：margin、border、padding、content
IE盒子模型 ：margin、content（ border + padding + content ）
通过CSS如何转换盒子模型：
box-sizing: content-box; /标准盒子模型/
box-sizing: border-box; /IE盒子模型/
8. CSS选择符有哪些？哪些属性可以继承？
CSS选择符：
通配（*） id选择器（#） 类选择器（.） 标签选择器（div、p、h1...） 相邻选择器(+) 后代选择器(ul li) 子元素选择器（ > ） 属性选择器(a[href])CSS属性哪些可以继承：
文字系列：font-size、color、line-height、text-align...
***不可继承属性：border、padding、margin...
9. CSS优先级算法如何计算？
- 优先级比较：!important > 内联样式 > id > class > 标签 > 通配
CSS权重计算：
第一：内联样式（style） 权重值:1000
第二：id选择器 权重值:100
第三：类选择器 权重值:10
第四：标签&伪元素选择器 权重值:1
第五：通配、>、+ 权重值:0
10. 用CSS画一个三角形
用边框画（border）,例如：
{
width: 0;
height: 0;
border-left:100px solid transparent;
border-right:100px solid transparent;
border-top:100px solid transparent;
border-bottom:100px solid #ccc;
}
11. 一个盒子不给宽度和高度如何水平垂直居中？
方式一：
<div class='container'>
<div class='main'>main</div>
</div>
.container{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
border:5px solid #ccc;
}
.main{
background: red;
}
方式二：
<div class='container'>
<div class='main'>main</div>
</div>
.container{
position: relative;
width: 300px;
height: 300px;
border:5px solid #ccc;
}
.main{
position: absolute;
left:50%;
top:50%;
background: red;
transform: translate(-50%,-50%);
}
方式三：
<div class='container'>
<div class='main'>main</div>
</div>
.container{
position: relative;
width: 300px;
height: 300px;
border:5px solid #ccc;
}
.main{
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
background: red;
}
12. display有哪些值？说明他们的作用
none 隐藏元素
block 把某某元素转换成块元素
inline 把某某元素转换成内联元素
inline-block 把某某元素转换成行内块元素
13. 对BFC规范(块级格式化上下文：block formatting context)的理解？
BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
1. 了解BFC ： 块级格式化上下文。
2. BFC的原则：如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外面的元素。
3. 如何触发BFC：
float的值非none
overflow的值非visible
display的值为：inline-block、table-cell...
position的值为:absoute、fixed
14. 清除浮动有哪些方式？
1. 触发BFC
2. 多创建一个盒子，添加样式：clear: both;
3. after方式
ul:after{
content: '';
display: block;
clear: both;
}
15. 在网页中的应该使用奇数还是偶数的字体？为什么呢？
偶数 : 让文字在浏览器上表现更好看。
另外说明：ui给前端一般设计图都是偶数的，这样不管是布局也好，转换px也好，方便一点。
16. position有哪些值？分别是根据什么定位的？
static [默认] 没有定位
fixed 固定定位，相对于浏览器窗口进行定位。
relative 相对于自身定位，不脱离文档流。
absolute 相对于最近一级有定位的父元素，如果没有的话，则以浏览器为准定位脱离文档流。
17. 写一个左中右布局占满屏幕，其中左、右两块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。
18. 什么是CSS reset？
reset.css 是一个css文件，用来重置css样式的。
normalize.css 为了增强跨浏览器渲染的一致性，一个CSS 重置样式库。
19. css sprite是什么,有什么优缺点
1. 是什么
把多个小图标合并成一张大图片。
2. 优缺点
优点：减少了http请求的次数，提升了性能。
缺点：维护比较差（例如图片位置进行修改或者内容宽高修改）
20. display: none;与visibility: hidden;的区别
1. 占用位置的区别
display: none; 是不占用位置的
visibility: hidden; 虽然隐藏了，但是占用位置
2. 重绘和回流的问题
visibility: hidden; display: none; 产生重绘
display: none; 还会产生一次回流
产生回流一定会造成重绘，但是重绘不一定会造成回流。
产生回流的情况：改变元素的位置(left、top...)、显示隐藏元素....
产生重绘的情况：样式改变、换皮肤
21. opacity 和 rgba区别
共同性：实现透明效果
1. opacity 取值范围0到1之间，0表示完全透明，1表示不透明
2. rgba R表示红色，G表示绿色，B表示蓝色，取值可以在正整数或者百分数。A表示透明度取值0到1之间
区别：继承的区别
opacity会继承父元素的opacity属性，而RGBA设置的元素的后代元素不会继承不透明属性。
