前端开发 CSS 规范试题及答案

前端开发CSS规范试题及答案前端开发CSS规范试题及答案一、单选题（一）以下哪个选择器的优先级最高A.#nav.listliB..nav.listliC.divulliD.li答案：A（二）在CSS盒模型中，默认的box-sizing属性值是A.border-boxB.content-boxC.padding-boxD.margin-box答案：B（三）Flex布局中，设置子元素在主轴上居中的属性是A.align-items:centerB.justify-content:centerC.align-content:centerD.flex-align:center答案：B（四）以下哪个单位是相对于视口宽度的A.emB.remC.vwD.px答案：C（五）CSS中用于隐藏元素的属性是A.display:noneB.visibility:hiddenC.opacity:0D.以上都是答案：D二、多选题（一）以下哪些是CSS选择器的组合方式A.后代选择器B.子选择器C.相邻兄弟选择器D.通用兄弟选择器答案：ABCD（二）以下哪些方法可以实现CSS样式隔离A.CSSModulesB.BEM命名规范C.ShadowDOMD.SCSS嵌套答案：ABC（三）CSS中用于创建动画的属性包括A.@keyframesB.animationC.transitionD.transform答案：ABC三、判断题（一）CSS中的import规则必须在所有其他规则之前声明答案：正确（二）id选择器的优先级高于class选择器答案：正确（三）CSSGrid布局只能用于二维布局答案：错误（四）使用rem单位可以实现响应式字体大小答案：正确（五）CSS的calc函数可以混合计算不同单位的数值答案：正确四、简答题（一）请简述BEM命名规范的命名规则答案：BEM代表Block（块）、Element（元素）、Modifier（修饰符）。命名规则如下：Block使用独立的词命名，如menu、button；Element使用双下划线连接Block名，如menu__item、button__icon；Modifier使用双短横线连接，如menu__item--active、button--disabled。（二）请简述CSS中display:none与visibility:hidden的区别答案：display:none完全移除元素，不占据任何空间，元素不可见且不可交互；visibility:hidden隐藏元素但保留空间，元素不可见但占据原有空间，子孙元素设置visibility:visible可使其可见。（三）请简述CSSFlex布局中flex-grow、flex-shrink、flex-basis属性的作用答案：flex-grow定义项目放大比例，默认为0；flex-shrink定义项目缩小比例，默认为1；flex-basis定义项目在主轴上的初始大小，默认为auto。这三个属性可以合并写为flexshorthand属性。（四）请简述CSS层叠顺序的计算规则答案：CSS层叠顺序从低到高依次为：浏览器默认样式、继承样式、普通样式（类型选择器）、类选择器、ID选择器、内联样式、添加了!important的样式。计算优先级时，ID选择器权重高于类选择器，类选择器高于元素选择器。（五）请简述响应式设计中使用媒体查询的基本语法答案：媒体查询使用@media规则，基本语法为：@mediamedia-typeand(media-feature:value){/*CSS规则*/}。常见媒体类型包括screen、print、all；常见媒体特性包括min-width、max-width、min-h