当前位置：首页 > news >正文

移动应用开发实验室web组大一下期末考核题解

news 来源：原创 2025/6/16 7:40:20

移动应用开发实验室web组大一下期末考核题解

@jarringslee

文章目录

移动应用开发实验室web组大一下期末考核题解
- 简答题
- - 1.为什么要清除浮动，清除浮动的方法有哪些？
  - 2.怎么实现左边宽度固定右边宽度自适应的布局？
  - 3.讲讲`flex:1；`
  - 4.怎么实现移动端适配不同设备？
- 实践题
- - 5.网页布局：
  - 6.动画制作：
  - 7.动画制作：
  - 8.动画制作：

简答题

1.为什么要清除浮动，清除浮动的方法有哪些？

浮动是可以让块元素水平排列的属性，在网页开发中很常用，但是浮动最大特点就是浮动的元素会脱标（脱离标准流的控制），不再占用标准流的位置。如果下面有标准流元素就会重叠上来。而且，如果某个父级元素的子级元素是浮动元素，若父级元素高度为0（即产生塌陷问题），也会脱标，下面的元素会重叠上来，影响布局效果。

所以在实际开发过程当中，我们一般都会清除浮动。下面是几种常见的清除浮动的方法：

额外标签法

在父元素内容的最后添加一个空的块级元素（如div或p），设置CSS属性：clear:both / left / right （专门用来清除浮动的属性，分别是清除所有 / 左侧 / 右侧浮动的属性，直接用both就行）
```
        .clear{clear: both;}<div class="box1"><div class="dd">111</div><div class="dd">222</div><div class="clear"></div> </div>
```

单伪元素法

利用类选择器使用伪元素在父元素内容的最后添加一个空的块级元素。

	 .clearfix:after{content:"";display:block;height: 0;clear:both;visibility: hidden;}				   .clearfix{	zoom: 1;}

常用：双伪元素法

在父元素中加上类选择器clearfix：既清除浮动影响也解决了塌陷问题。早期被用作图文混排。

.clearfix::before,	/*before元素解决外边界塌陷问题 */
.clearfix:after{content:"";display:table;
}				   
.clearfix::after{	/*after元素清除浮动影响*/clear:both;
}

overflow

父元素添加css属性：overflow:hidden / auto / scroll（任一即可）

添加overflow属性命令浏览器检查父级元素的尺寸（触发 BFC（块级格式化上下文），从而让浮动元素参与父元素高度计算，避免高度塌陷。但它也会隐藏溢出内容）。此时父级元素不会因为高为0而让浏览器误以为元素不存在而导致脱标。但是有一个小缺点，上面也提到了，就是这个方法无法处理溢出问题。

我的答案：

浮动的元素会脱标，即文档流中不再保留该元素的位置，下面的元素会重叠上来，影响布局效果。

清除方法：

额外标签法：给包含浮动的子元素的父元素最下方添加空的块级元素用来占位；
单伪元素法：利用类选择器使用伪元素在父元素内容的最后添加一个空的块级元素。（代码在上面）
双伪元素法：与单伪元素法相比，既清除浮动影响也解决了塌陷问题。（代码在上面）
overflow：父元素添加属性：overflow:hidden / auto / scroll（任一即可）添加overflow属性命令浏览器检查父级元素的尺寸。此时父级元素不会因为高为0而让浏览器误以为元素不存在而导致脱标，但是无法处理溢出问题。

2.怎么实现左边宽度固定右边宽度自适应的布局？

左边固定宽度比较简单，关键在于右边实现自适应布局。我的想法是让右边元素的宽度根据浏览器视口变化自动调整，可以用比例单位或者自适应方式实现。

首先，在我们所学的基础布局中，flex布局有自动占满剩余空间的功能。，我们可以不设置右边元素的宽度，这样浏览器就会自动占满剩余空间。

示例：

/*用flex布局实现左边固定右边自适应*/
<style>.container {display: flex;}.left {width: 200px;background-color: lightgray;}.right {flex: 1;background-color: lightblue;}
</style><div class="container"><div class="left">左边</div><div class="right">右边</div>
</div>

其次，因为移动端布局中我们经常需要解决视口大小不一的问题，所以，在移动端布局中，也有很多种布局方式可以实现宽度自适应的布局。下面是几种可以解决该问题的常见的移动端布局模式：

rem单位：rem（root em）的基准是相对于html元素的字体大小（父元素是html）。比如，根元素（html）设置font-size为12px，非根元素设置width为2em，则表示24px。通过这种方式，可以根据浏览器窗口的比例控制元素的宽和高，从而达到自适应的布局。

示例：

/*用rem单位实现左边固定右边自适应*/
<style>html {font-size: 16px; /* 1rem = 16px */}.container {display: flex;}.left {width: 2.5rem; /* 相当于 40px */background-color: lightgray;}.right {flex: 1;background-color: lightblue;}
</style><div class="container"><div class="left">左边</div><div class="right">右边</div>
</div>

响应式布局：媒体查询@media 可以针对不同的屏幕尺寸设置不同的样式当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，同样也能达到我们的目的。

示例：

/*用响应式布局实现左边固定右边自适应*/
<style>.container {display: flex;}.left {width: 30%;background-color: lightgray;}.right {width: 70%;background-color: lightblue;}/* 小屏幕下，左右变上下 */@media screen and (max-width: 600px) {.container {flex-direction: column;}.left, .right {width: 100%;}}
</style><div class="container"><div class="left">左边</div><div class="right">右边</div>
</div>

视口标签：这也是响应式布局的基础。<meta name="viewport">标签可以控制页面在移动端的缩放行为。

示例：

/*用视口标签实现左边固定右边自适应*/
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head><style>.container {display: flex;}.left {width: 80px;background-color: lightgray;}.right {flex: 1; /* 或者 width: calc(100% - 80px); */background-color: lightblue;}
</style><div class="container"><div class="left">左边</div><div class="right">右边</div>
</div>

我的答案：

Flex布局：父元素设置 display: flex，左边设定固定宽度，右边设置 flex: 1，自动填充剩余空间。

rem单位布局：通过 html 设置 font-size，左边用 rem 表示固定宽度，右边仍使用 flex: 1 自适应。

响应式布局（媒体查询）：使用百分比宽度配合 @media 实现不同屏幕下的适配，如在窄屏幕下变为上下排列。

视口标签：在 HTML 中加入 <meta name="viewport">，确保页面在移动端正确缩放，配合其他布局单位实现完整的移动端适配。

3.讲讲`flex:1；`

简单考察了众多flex属性中的一个基础的小问题，比较简单，也没什么可细说的。要是硬扣的话，flex: 1;是 flex-grow, flex-shrink, flex-basis 的简写形式，等价于：

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;

它的意思是：先不占据固定空间（basis为0），然后按照份数比例去平分剩余空间。

但是这道题考察重点是理解这个数字——代表子元素所占剩余空间的比例。

我的答案：

Flex布局中，flex属性一般用于项目（子元素）中，代表该元素占剩余空间的份数（比例）。如某个父元素的三个子元素flex值分别为1、2、3，那么这三个子元素所占父元素剩余空间比例为1:2:3。

4.怎么实现移动端适配不同设备？

移动端设备尺寸各不相同，我们要通过响应式设计，让网页在不同设备上都能保持合理的排版和布局，不会出现错位、溢出、字体过大或过小等问题。

使用 Flex 或 Grid 布局：flex或grid 布局可以让元素自动换行、自动拉伸，适合各种尺寸的屏幕，减少死板的固定宽度。
设置视口标签：在 <head> 里添加视口标签，告诉浏览器要以设备的宽度进行渲染，而不是默认的 980px。
使用响应式媒体查询（@media）：根据不同的屏幕宽度设置不同的样式，比如小屏幕使用更小的字号、布局改为上下排列等。
使用视口单位（vw、vh）：vw 表示视口宽度的百分比，vh 表示视口高度的百分比，常用于字体、图片、间距等的自适应。
使用百分比单位：比如用 width: 50%，可以让元素根据父元素的大小自动调整，避免固定像素在小屏幕上溢出。

我的答案：

使用 flex 或 grid 布局自动适配不同宽度；
设置视口标签 <meta viewport>；
使用媒体查询 @media；
使用视口单位（vw、vh）；
用百分比单位代替固定像素。

实践题

5.网页布局：

在这里插入图片描述

考察了传统的网页布局，html和css的基本功。主要考察点有：

块级元素的布局和浮动；
盒子模型中内外边距的布局；
多行文字溢出部分用省略号代替；
盒子模型的修饰属性：如圆角border-radius、阴影box-shadow。

元素排布比较简单，我们思路也比较清晰明了。

我的制作采用宽度适应页面的方式，即三个大盒子的宽度设置为0。我们也可以让总体布局有一个具体宽度并居中，只需设置类选择器.w { width: 1200px; margin: auto;}并添加到三个大盒子的class中即可。

首先是三个大盒子header、body、和footer来进行整体排布。

header中，我们主要使用div标签包裹左边的文字并让它左浮动；用无序列表（需要清除基本样式）来写右侧的导航栏，其中总列表ul需要右浮动，分条li需要改变显示模式为行内快模式。

body中，我们用刚才考察到的flex:1;来布局三个小盒子，每个小盒子例有四个小盒子：一个灰色纯色盒子、一个标题、一个内容、一个结尾信息，设置好他们的字体大小、内外边距、排布位置，让他们自然垂直排列即可。

footer就简单了。设置盒子和居中的文字即可。

另外，body的布局的第一个盒子中还有一个重点：多行文字溢出部分用省略号代替，我认为这是这道题最难的点。因为我没写出来。。这里扯出来重点讲讲：

单行文本溢出显示省略号：

强制让文本在一行内显示：

white-space:nowrap;（默认为normal：自动换行）

超出部分隐藏：

overflow:hidden;

文字省略号代替超出部分：

text-overflow:ellipsis;(默认为normal：自动换行)

多行文本溢出显示省略号：

多行文本溢出显示省略号，有较大兼容性问题，适合于WebKit浏览器或移动端（移动端大部分是WebKit内核）。同时，也需要严格控制盒子的宽度：

超出部分隐藏：

overflow:hidden;

使用WebKit的弹性盒子模型：

display: -webkit-box;

限制在一个块元素显示的文本的行数为n行：

-webkit-line-clamp: (数字，无单位);

设置子元素的排列方式为垂直排列：

-webkit-box-orient: vertical;

我的代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第五题</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}a{/* color: #fff; */text-decoration: none;}li{list-style: none;}.head{/* width: 1600px; */height: 100px;border-radius: 20px;background-color: rgb(54, 54, 54);}.headleft{margin-left: 40px;float: left;color: #fff;font-size: 30px;line-height: 100px;}.headright{float:right;}.headright ul li{display: inline-block;color: #fff;font-size: 30px;line-height: 100px;margin: 0 20px;}.headright ul li a{color: #fff;}.headright ul li a:hover{color: aqua;}.body{display: flex;height: 500px;/* background-color: pink; */padding: 30px 20px;}.content{flex:1;height: 440px;background-color: #fff;margin: 0 20px;border-radius: 15px;box-shadow: 3px 3px 1px 1px rgba(0,0,0,0.3);padding-top: 20px;}.grey{height: 200px;background-color: grey;margin: 0 20px;border-radius: 20px;}.body .content h2{margin-left: 20px;margin-top: 20px;font-size: 35px;}.body .content .p1{margin:0  20px ;margin-top: 5px;font-size: 20px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}.body .content .p2{            margin:0  20px ;font-size: 16px;margin-top: 30px;color: grey;}.foot{margin-top: 30px;height: 60px;border-radius: 20px;background-color: rgb(166, 166, 166);text-align: center;line-height: 60px;font-size: 20px;color: rgb(62, 61, 61);}</style>
</head>
<body><div class="head"><div class="headleft">考核</div><div class="headright"><ul><li><a href="">首页</a></li><li><a href="">文章</a></li><li><a href="">关于我们</a></li></ul></div></div><div class="body"><div class="content"><div class="grey"></div><h2>标题1</h2><p class="p1">这是一段摘要内容。描述当前简要的信息。这是一段摘要内容这是一段摘要内容。描述当前简要的信息。这是一段摘要内容这是一段摘要内容。描述当前简要的信息。这是一段摘要内容</p><p class="p2">发布于 2025-6-1·阅读123</p></div><div class="content"><div class="grey"></div><h2>标题2</h2><p class="p1">这是一段摘要内容。描述当前简要的信息。这是一段摘要内容</p><p class="p2">发布于 2025-6-1·阅读123</p></div><div class="content"><div class="grey"></div><h2>标题3</h2><p class="p1">这是一段摘要内容。描述当前简要的信息。这是一段摘要内容</p><p class="p2">发布于 2025-6-1·阅读123</p></div></div><div class="foot">Web第一次方向考核</div>
</body>
</html>

效果展示：
第五题效果

6.动画制作：

鼠标悬停在盒子上，盒子中的数字就会从1快速上移至数字9，鼠标移开后又会以同样的方式回到数字1。很简单的一个内容上移的视觉效果的制作。

我的思路是：在页面中竖直排布1到9，并给它们设置一个长度和宽度只能包裹住数字1的盒子，并用overflow隐藏其他部分。在鼠标悬停时，我们设置2D效果translate，让盒子竖直上移一段距离，使盒子可视区域刚好包裹住数字9，并在盒子中设置动画效果（动画属性就一个，可以写height也可以写all，时间无所谓，动画方式就是默认的ease）。

我的代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第六题</title><style>.main>div{font-size:50px;text-align: center;}.main{/* margin: 300px auto; */overflow: hidden;width: 60px;height: 80px;background-color: rgb(62, 255, 75);border-radius: 15px;     }.in{transition: all 2s ease-in-out;}.main:hover .in{transform: translate(0,-580px);}</style>
</head>
<body><div class="main"><div class="in"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div></div> 
</body>
</html>

效果展示：

第六题效果

7.动画制作：

屏幕中央有一排竖条在按规律持续缩放，形成波纹的效果。

我们在屏幕中央摆放一排竖条，设置好宽高、边距和颜色、圆角等属性，然后给他们添加动画效果：

我们发现所有竖条的缩放大小和周期完全相同，只是运动状态在时间上不同。我们可以先统一给它们设置缩放动画，再安排不同的延迟开始时间来达到此效果。

这里，我们用@keyframes来制作动画：在50%（中间时刻）设置竖直方向的缩放比例，开始和结束都是不变（竖直方向缩放比例为1）。

我的代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第七题</title><style>.main{margin: 200px auto;/* background-color: pink; */width: 80px;height: 130px;}.main div{float: left;margin-left: 2px;height: 80px;width: 8px;border-radius: 3px;background-color: red;}.line1{    animation: move 1.75s linear 0s infinite;}.line2{animation: move 1.75s linear .25s infinite;}.line3{animation: move 1.75s linear .5s infinite;}.line4{animation: move 1.75s linear .75s infinite;}.line5{animation: move 1.75s linear 1s infinite;}.line6{animation: move 1.75s linear 1.25s infinite;}.line7{animation: move 1.75s linear 1.5s infinite;}.line8{animation: move 1.75s linear 1.75s infinite;}@keyframes move {0%{transform: scaleY(0.08);}50%{transform: scaleY(1);}100%{transform: scaleY(0.08);}   }</style>
</head>
<body><div class="main"><div class="line1"></div><div class="line2"></div><div class="line3"></div><div class="line4"></div><div class="line5"></div><div class="line6"></div><div class="line7"></div><div class="line8"></div></div>
</body>
</html>

效果展示：

第七题效果

8.动画制作：

和上一道题的大方向基本相同，给盒子中水平排列的条状子元素添加不同的动画效果并形成动态几何图形。

这道题可以有很多种方法让子元素形成那样的运动规律，在这里我使用了最原始的办法，用@keyframes设置不同的关键帧、元素状态来模拟爱心的变化。

首先做好准备工作：写好标题、放好包着动画的大盒子，设置好宽高和边距。

我们可以看到动画的开始和末尾都是一排完全相同的点状，所以我们先设置好0%和100%的状态。

再看每个子元素自身的运动状态，都是运动到自身最长的长度再回去。所以我们可以设置中间的状态（暂时无法确定具体时间）为其最终形态。由于以始末状态为基准的话，子元素最终形态的向上和向下伸长的长度不同，我们在这里可以提前测量好最终长度再设置margin-top值把它下压到相应的位置来模拟上下伸长长度不同的效果。

题目中是九个子元素，但是是轴对称图形，所以一共有5种不同程度的最终形态，我们只需要做出五个关键帧动画再设置不同的延迟时间即可。

我们接下来观察整体运动规律。所有的子元素依次变换到最大形态，等到最后一个子元素完成后再又依次返回到起始状态。有两个需要解决的问题。首先，模拟依次开始动画状态：我们在元素内声明动画的时候依次设置间隔时间相同的延迟开始时间即可；其次，第一个子元素会等到最后一个子元素变成最大形态之后才开始缩小，我们其实可以看做在一个完整的动画过程中有四个部分：第一部分是动画伸长，第二部分是伸长后保持状态（等待后面子元素全部达到最大状态）的时间；第三部分是动画缩短，第四部分依旧是保持状态，等待其他子元素复原。这四个状态，我们可以全部设置在关键帧中并通过计算来控制总时间和延迟时间。

我的代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第八题</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}body{background-color: rgb(47, 47, 47);}.title{height: 80px;margin: 0 auto;padding-top: 50px;color: aqua;font-size: 10px;text-align: center;}.main{margin: 10px auto;width: 90px;height: 200px;}div[class^="line"]{float: left;margin-left: 5px;width: 5px;border-radius: 40px;margin-top: 35px;height: 5px;}.line1{background-color: red;animation: move1 7s linear 0s infinite;}.line2{background-color: aqua;animation: move2 7s linear .25s infinite;}.line3{background-color:peachpuff ;animation: move3 7s linear .5s infinite;}.line4{background-color: pink;animation: move4 7s linear .75s infinite;}.line5{background-color: yellow;animation: move5 7s linear 1s infinite;}.line6{background-color: pink;animation: move4 7s linear 1.25s infinite;}.line7{background-color:peachpuff ;animation: move3 7s linear 1.5s infinite;}.line8{background-color: aqua;animation: move2 7s linear 1.75s infinite;}.line9{background-color: red;animation: move1 7s linear 2s infinite;} @keyframes move1{0%, 70%, 100%{margin-top: 35px;height: 5px;}15%, 55%{margin-top: 22px;height:20px;}}@keyframes move2 {0%, 70%, 100%{margin-top: 35px;height: 5px;}15%, 55%{margin-top: 10px;height: 45px;}}@keyframes move3 {0%, 70%, 100%{margin-top: 35px;height: 5px;;}15%, 55%{margin-top: 5px;height: 60px;}}@keyframes move4 {0%, 70%, 100%{margin-top: 35px;height: 5px;}15%, 55%{margin-top: 10px;height: 60px;}}@keyframes move5 {0%, 70%, 100%{margin-top: 35px;height: 5px;}15%, 55%{margin-top: 15px;height: 65px;}}</style>
</head><body><div class="title">爱心怦怦跳</div><div class="main"><div class="line1"></div><div class="line2"></div><div class="line3"></div><div class="line4"></div><div class="line5"></div><div class="line6"></div><div class="line7"></div><div class="line8"></div><div class="line9"></div></div>
</body>
</html>