1、 rem em vw vw 百分比区别
2、app怎么做适配的
3、bfc是什么，清除浮动的原理
4、简单的一个盒子移动到另一个盒子，你用什么方式实现动画效果
5、css 选择器有哪些，权重是什么样的
6、CSS选择符有哪些？哪些属性可以继承？优
先级算法如何计算？
CSS选择符（就是选择器）
基础选择器
结构选择器
属性选择器
结构伪类选择器
目标伪类
UI状态伪类
否定伪类E:
动态伪类
属性继承
选择器优先级的算法
7、css引入的方式有哪些，link和@import的
区别是什么
1、 rem em vw vw 百分比区别
🌈 相同点：
rem，em，vw，vh，vw属于前端开发除了px单位之外的另外几种单位取值；但是具体含义存在区别
🌈 不同点：
px：是像素单位，属于绝对单位，是一个具体的大小
rem：相对于根元素进行设置
em：如果自身有字体大小的设置，那么就相对于自身字体大小设置，如果自身没有字体大小 设置，那么就相当于父元素进行设置。
vw：1vw相当于浏览器窗口宽度的百分之一
vh：1vh相当于浏览器窗口高度的百分之一
百分比：相对于父元素宽度或者高度的百分之几
注意：vw和vh是视口可以观看的区域的大小；如果没有滚动条的话，则宽度设置成100vw和100%的时候实现的效果一直；如 果有滚动的话，则100vw中不是包括滚动条的，100%是包括 滚动条的距离的
<style>
*{margin:0;padding:0}
html,body{
height: 100%;
}
.box1{
width: 100%;
height:500px;
background-color: red;
}
.box2{
width: 100vw;
height:500px;
background-color: green;
}
</style>
<div class="box1"></div>
<div class="box2"></div>750的设计图，20px为多少rem2、app怎么做适配的
🌈 基于手机系统开发的app(原生Android/IOS) ，另外一种是webapp
🌈 设置以下标签：
🌈 具体的含义为：app完成的页面的宽度等于设备的宽度，页面的缩放比例为1.0，不允许最大缩放；
🌈 使用媒体查询和响应式做适配
🌈 使用媒体查询检测设备屏幕的大小改变布局样式，但是成本耗费比较大不易操作
🌈 使用单位自己单位中经常使用的封装好的flexble.js文件做适配
🌈 封装好的flexble.js文件文件可以做到适配，并且原理是已经封装好的视口和设备像素比基于webapp开发
3、bfc是什么，清除浮动的原理
🌈 BFC含义：
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域
🌈 BFC触发条件：
根元素
float属性不为none（脱离文档流）
position为absolute或fixed
display为inline-block,table-cell,table-caption,flex,inine-flex
overflow不为visible
🌈 BFC布局规则：
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照 最大margin值设置）
每个元素的margin box的左边， 与包含块border box的左边相接触
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
计算BFC的高度时，浮动元素也参与计算
4、简单的一个盒子移动到另一个盒子，你用什么方式实现动画效果
🌈 方法一：使用HTML+CSS里面的transition过渡动画结合2d的位移translate设置
<style>
*{margin:0;padding:0}
div{
float: left;
}
.box1{
width: 200px;
height:200px;
background-color: red;
}
.box2{
width: 100px;
height:100px;
background-color: green;
transition: all linear 1s;
}
.box1:hover+.box2{
transform: translateX(-100px);
}
</style><div class="box1"></div>
<div class="box2"></div>🌈 方法二：使用HTML5+CSS3中的animation动画属性结合2d里面的位移translate进行实现
<style>
*{margin:0;padding:0}
div{
float: left;
}
.box1{
width: 200px;
height:200px;
background-color: red;
}
.box2{
width: 100px;
height:100px;
background-color: green;
animation: mover linear 1s;
}
@keyframes mover{
0%{
transform: translateX(0px);
}
100%{
transform: translateX(-100px);
}
}
</style><div class="box1"></div>
<div class="box2"></div>🌈 方法三：复杂方法，可以使用js封装一个动画函数，直接使用鼠标移动移入事件或者点击事件触发移动
<style>
*{margin:0;padding:0}
div{float:left}
.box1{width:300px;height:300px;background-color:red}
.box2{width:100px;height:100px;background-color:green}
</style><div class="box1"></div>
<div class="box2"></div><script>
//获取元素
//设置x和y的值
//绑定鼠标移入事件==缓慢移动 x的位置进行移动 自减
6、boder实现0.5像素
实现方法：CSS3有缩放的属性，我们可以利用这个属性，缩小50%的1px的边框，来实现这个功能代码如
下：
7、场景题（两个盒子，左边固定宽，右边自适
应，你能想到几种方法）
公共HTML代码部分
方法一：float来和BFC实现
//绑定鼠标移出事件==缓慢移动 x的位置进行移动 自增
</script>5、css 选择器有哪些，权重是什么样的
选择器含义：选择器是查找页面元素的一种方式方法，选择器的种类有很多种。
常用的选择器有以下内容：
1、ID #id
2、class .class
3、标签 p
4、通用 *
5、属性 type="text"
6、伪类 :link :visited :hover :active
7、伪元素 ::first-line :first-letter
8、子选择器 div>p
9、后代选择器 div p
10、相邻兄弟 div+p
11、通用兄弟 div~p
12、结构伪类 :nth-child :first-child :last-child
权重计算规则：
1、第一等：代表内联样式，如: style=””，权值为1000。
2、第二等：代表ID选择器，如：#content，权值为0100。
3、第三等：代表类，伪类和属性选择器，如.content，权值为0010。
4、第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
5、通配符、*权值为0000。
6、继承的样式没有权重值。
important > 内联 > ID > 类| 伪类 | 属性选择|伪对象 > 标签 > 继承 > 通配符
6、CSS选择符有哪些？哪些属性可以继承？优
先级算法如何计算？
CSS选择符（就是选择器）
基础选择器
通配符选择器 *{}
标签选择器标签名 p{}
class类选择器 .class属性值{}
多类名选择器 .类名n{} 标签中class属性为 class="类名1 类名2 ... 类名n"
id选择器 #id属性值{}
群组选择器 选择器1,选择器2,...{}
结构选择器
子元素选择器E>F{} F必须是E的子元素
后代选择器E F{} F必须是E的后代
相邻兄弟选择器E+F{} F是紧挨这E后面的兄弟元素
通用选择器E~F{} F是E后面所有的兄弟元素
属性选择器
[Eattr] 元素E中存在attr属性
[Eattr="value"] 元素E中存在attr属性,并且attr的属性值为value
[Eattr~="value"] 元素E中存在attr属性,并且attr的属性值为value或者"value value1 ..."的形式
[Eattr^="value"] 元素E中存在attr属性,并且attr的属性值以value开始
[Eattr$="value"] 元素E中存在attr属性,并且attr的属性值以value结尾
[Eattr*="value"] 元素E中存在attr属性,并且attr的属性值存在value
[Eattr|="value"] 元素E中存在attr属性,并且attr的属性值为value或者value-的形式
结构伪类选择器
X:first-child 匹配子集的第一个元素
X:last-child匹配父元素中最后一个X元素
X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始
X:only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果
div内有多个p，将不匹配。
X:root匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML
X:empty匹配没有任何子元素（包括包含文本）的元素
目标伪类
E:target 选择匹配E的所有元素，且匹配元素被相关URL指向
UI状态伪类
E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E
E:selection 匹配E元素中被用户选中或处于高亮状态的部分
否定伪类E:
not(s) （IE6-8浏览器不支持:not()选择器。）匹配所有不匹配简单选择符s的元素E
动态伪类
E:link 链接伪类选择器 选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接
描点上
E:visited 链接伪类选择器 选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接
描点上
E:active 用户行为选择器 选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
E:hover 用户行为选择器 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持
a:hover
E:focus 用户行为选择器 选择匹配的E元素，而且匹配元素获取焦点
属性继承
继承：html元素可以从父元素那里继承一部分css属性，即使当前元素没有定义该属性。
1.字体系列属性 font，font-family，font-weight，font-size，font-style
2.文本系列属性 text-indent，text-align，line-height，word-spacing，letter-spacing，
text-transform，color
3.元素可见性 visibility
4.表格布局属性 caption-side，border-collapse，border-spacing，empty-cells，table
layout
5.列表布局属性 list-style-type，list-style-image，list-style-position，list-style
选择器优先级的算法
优先级就近原则，同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为：同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部
文件中）。
!important > id > class > tag important 比 内联优先级高
7、css引入的方式有哪些，link和@import的
区别是什么
区别1：link属于XHTML标签，而@import完全是CSS提供的一种方式。
区别2：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而
@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时
开始会没有样式（就是闪烁），网速慢的时候还挺明显。
区别3：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而
link标签无此问题。
区别4：使用dom(document object model文档对象模型 )控制样式时的差别：当使用javascript控制
dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.
