1、各个选择器的权重是什么情况，有没有可以超越这些权重情况的存在
id 100
类选择器跟伪类选择器 10
元素选择器和伪元素选择器 1
其他 0
!important 最高，其次是style属性，然后再去计算权值，权值计算不进位
2、css的伪类选择器跟伪元素选择器是什么，有什么区别
伪元素是一个真实存在的元素，但是他不再html中与dom中存在而是存在在页面中，常见的有::before,表示某个元素之前的一个元素，是相对一个元素的
伪类是某个元素的一种状态，比如选中，聚焦情况，这个时候会给这个元素自动加上一个class
3、css的解析方式是什么？
css的解析方式是从右到左进行解析
.body div .c
会先找到一个.c的元素，然后去找他的某个祖先是不是div，如果是，再去找是否某个祖先元素是.body，如果全部满足，则匹配。这种匹配方式会极大的减少寻找的时间。
4、字体族有哪些？什么是fullback
衬线
非衬线
等宽字体
手写体
iconfont
fullback就是我们可以给一个元素设置多个字体，如果第一个字体找不到，则会去使用下一个字体。这里的找不到有两种情况，一种是这个字体库不存在，一个是这个字体库里面没有某个文字
5、iconfont的原理是什么
自定义字体，因为所谓的字体，就是表示一个标记应该长什么样子，那么也就可以把一个标记表示成一个图标的样子。
6、什么是inline-box，什么是line-box
inline-box就是行内元素，line-box就是一行，因为浏览器的渲染是以行为单位的，是一行一行的进行渲染的
7、多个span设置他们的行高不同，那么他们显示高度是否不同
可能相同，span的高度取决与font-size而不是行高
8、vcertice-align是设置给什么元素的
inline-box行内元素
9、什么是图片3px问题，怎么进行解决
如果一个图片在一个块级盒子里面，因为div这种块级盒子是一个line-box，会把img当成一个inline-box,这个时候他的默认对齐方式是相对基线对齐的，而基线baseline默认是跟底部有间隙的，在12px的字体下，这个间隙一般是3px。如果要解决，这个时候我们可以设置vertice-align为bottom，相对底部对齐，或者设置img为块级元素
10、
使用纯css实现这个网格的效果
height: 90px;
background: linear-gradient(135deg,transparent 45%,green 45%,green 46%,transparent 46%,transparent 100%),linear-gradient(-135deg,transparent 45%,red 45%,red 46%,transparent 46%,transparent 100%);
background-size: 30px 30px;
注意size必须在下面。
11、雪碧图的原理
background:no-repeat 不进行重复
background-size:设置背景大小
background-position,移动背景图片在盒子中的位置
12、两倍图是什么，怎么实现，有什么用？
两倍图是指在设计雪碧图的时候按照应该设计的两倍来进行设计。因为为了适配不同的设备，很多时候我们需要对元素的背景图片进行放大或者缩小，设计更大一点可以减少失真
13、base64是什么，应该在什么情况下去使用、怎么使用才好
base64就是一串文本，这一串文本可以被解码成为一个图片，因为这串文本是写在css中的，所以会减少网络请求
但是会导致体积增大，一般用于小图片，为了维护方便，一般在css中也是写成图片格式，但是在最后打包的时候使用构建工具变成base64文本
14、怎么用纯css实现一个三角形，一个扇形，原理是什么
原理是因为盒子边框的斜切，如果盒子相邻的边框颜色大小不同，这个时候不会进行全部的覆盖，而是会进行斜切
三角形
.test2{
width: 0;
height: 0;
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
扇形
width: 0;
height: 0;
border-bottom: 40px solid red;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
15、设计一个div，里面的内容超出是可以滚动但是不显示滚动条
.test6{
height: 200px;
width: 200px;
background-color: red;
overflow-y: auto;
overflow-x: hidden;
}
.hiddenScroll{
width: 180px;
height: 200px;
overflow: hidden;
}
<div class="hiddenScroll">
<div class="test6">
ssds撒旦撒旦撒旦撒旦撒旦撒旦撒旦撒的速度速度撒旦撒旦撒的速度速度是旦撒的速度速度撒旦撒旦撒的速度速度是旦撒的速度速度撒旦撒旦撒的速度速度是旦撒的速度速度撒旦撒旦撒的速度速度撒旦撒旦撒旦撒的速度速度撒旦撒旦撒的速度速度是旦撒的速度速度撒旦撒旦撒的速度速度是旦撒的速度速度撒旦撒旦撒的速度速度是旦撒的速度速度撒旦撒旦撒的速度速撒旦撒旦撒旦撒的速度速度撒旦撒旦撒的速度速度是旦撒的速度速度撒旦撒旦撒的速度速度是旦撒的速度速度撒旦撒旦撒的速度速度是旦撒的速度速度撒旦撒旦撒的速度速撒旦撒旦撒旦撒的速度速度撒旦撒旦撒的速度速度是旦撒的速度速度撒旦撒旦撒的速度速度是旦撒的速度速度撒旦撒旦撒的速度速度是旦撒的速度速度撒旦撒旦撒的速度速是
</div>
</div>
16、怎么去除连接a的下划线
使用
text-decoration
:
none
;
17、如何美化一个checkbox
使用label和伪类
首先这个checkbox要有id跟一个label进行对应
这样当我们点击到了label的时候也就在点击checkbox了
随后隐藏checkbox，display:none
使用background-image，给label加上背景充当图标
checkbox:checked+label
使用伪类选择器，当点击label导致checkbox被触发的时候触发这个选择器，更换图片，这样看起来是被选中状态了