1.行内元素有哪些，块级元素有哪些，空（void）元素有哪些？
行内元素：span，img，input...
块级元素：div，footer，header，p...
空元素：br，hr...
题目延伸：元素之间如何转换。
把某元素转块级元素:dispaly block （独占一行，可以设置宽高）
把某元素转行内元素:display inline （不独占一行，不可以设置宽高（宽高不生效））
把某元素转行内块元素:display inline-block （不独占一行，可以设置宽高）
2.页面导入样式时，使用link和@import有什么区别？
区别一：link 现有，后有@import（兼容性link比import兼容）；
区别二：加载顺序的差别，浏览器一般先加载标签link，后加载@import
3.title和h1的区别、b与strong的区别、i与em的区别？
title和h1的区别
定义：
title：概括了网站信息，可以告诉搜索引擎或者用户关于这个网站这内容主要是什么。
h1：文章主题内容，告诉蜘蛛我们的网站内容最主要是什么。
区别:
区别1：title是显示在网页的标题上的，h1是显示在网页内容上
区别2：title比h1更加的重要（title>h1） 对于 seo的了解
场景：网站的log都是用h1标签包裹的
b与strong的区别
定义：
b：实体标签，用来给蚊子加粗的
strong：逻辑标签，用来加强字符语气的。
区别：
区别一：b只有加粗的样式，没有实际含义，strong标识标签内的字符比较重要，用以强调
小tips：为了符合css3的规范，b尽量少用改用strong。
i与em的区别
含义：
i：实体标签，用来做文字倾斜。
em：是逻辑标签，用来强调文字内容的
区别：i只是一个倾斜标签，没有实际含义，em表示标签内字符重要，用以强调
使用场景：i更多用在字体图标，em用在术语上（医药，生物）
4.img标签的title和alt有什么区别？
区别一：
title：鼠标移入到图片显示的内容
alt：图片无法加载时显示的内容
区别二：
在seo的层面上，蜘蛛抓取不到图片的内容，所以前端在写img标签的时候为了增加seo效果要加入
alt属性来描述这张图是什么内容或者关键词。
5.png、jpg、gif这些图片格式解释一下，分别什么时候用？
png：是无损压缩，尺寸体积要比jpg、jpeg的大，更适合做小图标
jpg：采用压缩算法，有一点失真，比png体积要小。中大型图片用jpg比较好
gif：一般是动图。
webp：同时支持有损或无损压缩，相同质量的图片，webp具有更小的体积，集合png和jpg的有点， 缺点：兼容性不是特别好。
6.介绍一下css的盒子模型
css的盒子模型有哪些：标准盒子模型，IE盒子模型
css的盒子模型的区别：
标准盒子模型：margin，border，padding，content
IE盒子模型：margin，content（border+padding+content）内容
通过css 如何转换盒子模型
box-sizing：content-box //标准盒子模型
box-sizing：border-box //IE盒子模型
7.line-height和heigh的区别（大厂面试题之一）
height：是一个死值，就是元素盒子的高度值
line-height：是每一行文字的高，如果文字换行则整个盒子的高度会增大。（行数*行高）
8.css的选择符有哪些？哪些属性可以继承？
css选择符：
通配符（*）
id选择器（#）
类选择器（.）
标签选择器（div，p，a）
相邻选择器（+）
后代选择器（空格）
子元素选择器（>）
属性选择器（a[href]）
*****拓展-------后代选择器和相邻选择器的连用（ul li+li ：可排除ul的所有 li 中的第一项）
css属性哪些可以继承：
文字系列：font-size，color，line-height，text-align....
***不可继承属性:
border,padding,margin...
9.css的优先级算法如何计算？
优先级比较：!important > 内联样式 >id > class(类) > 标签 > *(通配符）
css权重计算：
最大：!important
第一：内联样式（style） 权重值：1000
第二：id选择器 权重值：100
第三：类选择器 权重值：10
第四：标签 权重值：1
第五：通配符、>、+ 权重值：0
10.如何用css画一个三角形？
用边框画（border），你可以分别设置左，上，右，下分别设置边框，当你需要那边画三角形就将哪边的边框设置透明。
<style>
div{
width:0;
height:0;
border-left:100px solid ; //transparent
border-right:100px solid ;
border-top:100px solid ;
border-bottom:100px solid ;
}
</style>
<body>
<div><div>
</body>
