1.根据下面代码，.subbox盒子距.box盒子顶部距离多大？
.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的%值是相对于父元素的宽度。与复元素的高度无关，当margin-top: 100px时候
才与父元素height有关。
2.阅读以下代码.box的DIV宽度是多少？
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;
答案：B
解析： rem是一个相对单位，类似与em,em是父元素字体大小；而不同的rem是相对于html元素字体大小。
3.阅读以下代码说明.box的DIV实际大小是多少？
.box{
box-sizing: content-box;
width: 200px;
height: 200px;
padding: 20px;
background-color: green;
border: 5px dotted red;
}
<div class="box"></div>
A、200px B、225px C、250px
答案：C
解析：盒子的实际大小等于外边距+内边距+盒子宽度。（1）box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值。
（2）box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的。
4.阅读以下代码选择出正确答案
javascript
var num1=10;
var num2='20'；
var num3=num1+(num2>10)；
console.log(num3);
A、1020 B、11 C、undefined D、10true
答案：B
解析：num1+(num2>10)为true,所以10+1=11。
2.CSS 中选择器的优先级以及 CSS 权重如何计算？
答：!important > 行内样式 style="" >id 选择器> class选择器 > 标签选择器 > 继承的和*（通配选择器）
无穷大>1000>100>10>1>0
3.说说你对语义化的理解？列举5个语义化的标签？
答： 所谓标签语义化，就是指标签的含义。
（1）<header></header> 头部标签
（2） <nav></nav> 导航标签
（3） <section></section> 定义文档的某个区域
（4） <aside></aside> 侧边栏标签
（5） <footer></footer> 尾部标签
程序：
<!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>
* {
padding: 0%;
margin: 0%;
}
.header {
margin: 0% auto;
background-color: pink;
}
.box {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
@media screen and (max-width:768px) {
body,
html {
font-size: 30px;
/* background-color: aqua; */
}
.box div {
width: 2.667rem;
height: 2.667rem;
background-color: white;
border-radius: 50%;
}
.header {
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
width: 9rem;
}
}
@media screen and (min-width:768px) {
html {
font-size: 24px;
}
.box>div {
width: 2.084rem;
height: 2.084rem;
background-color: white;
border-radius: 50%;
}
.header {
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
width: 14rem;
}
}
@media screen and (min-width:992px) {
html {
font-size: 24px;
}
.box>div {
width: 2.084rem;
height: 2.084rem;
background-color: white;
border-radius: 50%;
}
.header {
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
width: 19rem;
}
}
@media screen and (min-width:1200px) {
html {
font-size: 16px;
}
.box>div {
width: 1.875rem;
height: 1.875rem;
background-color: white;
border-radius: 50%;
}
.header {
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<div class="box">
<div></div>
<p>
我是个头像
</p>
</div>
<div class="box">
<div></div>
<p>
我是个头像
</p>
</div>
<div class="box">
<div></div>
<p>
我是个头像
</p>
</div>
<div class="box">
<div></div>
<p>
我是个头像
</p>
</div>
<div class="box">
<div></div>
<p>
我是个头像
</p>
</div>
<div class="box">
<div></div>
<p>
我是个头像
</p>
</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: grey;
}
header {
height: 300px;
width: 200px;
margin: 100px auto;
/* background-color: grey; */
overflow: hidden;
font-size: 20px;
color: aliceblue;
}
.head {
width: 100px;
height: 50px;
border: 1px solid white;
border-radius: 5px;
/* background-color: white; */
float: left;
}
.foot {
width: 10px;
height: 20px;
background-color: white;
float: left;
margin-top: 15px;
}
.head >div{
width: 0px;
height: 50px;
background-color: white;
animation: run 3s;
}
@keyframes run {
from{
}
to{
width: 100%;
}
}
/* 时钟 */
section{
width: 100%;
margin-left: 45%;
}
.yuan{
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid white;
position: relative;
}
.yuan div:first-child{
height: 50px;
width: 5px;
background-color: white;
left: 50px;
border-radius: 10px;
transform-origin: 0px 50px;
position: absolute;
animation: run1 3s;
}
.yuan div:nth-child(2){
height: 30px;
width: 9px;
background-color:white;
left: 48px;
top: 20px;
border-radius: 10px;
transform-origin: 0px 30px;
position: absolute;
animation: pao 3s;
}
@keyframes run1{
0%{
transform: rotateZ(0deg);
}
100%{
transform: rotateZ(360deg);
}
}
@keyframes pao{
0%{
transform: rotateZ(0deg);
}
100%{
transform: rotateZ(45deg);
}
}
/* 放大镜 */
footer{
width: 85px;;
height: 80px;
/* background-color: aqua; */
margin-left: 25%;
animation: fang 3s;
}
.footbox{
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid white;
}
.footbox>div{
font-size: 18px;
color: white;
text-align: center;
line-height: 60px;
}
footer div:nth-child(2){
height: 30px;
width: 5px;
background-color: white;
margin-left: 70px;
margin-top: -25px;
transform: rotateZ(-60deg);
}
@keyframes fang{
0%{
transform: scale();
}
100%{
transform: scale(2);
}
}
</style>
</head>
<body>
<header>
<div class="head">
<div></div>
</div>
<div class="foot"></div>
<p>充电电池</p>
</header>
<section>
<div class="yuan">
<div></div>
<div></div>
</div>
</section>
<footer>
<div class="footbox">
<div>me</div>
</div>
<div></div>
</footer>
</body>
</html>
扫一扫
637
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
