4、简单的一个盒子移动到另一个盒子，你用什么方式实现动画效果
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
可以控制的
.
1053
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
