第五单元 任务4 DIV+CSS布局（练习）-《计算机网络基础》（高等教育出版社）同步精品课堂

第五单元 5.4 DIV+CSS布局 一、单项选择题 1、一个<div>元素的内容区域宽度为200px，左右内边距各为10px，左右边框各为5px，左右外边距各为20px，则该元素的盒模型实际总宽度为（ ） A. 200px B. 230px C. 250px D. 270px 2、以下选择器通常用于在CSS中重置所有HTML元素的默认内外边距的是（ ） A. body { margin: 0; padding: 0; } B. * { margin: 0; padding: 0; } C. html { margin: 0; padding: 0; } D. div { margin: 0; padding: 0; } 3、在CSS中，以下关于<div>元素的描述，错误的是（ ） A. 默认是一个块级元素，占据其父容器的整个宽度 B. 默认会在其前后添加换行 C. 可以嵌套其他元素 D. 具有默认的边框和边距 4、在“保护濒危动物”案例中，为了让主体区域的四个.box元素从左到右并排显示，使用的CSS属性是（ ）。 A. float: left; B. display: inline; C. position: absolute; D. clear: both; 5、在CSS中，当所有子元素都设置了float: left;后，父元素可能发生“高度塌陷”，这是因为（ ） A. 子元素高度计算错误 B. 浮动元素脱离了正常的文档流 C. 父元素的height属性被自动清空 D. 浏览器的默认样式冲突 6、在CSS中，同时设置元素上、右、下、左四个方向的内边距分别为10px、20px、30px、40px，正确的写法是（ ）。 A. padding: 10px 20px 30px 40px; B. padding: 10px 30px 20px 40px; C. padding: 40px 30px 20px 10px; D. padding: 10px 40px 30px 20px; 7、在CSS中，以下关于文档流的描述，正确的是（ ）。 A. 浮动元素会按照正常文档流进行排列 B. 块级元素在文档流中会从左到右排列 C. 行内元素在文档流中会从上到下排列 D. 文档流是网页元素默认的排列方式，从上到下、从左到右 8、在CSS中，以下关于响应式布局的描述，错误的是（ ） A. 响应式布局可以让网页自动适应不同屏幕尺寸 B. 实现响应式布局需要设置<meta name="viewport">标签 C. 媒体查询（@media）是实现响应式布局的关键技术 D. 响应式布局只需要使用浮动即可实现 二、多选题 1、在CSS中，关于float属性的描述，正确的有（ ）。 A. float: left;使元素向左浮动 B. float: right;使元素向右浮动 C. 浮动元素会脱离正常的文档流 D. 浮动元素不会对其他元素造成影响 2、在CSS中，关于clear属性的描述，正确的有（ ）。 A. clear: left;清除左侧浮动的影响 B. clear: right;清除右侧浮动的影响 C. clear: both;同时清除左、右两侧浮动的影响 D. clear: all;是清除浮动的标准写法 3、在“保护濒危动物”案例中，实现布局二（两行两列并排）的核心CSS步骤包括（ ） A. 为四个.box元素设置float: left; B. 为.box1和.box3设置margin-right: 20px; C. 为.footer设置clear: both; D. 为.header设置margin: 0 auto; 三、判断题 1、<div>元素是一个块级元素，默认情况下会独占一行，占据其父容器的整个宽度。（ ） 2、在“保护濒危动物”案例中，.main元素设置了width: 1000px;，但没有设置高度，它的高度会由内部的内容（子元素）自动撑开。（ ） 3、在CSS中，如果一个元素设置了float: left;，它后面的非浮动元素会忽视该浮动元素，向上移动到浮动元素原来的位置。（ ） 四、填空题 1、在CSS盒模型中，由内到外四个组成部分依次是______、______、______和______。其中，用于控制元素内容与边框之间距离的是______。 2、 在“保护濒危动物”案例中，为了让主体区域的四个.box元素从一列堆叠变为两行两列并排，使用了______属性。当所有子元素都设置此属性后，父元素出现高度变为0的现象，这种现象称为______。 3、一个<div>元素的内容区宽度为200px，左右内边距各为20px，左右边框各为5px，左右外边距各为25px，则该元素盒模型的总宽度为______px 五、简答题 1、请写出CSS盒模型的四个组成部分（由内到外），并说明每个部分的作用。同时，写出盒模型总宽度的计算公式。 2、 请结合“保护濒危动物”案例，说明从布局一（文档流布局）到布局二（浮动布局）的完整实现步骤，并解释为什么需要清除浮动，以及如何清除。 3、 在“保护濒危动物”案例中，最终实现了图文混排效果。请回答以下问题： (1) 图文混排的核心原理是什么？ (2) 在案例中，为实现图文混排，对<img>元素设置了哪个CSS属性？它的作用是什么？ (3) 如果要实现“文字在图片右侧环绕”和“文字在图片左侧环绕”，分别应该对图片设置什么浮动方式？ 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 学科网（北京）股份有限公司 $ 第五单元 5.4 DIV+CSS布局 一、单项选择题 1、一个<div>元素的内容区域宽度为200px，左右内边距各为10px，左右边框各为5px，左右外边距各为20px，则该元素的盒模型实际总宽度为（ ） A. 200px B. 230px C. 250px D. 270px 答案：D 解析：本题考查盒模型的总宽度计算。根据公式：总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right。代入计算：200 + 10 + 10 + 5 + 5 + 20 + 20 = 270px。因此总宽度为270px。 2、以下选择器通常用于在CSS中重置所有HTML元素的默认内外边距的是（ ） A. body { margin: 0; padding: 0; } B. * { margin: 0; padding: 0; } C. html { margin: 0; padding: 0; } D. div { margin: 0; padding: 0; } 答案：B 解析： 本题考查通配符选择器*的用法。在参考资料中，使用* { padding: 0px; margin: 0px; }来清除文档中所有元素的默认内外边距，以消除不同浏览器的默认样式差异，使布局更一致。 3、在CSS中，以下关于<div>元素的描述，错误的是（ ） A. 默认是一个块级元素，占据其父容器的整个宽度 B. 默认会在其前后添加换行 C. 可以嵌套其他元素 D. 具有默认的边框和边距 答案：D 解析： 本题考查<div>元素的特点。A、B、C都正确描述了<div>的特点。D错误，<div>元素默认没有边框，且默认边距（margin）为0（但不同浏览器可能有默认margin，通常通过通配符选择器重置）。 4、在“保护濒危动物”案例中，为了让主体区域的四个.box元素从左到右并排显示，使用的CSS属性是（ ）。 A. float: left; B. display: inline; C. position: absolute; D. clear: both; 答案：A 解析：本题考查浮动属性在布局中的应用。参考资料中，为了让四个.box元素从一列堆叠变为两行两列并排，使用了float: left;。display: inline;可以使元素在一行显示但无法设置宽高，clear: both;用于清除浮动。 5、在CSS中，当所有子元素都设置了float: left;后，父元素可能发生“高度塌陷”，这是因为（ ） A. 子元素高度计算错误 B. 浮动元素脱离了正常的文档流 C. 父元素的height属性被自动清空 D. 浏览器的默认样式冲突 答案：B 解析：本题考查高度塌陷的成因。当子元素全部设置浮动后，它们会脱离正常的文档流，不再占据父元素内容区域的空间，导致父元素的高度无法被子元素撑开，从而出现高度塌陷（高度变为0）。 6、在CSS中，同时设置元素上、右、下、左四个方向的内边距分别为10px、20px、30px、40px，正确的写法是（ ）。 A. padding: 10px 20px 30px 40px; B. padding: 10px 30px 20px 40px; C. padding: 40px 30px 20px 10px; D. padding: 10px 40px 30px 20px; 答案：A 解析：本题考查padding属性多值写法。当padding提供四个参数值时，顺序为上、右、下、左（顺时针方向）。因此padding: 10px 20px 30px 40px;表示上内边距10px、右内边距20px、下内边距30px、左内边距40px。 7、在CSS中，以下关于文档流的描述，正确的是（ ）。 A. 浮动元素会按照正常文档流进行排列 B. 块级元素在文档流中会从左到右排列 C. 行内元素在文档流中会从上到下排列 D. 文档流是网页元素默认的排列方式，从上到下、从左到右 答案：D 解析： 本题考查文档流的概念。文档流是网页元素的默认排列方式，块级元素从上到下排列，行内元素从左到右排列。浮动元素会脱离文档流，不再遵循默认排列规则。 8、在CSS中，以下关于响应式布局的描述，错误的是（ ） A. 响应式布局可以让网页自动适应不同屏幕尺寸 B. 实现响应式布局需要设置<meta name="viewport">标签 C. 媒体查询（@media）是实现响应式布局的关键技术 D. 响应式布局只需要使用浮动即可实现 答案：D 解析：本题考查响应式布局的理解。A、B、C正确。D错误，响应式布局需要综合运用<meta name="viewport">标签、媒体查询（@media）、弹性布局、百分比单位等多种技术，仅靠浮动无法实现完整的响应式设计。 二、多选题 1、在CSS中，关于float属性的描述，正确的有（ ）。 A. float: left;使元素向左浮动 B. float: right;使元素向右浮动 C. 浮动元素会脱离正常的文档流 D. 浮动元素不会对其他元素造成影响 答案：ABC 解析： 本题考查float属性的基本概念。A、B、C正确。D错误，浮动元素脱离文档流后，会对后续元素的布局产生影响（如遮挡、高度塌陷等），正是因此才需要清除浮动。 2、在CSS中，关于clear属性的描述，正确的有（ ）。 A. clear: left;清除左侧浮动的影响 B. clear: right;清除右侧浮动的影响 C. clear: both;同时清除左、右两侧浮动的影响 D. clear: all;是清除浮动的标准写法 答案：ABC 解析： 本题考查clear属性的取值。A、B、C正确。D错误，clear属性没有all这个值，同时清除左、右浮动影响应使用clear: both;。 3、在“保护濒危动物”案例中，实现布局二（两行两列并排）的核心CSS步骤包括（ ） A. 为四个.box元素设置float: left; B. 为.box1和.box3设置margin-right: 20px; C. 为.footer设置clear: both; D. 为.header设置margin: 0 auto; 答案：ABC 解析： 本题考查布局二实现的核心步骤。A（设置浮动）使四个box并排；B（添加外边距）为两列之间留出间距；C（清除浮动）使页脚恢复正常位置。D（头部居中）属于基础样式设置，并非布局二的核心步骤。 三、判断题 1、<div>元素是一个块级元素，默认情况下会独占一行，占据其父容器的整个宽度。（ ） 答案：√ 解析：本题考查<div>元素的特性。<div>默认是块级元素，从新的一行开始，前后自动换行，并默认占据其父容器的整个可用宽度。这是<div>作为布局容器的基本特性。 2、在“保护濒危动物”案例中，.main元素设置了width: 1000px;，但没有设置高度，它的高度会由内部的内容（子元素）自动撑开。（ ） 答案：√ 解析： 本题考查父容器高度的自动撑开。当父容器没有设置高度时，其高度默认由内部子元素的高度决定（即自动撑开）。但需要注意的是，如果子元素都设置了浮动，父容器会发生高度塌陷，需要清除浮动才能恢复撑开效果。 3、在CSS中，如果一个元素设置了float: left;，它后面的非浮动元素会忽视该浮动元素，向上移动到浮动元素原来的位置。（ ） 答案：√ 解析： 本题考查浮动对后续元素的影响。当元素浮动（float: left;）后脱离文档流，后续的非浮动元素会忽略该浮动元素占据的空间，向上移动填补空缺。这就解释了为什么会出现“遮挡”现象。 四、填空题 1、在CSS盒模型中，由内到外四个组成部分依次是______、______、______和______。其中，用于控制元素内容与边框之间距离的是______。 答： 内容（content）、内边距（padding）、边框（border）、外边距（margin）、内边距（padding） 2、 在“保护濒危动物”案例中，为了让主体区域的四个.box元素从一列堆叠变为两行两列并排，使用了______属性。当所有子元素都设置此属性后，父元素出现高度变为0的现象，这种现象称为______。 答：float: left;（或浮动）、高度塌陷 3、一个<div>元素的内容区宽度为200px，左右内边距各为20px，左右边框各为5px，左右外边距各为25px，则该元素盒模型的总宽度为______px 答：300 五、简答题 1、请写出CSS盒模型的四个组成部分（由内到外），并说明每个部分的作用。同时，写出盒模型总宽度的计算公式。 答：CSS盒模型由内到外依次为： · 内容（content）：元素的实际内容区域，用于显示文本、图像等内容。其尺寸可通过width和height属性设置。 · 内边距（padding）：内容区域与边框之间的空间，用于调整内容与边框之间的距离，使内容不紧贴边框。 · 边框（border）：围绕内容区和内边距的线条，用于分隔不同的HTML元素，可设置样式、宽度和颜色。 · 外边距（margin）：元素的外部空间，用于控制元素与其他元素之间的距离，避免元素之间过于拥挤。 盒模型总宽度的计算公式： 总宽度 = width（内容宽度）+ padding-left + padding-right + border-left + border-right + margin-left + margin-right 2、 请结合“保护濒危动物”案例，说明从布局一（文档流布局）到布局二（浮动布局）的完整实现步骤，并解释为什么需要清除浮动，以及如何清除。 答：从布局一到布局二的实现步骤： 编写基础样式（布局一）：设置全局样式（清除内外边距、背景色），为.header、.banner、.main、.box1~.box4（宽490px、高360px）、.footer设置宽度和背景图片。此时所有块级元素从上到下排列，四个box纵向堆叠（布局一）。 添加浮动属性（实现布局二）：为.box1、.box2、.box3、.box4添加float: left;。此时所有box向左浮动，尝试并排排列。 调整间距：为.box1和.box3添加margin-right: 20px;，使每行两个box之间留出20px间距。 清除浮动：为.footer添加clear: both;，使页脚回到主体内容下方。 为什么需要清除浮动： 当四个.box都设置浮动后，它们脱离了正常的文档流，不再占据父元素.main的空间，导致.main高度塌陷（高度变为0）。后续的.footer元素会向上移动填补空缺，被浮动元素遮挡，出现布局错乱。 如何清除浮动： 在.footer中使用clear: both;属性，该属性会清除元素左右两侧浮动元素的影响，使.footer不再受前面浮动元素的影响，按正常文档流排列在浮动元素下方。 3、 在“保护濒危动物”案例中，最终实现了图文混排效果。请回答以下问题： (1) 图文混排的核心原理是什么？ (2) 在案例中，为实现图文混排，对<img>元素设置了哪个CSS属性？它的作用是什么？ (3) 如果要实现“文字在图片右侧环绕”和“文字在图片左侧环绕”，分别应该对图片设置什么浮动方式？ 答案： (1) 图文混排的核心原理： 通过将图片设置为浮动（float），使其脱离正常的文档流，而后续的文本元素（如<h3>、<p>等）会忽略该浮动元素占据的空间，向上移动填补空缺。但由于浏览器渲染机制，文本并不会被浮动元素完全遮挡，而是会环绕在浮动元素的周围，从而形成文字环绕图片的效果。 (2) 案例中对<img>元素的设置及其作用： 在案例中，为.box1 img设置了float: left;（左浮动）。其作用是使图片向左浮动，脱离文档流，后续的<h3>标题和<p>文字会环绕在图片的右侧。 (3) 不同环绕效果的浮动方式： 文字在图片右侧环绕：对图片设置float: left;（左浮动），图片在左，文字环绕在右侧。 文字在图片左侧环绕：对图片设置float: right;（右浮动），图片在右，文字环绕在左侧。 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 学科网（北京）股份有限公司 $