错题记录
选择题:
4.文本尺寸12px,下列哪些可以实现2倍行高?
A、line-height:2rem B、line-height:24px
C、line-height:2 D、line-height:200%;
答案(ABCD)
9.根据下面代码,.subbox盒子距.box盒子顶部距离多大?
```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
答案(C margin-top的%值是相对于父元素的宽度
11.下列哪些样式值可以移动元素本身位置?
A、margin-left B、padding-left C、left D、translateX
)
答案(A.C.D)
12.Flex布局中哪个是定义垂直居中?
A、align-items B、align-content C、justify-content D、flex-direction
答案(A)
13.根据下列代码.about的高是多少?
```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;
答案(B)
大题:利用html和css做出来一个茶杯
自动换行 | |
<!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> |