2. 下列CSS选择器正确的是?D
A、.body .5 B、.about body C、title a D、.about .body
3.下列哪些属于CSS中的哪些代表绿色?BCD
A、#green B、rgb(0,255,0) C、rgba(0,255,0,1) D、green
4.文本尺寸12px,下列哪些可以实现2倍行高?D
A、line-height:2rem B、line-height:24px
C、line-height:2 D、line-height:200%;
9.根据下面代码,.subbox盒子距.box盒子顶部距离多大?C
```html
.box{ float: left; width: 300px; height: 200px; }
.subbox { margin-top:50%;}
<div class=”box”>
<div class=”subbox”></div>
</div>
```
A、50px B、100px C、150px D、200px
11.下列哪些样式值可以移动元素本身位置? ACD
A、margin-left B、padding-left C、left D、translateX
13.根据下列代码.about的高是多少? B
```html
.about { maring: 0 auto; }
.about-img { float: left; height: 200px; }
.about-text { height: 100px; }
<div class=”about”>
<div class=”about-img”></div>
<div class=”about-text”></div>
</div>
```
A、0 B、100px C、200px D、300px;
14.阅读以下代码.box的DIV宽度是多少?B
```css
body,html{
font-size: 16px;
}
.box{
float:left;
width: 15rem;
height: 200px;
font-size: 20px;
background-color: coral;
}
<div class="box"></div>
```
A、150px B、240px C、200px D、300px;
18. 页面导入样式文件时,对于使用link和@import说法错误的是 ?B
A、 link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS
B、 页面被加载的时,link和@import引用的CSS都会等到页面被加载完再加载
C、 import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题
D、link支持使用js控制DOM去改变样式,而@import不支持
20. 在CSS3中,以下哪个IE浏览器(Trident内核)的私有属性前缀?D
A、 –Webkit
B、–trident
C、 –ie
D、 –ms
21. ![img](images/300823_1505813946375_52788E971C0BEA04E8071D25B3AC3DCC-20210729153154038.png) C
、
A、blue / red / blue / red / blue / orange
B、blue / red / blue / red / blue / blue
C、blue / red / blue / blue / red / blue
D、red / blue / blue / blue / blue / red
23. 以下可以被子元素继承的属性是 AD
A、font-size
B、margin
C、padding
D、color
24. 下列说法正确的有:AB
A、visibility:hidden;所占据的空间位置仍然存在,仅为视觉上的完全透明;
B、display:none;不为被隐藏的对象保留其物理空间;
C、visibility:hidden;与display:none;两者没有本质上的区别;
D、visibility:hidden;产生reflow和repaint(回流与重绘);
25. 关于SVG和CANVAS,下面陈述正确的有?DF
A、SVG做动画性能要优于CANVAS
B、CANVAS做动画性能要优于SVG
C、SVG产生的dom数量比CANVAS要少
D、CANVAS产生的dom数量比SVG要少
E、CANVAS可以使用css设置动画样式
F、 SVG可以使用css设置动画样式
26. 下面四个变量声明语句中,哪一个变量的命名是正确的?B
A.var for B.var txt_name
C.var myname myval D.var 2s
1.哪些是块级元素那些是行内元素,各有什么特点(每个至少说出3种)
div ul li span a img (块级元素换行 行内不换行)
2.CSS 中选择器的优先级以及 CSS 权重如何计算?
!important > id > class > 标签 > 继承的和*
3.说说你对语义化的理解?列举5个语义化的标签?
nav header footer aside article
4.对 BFC 规范(块级格式化上下文:block formatting context)的理解?
BFC指的是块级格式化上下文,一个元素形成了BFC之后,那么它内部元素产生的布局不会影响到外部元素,外部元素的布局也不会影响到BFC中的内部元素。一个BFC就像是一个隔离区域,和其他区域互不影响。
5.请解释一下 CSS3 的 flexbox(弹性盒布局模型),以及适用场景?
弹性布局 移动端
6.JavaScript的基本数据类型有哪些,其中null和undefined的区别是什么?
number string Boolean null undefined
对象类型 复杂数据类型() undefined
当一个变量被创建出来了之后 但是没有任何的赋值操作 undefined
两个人都表示空 但是 本质上不一样
简答题
1、实现适配(@media + rem)
<style>
@media screen and (max-width:768px) {
body,
html {
font-size: 30px;
}
.mbox div {
width: 2.66666667rem;
height: 2.66666667rem;
background-color: white;
border-radius: 50%;
}
.fox {
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
width: 9rem;
}
}
@media screen and (min-width:768px) {
body,
html {
font-size: 24px;
}
.mbox div {
width: 2.0833333rem;
height: 2.0833333rem;
background-color: white;
border-radius: 50%;
}
.fox {
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
width: 14rem;
}
}
@media screen and (min-width:922px) {
body,
html {
font-size: 24px;
}
.mbox div {
width: 2.0833333rem;
height: 2.0833333rem;
background-color: white;
border-radius: 50%;
}
.fox {
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
width: 19rem;
}
}
@media screen and (min-width:1200px) {
body,
html {
font-size: 16px;
}
.mbox div {
width: 1.875rem;
height: 1.875rem;
background-color: white;
border-radius: 50%;
}
.fox {
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
}
}
.mbox {
display: flex;
flex-direction: column;
align-items: center;
}
.fox {
margin: 0 auto;
background-color: pink;
}
</style>
</head>
<body>
<div class="fox">
<div class="mbox">
<div></div>
<p>我是个头像</p>
</div>
<div class="mbox">
<div></div>
<p>我是个头像</p>
</div>
<div class="mbox">
<div></div>
<p>我是个头像</p>
</div>
<div class="mbox">
<div></div>
<p>我是个头像</p>
</div>
<div class="mbox">
<div></div>
<p>我是个头像</p>
</div>
<div class="mbox">
<div></div>
<p>我是个头像</p>
</div>
</div>
</body>
2.根据以下效果图,任选两种效果,实现代码
换行 | |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Document</title> | |
<style> | |
body { | |
background-color: rgb(11, 0, 73); | |
} | |
.fbox { | |
width: 50px; | |
height: 50px; | |
border-radius: 50%; | |
border: 1px solid white; | |
position: relative; | |
} | |
.shi { | |
width: 3px; | |
height: 20px; | |
background-color: white; | |
transform-origin: 0px 20px; | |
left: 50%; | |
top: 3px; | |
border-radius: 0 0 25% 25%; | |
transform: translateX(-50%); | |
position: absolute; | |
animation: run 3s; | |
} | |
.fen { | |
width: 1px; | |
height: 23px; | |
background-color: white; | |
left: 50%; | |
top: 0px; | |
transform: translateX(-50%); | |
position: absolute; | |
transform-origin: 0px 23px; | |
animation: run1 3s; | |
border-radius: 0 0 25% 25%; | |
} | |
.dian { | |
width: 5px; | |
height: 5px; | |
background-color: white; | |
border-radius: 50%; | |
left: 50%; | |
top: 50%; | |
transform: translateX(-50%) translateY(-50%); | |
position: absolute; | |
} | |
@keyframes run { | |
0% { | |
transform: rotateZ(0deg); | |
} | |
100% { | |
transform: rotateZ(50deg); | |
} | |
} | |
@keyframes run1 { | |
0% { | |
transform: rotateZ(0deg); | |
} | |
100% { | |
transform: rotateZ(360deg); | |
} | |
} | |
.dianchi { | |
display: flex; | |
align-items: center; | |
} | |
.qita { | |
background-color: white; | |
width: 30px; | |
height: 60px; | |
} | |
.bian { | |
width: 130px; | |
height: 120px; | |
border: 1px solid white; | |
} | |
.jindu{ | |
width: 0px; | |
height: 120px; | |
animation: identifier 3s; | |
background-color: white; | |
} | |
@keyframes identifier { | |
0%{} | |
100%{ | |
width: 100%; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<div class="fbox"> | |
<div class="shi"></div> | |
<!-- <div class="dian"></div> --> | |
<div class="fen"></div> | |
</div> | |
<div class="dianchi"> | |
<div class="bian"> | |
<div class="jindu"></div> | |
</div> | |
<div class="qita"></div> | |
</div> | |
</body> | |
</html> |
换行 | |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Document</title> | |
<style> | |
body { | |
background-color: rgb(32, 0, 83); | |
} | |
.box { | |
display: flex; | |
width: 100px; | |
position: absolute; | |
left: 50%; | |
top: 200px; | |
} | |
.content { | |
width: 50px; | |
height: 50px; | |
border-radius: 0 0 5px 5px; | |
border: 1px solid white; | |
} | |
.ba { | |
width: 25px; | |
height: 25px; | |
border-radius: 0 50% 50% 0; | |
border: 1px solid white; | |
} | |
.dbox { | |
width: 80px; | |
position: absolute; | |
left: 50%; | |
top:175px; | |
display: flex; | |
justify-content: space-around; | |
transform: translateX(-13px); | |
align-items: flex-end; | |
} | |
.dbox div { | |
width: 1px; | |
height: 10px; | |
background-color: white; | |
animation: run 3s; | |
} | |
.dbox div:nth-child(2){ | |
height: 20px; | |
} | |
@keyframes run { | |
0%{} | |
100%{ | |
height: 0; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<div class="dbox"> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
<div class="box"> | |
<div class="content"></div> | |
<div class="ba"></div> | |
</div> | |
</body> | |
</html> |