1.行内元素有哪些？块级元素有哪些？ 空(void)元素有哪些？
行内元素：span、img、input...
块级元素：div、footer、header、section、p、h1...h6...
空元素：br、hr...
元素之间的转换问题：
display: inline; 把某元素转换成了行内元素===>不独占一行的，并且不能设置宽高
display: inline-block; 把某元素转换成了行内块元素===>不独占一行的，可以设置宽高
display: block; 把某元素转换成了块元素===>独占一行，并且可以设置宽高
2.link 与 @import 的区别
1、link 属于 html 标签，而@import 是 css提供
2、页面被加载时，link 会同时被加载，而@import 引用的 css 会等到页面加载结束后加载
3、link 方式样式的权重高于@import 的
3.title与h1的区别、b与strong的区别、i与em的区别？
title与h1的区别：
~title他是显示在网页标题上、h1是显示在网页内容上
~在做网站SEO的层面上，title>h1（蜘蛛先爬title）
场景：
网站的logo都是用h1标签包裹的
b与strong的区别：
定义：
b：实体标签，用来给文字加粗的。
strong：逻辑标签，用来加强字符语气的。
区别：
b只是一个加粗标签，没什么特殊含义
strong也是一个加粗标签，但是有特殊含义，（强调：阅读器、seo）
i与em的区别：
定义：
i:实体标签，用来做文字倾斜的。
em：是逻辑标签，用来强调文字内容的
区别：
i只是一个倾斜标签，没有实际含义。
em表示标签内字符重要，用以强调的。
场景：
i更多的用在字体图标，em术语上（医药，生物）。
4.img标签的title和alt有什么区别？
区别一：
title ： 鼠标移入到图片显示的值
alt ： 图片无法加载时显示的值
区别二：
在seo的层面上，蜘蛛抓取不到图片的内容，所以前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词。
5.png、jpg、gif 这些图片格式解释一下，分别什么时候用？
jpg、jpeg:适合大图片（banner）,采用压缩算法（同样的相对png体积小一点，有一点失真）
png:适合做小图标，无损压缩，尺寸体积要比jpg/jpeg的大
gif:一般是做动图的。
webp：同时支持有损或者无损压缩，相同质量的图片，webp具有更小的体积。兼容性不是特别好
6.知道的网页制作会用到的图片格式有哪些？
png-8，png-24，jpeg，gif，svg。
面试官希望听到是 Webp。（是否有关注新技术，新鲜事物）
科普一下 Webp：WebP 格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。
图片压缩体积大约只有 JPEG 的 2/3，并能节省大量的服务器带宽资源和数据空间。Facebook
Ebay 等知名网站已经开始测试并使用 WebP 格式。
在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%
7、介绍一下CSS的盒子模型
CSS 中的盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。
标准盒子模型的盒子宽度：左右 border+左右 padding+width(content)
IE 盒子模型的盒子宽度：width（左右 border+左右 padding+content）
通过CSS如何转换盒子模型：
box-sizing: content-box;
box-sizing: border-box;
标准盒模型：
IE 盒子模型：
8.line-height和heigh区别height是一个死值，就是这个盒子的高度。 line-height是每一行文字的高，如果文字换行则整个盒子高度会增大（行数*行高）。 场景：一个盒子多行文字9.CSS选择符有哪些？哪些属性可以继承？
CSS选择符：
通配（*）
id选择器（#）
类选择器（.）
标签选择器（div、p、h1...）
相邻选择器(+)
后代选择器(ul li)
子元素选择器（ > ）
属性选择器(a[href])
CSS属性哪些可以继承：
文字系列：font-size、color、line-height、text-align...
不可继承属性：
border、padding、margin...
10.CSS优先级算法如何计算？
优先级比较：!important > 内联样式 > id > class > 标签 > 通配 权重叠加 如果是复合选择器，则会有权重叠加，需要计算权重。 - div ul li ------> 0,0,0,3 - .nav ul li ------> 0,0,1,2 - a:hover -----—> 0,0,1,1 - .nav a ------> 0,0,1,111.用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;
}
12.垂直居中的方法
1、flex布局
将父元素设置为 display:flex，并且设置 align-items:center;justify-content
2、margin:auto
//html
//css
div{
width: 400px;
height: 400px;
position: relative;
border: 1px solid #465468;
}
img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
3、定位法
main
.container{
position: relative;
width: 300px;
height: 300px;
border:5px solid #ccc;
}
.main{
position: absolute;
left:50%;
top:50%;
background: red;
transform: translate(-50%,-50%);
}
如果盒子宽度高度知道，可以使用
margin-top: -X;
margin-left: -y;
13.display有哪些值？说明他们的作用。
none 隐藏元素 block 把元素转换成块元素 inline 元素转换成内联元素 inline-block 把元素转换成行内块元素14.对BFC规范(块级格式化上下文：block formatting context)的理解？
BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素 如何触发BFC： float的值非none overflow的值非visible(overflow：hidden重点） display的值为：inline-block、table-cell... position的值为:absoute、fixed15、清除浮动的方法
选择器{clear:属性值;}
1、额外标签法(使用带 clear 属性的空元素)
额外标签法会在浮动元素末尾添加一个空的标签。
，或者其他标签（如
等）
2、父级添加 overflow 属性
overflow:hidden | auto | scroll;
3、父级添加after伪元素
- 添加下面代码在样式中
- 父盒子中添加类clearfix
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
4、父级添加双伪元素
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
16、position有哪些值？分别是根据什么定位的？
static [默认] 没有定位 fixed 固定定位，相对于浏览器窗口进行定位。 relative 相对于自身定位，不脱离文档流。 absolute 相对于第一个有relative的父元素，脱离文档流。 relative和absolute区别 1. relative不脱离文档流 、absolute脱离文档流 2. relative相对于自身 、 absolute相对于第一个有relative的父元素 3. relative只能设置2个值如果有left、right、top、bottom ==>left、top absolute能设置4个值如果有left、right、top、bottom ==>left、right、top、bottom17.什么是CSS reset？
reset.css 是一个css文件，用来重置css样式的。 normalize.css 为了增强跨浏览器渲染的一致性，一个CSS 重置样式库。(比较常用）18.css sprite是什么,有什么优缺点
精灵图、雪碧图：把多个小图标合并成一张大图片。 优缺点： 优点：减少了http请求的次数，提升了性能。 缺点：维护比较差（例如图片位置进行修改或者内容宽高修改）18、visibility=hidden, opacity=0，display:none的区别
opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些 事件，如 click 事件，那么点击该区域，也能触发点击事件的 visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件 display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样19.opacity 和 rgba区别
共同性：实现透明效果 1. opacity 取值范围0到1之间，0表示完全透明，1表示不透明 2. rgba R表示红色，G表示绿色，B表示蓝色，取值可以在正整数或者百分数。A表示透明度取值0到1之间 区别：继承的区别 opacity会继承父元素的opacity属性，而rgba设置的元素的后代元素不会继承不透明属性。20.多行元素的文本省略号
dsplay: -webkit-box -webkit-box-orient:vertical -webkit-line-clamp:3 overflow:hidden21.html 语义化是什么？
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好的解析。 像标题（H1~H6）、列表（li）、强调（strong em）等等22.设置一个元素的背景颜色，背景颜色会填充哪些区域？
background-color 设置的背景颜色会填充元素的 content、padding、border 区域
