第5单元 第15练 制作表格和表单《计算机网络基础》(高教版第二版) 一课一练

编写说明：考虑到中职学生普遍基础知识相对薄弱的情况，我们依据支架式教学理念，精心编制了《计算机网络基础》(高教版第二版)一课一练。专辑里的每一份练习，都与课堂所授知识点紧密相关，题目围绕课堂所学知识点呈现。目的在于激发学生的学习兴趣，培养他们的学习自觉性，帮助学生扎实掌握课程的基本概念与基本方法，为他们后续的进一步提升奠定坚实基础。 本卷是《计算机网络基础》(高教版第二版)一课一练的第5单元的第15练，内容涵盖第5单元网页制作 任务4 DIV+CSS布局。 《计算机网络基础》(高教版第二版)第15练 第5单元 网页制作 任务4 DIV+CSS布局 1、 单项选择题（本题共5小题） 1.某元素的width为200px，左右padding各为10px，左右border各为5px，左右margin各为20px，则该元素的总宽度是（ ）。 A.200px B.230px C.250px D.270px 2.当父元素内部的所有子元素都浮动后，父元素可能出现的高度问题及解决方法是（ ） A.父元素高度自动撑大，无需处理 B.父元素高度塌陷，可使用clear: both;清除浮动解决 C.父元素宽度塌陷，需设置width解决 D.父元素会隐藏，需设置display解决 3.将某图片<img>元素设置float: left;后，关于其布局效果，下列说法正确的是（ ） A．图片向右浮动，文字会与其重叠 B．图片向左浮动并脱离文档流，文字会环绕在图片右侧显示 C．图片向左浮动，但仍在文档流中占据位置 D．图片不浮动，正常显示 4.以下代码，其中.footer元素要清除左右两侧浮动元素的影响，应使用（ ）.footer{ width:1000px; height:80px; margin:0px auto; background-image:url("../images/footer.jpg"); } A．float: left; B．clear: left; C．clear: right; D．clear: both; 5.关于响应式布局的媒体查询，当屏幕视口宽度在769px至991px之间（平板设备）时，正确的媒体查询写法是（ ） A．@media (min-width:769px) and (max-width:991px) { ... } B．@media (max-width:768px) { ... } C．@media (min-width:992px) { ... } D．@media (width: 769px-991px) { ... } 2、 判断题（本题共5小题） 1.在CSS布局中，可为div元素设置float属性来实现分块排列，也可用position属性控制定位。（ ） 2.若某元素只设置了border-width和border-color，而没有设置border-style，则该元素的边框仍会以默认样式显示。（ ） 3.边框（border）的简写属性border: 2px solid #333;中，三个值分别表示边框的宽度、样式和颜色。（ ） 4.在文档流中，<span>、<a>、<img>等行内元素的宽度和高度默认占据其父元素的整个可用宽度。（ ） 5. 浮动元素脱离文档流后，不会占据任何位置，因此后续元素会向上填补其原来占据的空间。（ ） 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $ 编写说明：考虑到中职学生普遍基础知识相对薄弱的情况，我们依据支架式教学理念，精心编制了《计算机网络基础》(高教版第二版)一课一练。专辑里的每一份练习，都与课堂所授知识点紧密相关，题目围绕课堂所学知识点呈现。目的在于激发学生的学习兴趣，培养他们的学习自觉性，帮助学生扎实掌握课程的基本概念与基本方法，为他们后续的进一步提升奠定坚实基础。 本卷是《计算机网络基础》(高教版第二版)一课一练的第5单元的第15练，内容涵盖第5单元网页制作 任务4 DIV+CSS布局。 《计算机网络基础》(高教版第二版)第15练 第5单元 网页制作 任务4 DIV+CSS布局 1、 单项选择题（本题共5小题） 1.某元素的width为200px，左右padding各为10px，左右border各为5px，左右margin各为20px，则该元素的总宽度是（ ）。 A.200px B.230px C.250px D.270px 【答案】B 【解析】盒模型总宽度计算公式：总宽度=width+左右padding+左右border+左右margin= 200 + (10+10)+(5+5)+(20+20)= 200+20+10+40=270px。这是盒模型尺寸计算的核心考点——width仅指内容区域宽度，不含padding、border和margin。 2.当父元素内部的所有子元素都浮动后，父元素可能出现的高度问题及解决方法是（ ） A.父元素高度自动撑大，无需处理 B.父元素高度塌陷，可使用clear: both;清除浮动解决 C.父元素宽度塌陷，需设置width解决 D.父元素会隐藏，需设置display解决 【答案】B 【解析】由于浮动元素脱离文档流，父元素无法感知浮动子元素的高度，会出现高度塌陷（父元素高度为0或异常）。解决方法是清除浮动，使用clear: left/right/both;（常用clear: both;）使元素不受浮动影响。这是浮动布局中必须掌握的处理技巧，因此选B。 3.将某图片<img>元素设置float: left;后，关于其布局效果，下列说法正确的是（ ） A．图片向右浮动，文字会与其重叠 B．图片向左浮动并脱离文档流，文字会环绕在图片右侧显示 C．图片向左浮动，但仍在文档流中占据位置 D．图片不浮动，正常显示 【答案】B 【解析】为图片设置左浮动后，它脱离文档流，后续<h3>、<p>等元素向上填补空缺位置，但浮动元素不会与文字重叠，文字会环绕浮动元素显示。 4.以下代码，其中.footer元素要清除左右两侧浮动元素的影响，应使用（ ）.footer{ width:1000px; height:80px; margin:0px auto; background-image:url("../images/footer.jpg"); } A．float: left; B．clear: left; C．clear: right; D．clear: both; 【答案】D 【解析】clear属性用于清除浮动，clear: both表示同时清除左、右两侧浮动元素的影响，是清除左右两侧浮动的常用写法，教材中.footer元素即使用clear: both。 5.关于响应式布局的媒体查询，当屏幕视口宽度在769px至991px之间（平板设备）时，正确的媒体查询写法是（ ） A．@media (min-width:769px) and (max-width:991px) { ... } B．@media (max-width:768px) { ... } C．@media (min-width:992px) { ... } D．@media (width: 769px-991px) { ... } 【答案】A 【解析】平板设备对应视口宽度769px≤视口≤991px，媒体查询条件为(min-width:769px) and (max-width:991px)，用于适配平板设备的屏幕宽度。 2、 判断题（本题共5小题） 1.在CSS布局中，可为div元素设置float属性来实现分块排列，也可用position属性控制定位。（ ） 【答案】正确 【解析】<div>元素的重要特性之一就是可以通过float、position等属性进行布局控制。教材任务实施中通过box1~box4左浮动实现布局二的分块排列，同时div也可配合position实现精确定位,表述正确。 2.若某元素只设置了border-width和border-color，而没有设置border-style，则该元素的边框仍会以默认样式显示。（ ） 【答案】错误 【解析】如果没有设置border-style，那么即使设置了边框的宽度和颜色，边框也不会显示，说法错误。 3.边框（border）的简写属性border: 2px solid #333;中，三个值分别表示边框的宽度、样式和颜色。（ ） 【答案】正确 【解析】border简写属性border: width style color;，因此border: 2px solid #333;中，2px是宽度，solid是样式（实线），#333是颜色。border-style的可选值还包括none、dashed、dotted、double等。也可用border-top等单设某一方向的边框。表述正确。 4.在文档流中，<span>、<a>、<img>等行内元素的宽度和高度默认占据其父元素的整个可用宽度。（ ） 【答案】错误 【解析】行内元素（如<span>、<a>、<img>）在同一行内从左到右排列；在没有设置特定宽度时，行内元素的宽度和高度会根据其内容和CSS设置自动调整，而块级元素才默认占据父元素的整个可用宽度。该说法错误。 5. 浮动元素脱离文档流后，不会占据任何位置，因此后续元素会向上填补其原来占据的空间。（ ） 【答案】正确 【解析】浮动元素脱离文档流后不再占用位置，后续元素会向上填补浮动元素原来占据的空间，表述正确。 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $