2026年div css的测试题及答案

2026年divcss的测试题及答案

一、单项选择题（总共10题，每题2分）1.以下CSS选择器优先级最高的是（）A.标签选择器B.类选择器C.ID选择器D.通配符选择器2.盒模型中，元素的宽度默认由（）决定A.content宽度B.content+paddingC.content+padding+borderD.content+padding+border+margin3.清除浮动的常用方法中，不属于的是（）A.clear:bothB.父元素overflow:hiddenC.空div法D.display:inline4.position属性中，元素相对于浏览器窗口定位的是（）A.relativeB.absoluteC.fixedD.static5.以下属于响应式设计的CSS单位是（）A.pxB.emC.remD.%6.Flex布局中，设置主轴方向为垂直方向的属性是（）A.flex-direction:columnB.flex-direction:rowC.justify-content:centerD.align-items:center7.CSS3中，实现元素从一种状态平滑过渡到另一种状态的属性是（）A.transitionB.transformC.animationD.keyframes8.Grid布局中，定义列数为3列的属性是（）A.grid-template-columns:repeat(3,1fr)B.grid-template-rows:3frC.grid-column:3D.grid-row:39.以下用于创建伪元素的是（）A.::beforeB.:hoverC.:activeD.:focus10.以下能触发BFC的是（）A.float:leftB.position:relativeC.display:inlineD.width:100%二、填空题（总共10题，每题2分）1.CSS的三种引入方式分别是______、______、______。2.当盒模型为border-box时，元素的宽度=______+______+______。3.清除浮动的CSS属性是______，常用值有______、______、______。4.绝对定位的元素，其参考对象是______的祖先元素。5.Flex布局中，设置主轴的属性是______，默认值为______。6.Grid布局中，定义列数的属性是______，例如设置3列的代码是______。7.媒体查询中，设置最小宽度的语法是______。8.伪类`:hover`的作用是______。9.CSS变量的声明方式是______，使用方式是______。10.CSS动画中，定义关键帧的属性是______，使用方式是______。三、判断题（总共10题，每题2分）1.ID选择器的优先级高于类选择器。（）2.盒模型的默认值是border-box。（）3.浮动元素会脱离文档流，不占据原来的位置。（）4.position:relative的元素不会脱离文档流。（）5.Flex布局中，flex-wrap的默认值是wrap。（）6.Grid布局可以同时控制行和列的布局，适合二维布局。（）7.媒体查询可以根据设备的宽度调整样式，实现响应式设计。（）8.一个元素只能有一个伪元素（如::before或::after）。（）9.CSS变量的作用域是全局的，无法局部定义。（）10.动画的animation-iteration-count默认值是infinite。（）四、简答题（总共4题，每题5分）1.请简述CSS盒模型的两种模式（content-box和border-box）的区别及计算方式。2.清除浮动的方法有哪些？请说明每种方法的原理。3.Flex布局有哪些优势？适用于哪些场景？4.响应式网页设计的实现方法有哪些？请简要说明。五、讨论题（总共4题，每题5分）1.请讨论DIV+CSS布局相对于传统表格布局的优势。2.什么是BFC？请分析BFC的触发条件及实际应用场景。3.比较CSS3中的动画（animation）和过渡（transition），说明它们的异同及适用场景。4.在网页布局中，何时选择使用Grid布局，何时选择使用Flex布局？请结合场景分析。答案及解析一、单项选择题答案1.C（ID选择器优先级高于类、标签选择器，通配符优先级最低）2.A（盒模型默认是content-box，宽度由content宽度决定；border-box时宽度包含padding和border）3.D（display:inline无法清除浮动，常用清除方法：clear:both、父元素overflow:hidden、空div法）4.C（fixed定位相对于浏览器窗口；absolute相对于最近的已定位祖先；relative相对于自身原位置）5.C（rem相对于根元素字体大小，适合响应式；em相对于父元素，%为百分比，px为固定值）6.A（flex-direction:column将主轴设为垂直方向；row为水平方向）7.A（transition实现平滑过渡；transform是变形；animation需关键帧；keyframes定义动画）8.A（grid-template-columns定义列，repeat(3,1fr)表示3列；grid-template-rows定义行）9.A（::before/::after是伪元素；:hover等是伪类）10.A（触发BFC的条件：float不为none、overflow不为visible等；float:left触发BFC）二、填空题答案1.行内样式（内联样式）、内部样式表、外部样式表（顺序可换）2.content宽度、padding、border（border-box时宽度包含这三部分）3.clear；left、right、both（clear属性的常用值）4.最近的已定位（position不为static）5.flex-direction；row（主轴默认水平方向）6.grid-template-columns；grid-template-columns:repeat(3,1fr)（或具体宽度，如100px1fr2fr）7.@media(min-width:宽度值){...}（如@media(min-width:768px)）8.鼠标悬浮在元素上时，设置元素的样式9.--变量名:值；var(--变量名)（如:root{--main-color:red;}，使用时color:var(--main-color);）10.@keyframes；animation-name:关键帧名;（如@keyframesmyAnim{...}，然后animation-name:myAnim;）三、判断题答案1.√（ID选择器优先级高于类选择器）2.×（盒模型默认是content-box，border-box需手动设置）3.√（浮动元素脱离文档流，不占据原位置）4.√（relative定位的元素不脱离文档流，仅位置偏移）5.×（flex-wrap默认是nowrap，即不换行）6.√（Grid是二维布局，可同时控制行和列）7.√（媒体查询通过设备宽度调整样式，实现响应式）8.×（一个元素可同时有::before和::after两个伪元素）9.×（CSS变量可在局部作用域（如元素）或全局（:root）定义）10.×（animation-iteration-count默认值是1，infinite为无限循环）四、简答题答案1.盒模型两种模式区别：-`content-box`：元素宽度=content宽度，padding和border向外扩展（增加实际宽度）。例如，width=100px，padding=10px，border=5px，总宽度=100+20+10=130px。-`border-box`：元素宽度=content宽度+padding+border（padding和border在宽度内，不增加实际宽度）。例如，width=100px，padding=10px，border=5px，content宽度=100-20-10=70px，总宽度仍为100px。2.清除浮动的方法及原理：-clear属性：给浮动元素的兄弟元素设置`clear:both`，阻止元素在浮动元素旁排列。-父元素overflow:hidden：触发BFC（块格式化上下文），BFC区域不与浮动元素重叠，父元素包含浮动子元素。-父元素display:flow-root：创建新的BFC，包含浮动子元素。-空div法：在浮动元素后加空div，设置`clear:both`，原理同clear属性。3.Flex布局优势及场景：-优势：一维布局（行/列）灵活，自适应能力强，支持对齐、排序、换行。-场景：导航栏（菜单项排列）、卡片列表（水平/垂直排列）、表单元素排列、垂直居中、两端对齐等一维布局场景（如顶部导航、商品列表）。4.响应式设计方法：-媒体查询：通过`@media`根据设备宽度调整样式（如手机、平板、PC端布局）。-弹性/网格布局：利用Flex/Grid，结合百分比、rem、fr等单位实现自适应。-图片响应式：使用`srcset`或`picture`适配不同分辨率。-流式布局：内容随容器宽度自动调整，避免固定宽度。-CSS变量：动态调整样式适应不同设备。五、讨论题答案1.DIV+CSSvs表格布局优势：-结构与样式分离：HTML负责结构，CSS负责样式，便于维护复用。-代码简洁：减少冗余（表格布局需大量table/tr/td）。-加载更快：结构清晰，利于SEO。-布局灵活：通过CSS实现浮动、定位、弹性布局，适应多设备。-可访问性好：语义化结构（header/nav/main）提升无障碍访问。2.BFC的原理及应用：-BFC（块格式化上下文）是独立渲染区域，内部布局不受外部影响，外部也不影响内部。-触发条件：float不为none、overflow不为visible、position为absolute/fixed、display为inline-block等。-应用场景：-清除浮动：父元素触发BFC，包含浮动子元素（解决高度塌陷）。-避免margin重叠：BFC内的元素margin不与外部重叠。-阻止元素被浮动覆盖：如两栏布局，左侧浮动，右侧触发BFC不被覆盖。3.动画（animation）与过渡（transition）异同：-相同点：都实现样式动态变化。-不同点：-触发方式：transition需事件（hover/点击）触发；animation可自动播放或其他方式触发。-控制方式：transition是“从一个状态到另一个状态”的过渡；animation通过关键帧定义多状态，更灵活。-循环：animation可设置循环次数；transition默认一次。-适用场景：transition适合简单状态变化（如按钮hover）；a