CSS基础综合测试题（含详细答案解析）

CSS基础综合测试题（含详细答案解析）适用场景：前端基础考核、自学自测、企业笔试入门试卷说明：满分100分，答题时间60分钟，题型包含选择题、填空题、简答题、实操题，无偏题怪题，贴合日常开发常用知识点一、单项选择题（共15题，每题3分，共45分）1.以下哪个属性不属于CSS盒子模型的核心属性？（）A.content  B.font  C.padding  D.border2.CSS中，设置元素类选择器的前缀是？（）A.#  B..  C.*  D.3.下列选择器中，优先级最高的是？（）A.标签选择器  B.类选择器  C.ID选择器  D.通配符选择器4.想要让元素隐藏，但保留元素所占页面空间，应该使用哪个属性？（）A.display:none  B.visibility:hidden  C.opacity:0  D.overflow:hidden5.CSS中，margin:10px20px代表的含义是？（）A.上下10px，左右20px  B.左右10px，上下20px  C.上10px右20px下10px左20px  D.上下左右均10px、20px交替6.以下哪个属性可以清除浮动带来的布局塌陷问题？（）A.float:clear  B.clear:both  C.overflow:auto  D.position:relative7.相对定位（position:relative）的元素，默认参考基准是？（）A.浏览器窗口  B.自身原始位置  C.父级元素  D.最近定位祖先元素8.绝对定位（position:absolute）的元素，默认参考基准是？（）A.自身原始位置  B.最近开启定位的祖先元素  C.页面根元素html  D.父级普通元素9.想要让文本实现单行省略显示，必须搭配以下哪个属性？（）A.text-align:center  B.white-space:nowrap  C.text-indent:0  D.line-height:110.CSS3中，实现元素圆角效果的属性是？（）A.border-style  B.border-radius  C.border-shadow  D.outline-radius11.以下哪个值可以让弹性盒子子元素均分父容器剩余空间？（）A.flex:0  B.flex:1  C.float:1  D.display:flex12.z-index属性生效的前提是？（）A.元素设置浮动  B.元素开启定位  C.元素为块级元素  D.元素设置宽高13.以下哪个不是块级元素的特点？（）A.独占一行  B.宽高可以设置  C.默认宽度自适应父容器  D.多个元素可以并排显示14.CSS中，!important的作用是？（）A.提升代码可读性  B.强制当前样式优先级最高  C.清除默认样式  D.兼容低版本浏览器15.以下哪个属性可以实现元素水平垂直居中（弹性盒子方案）？（）A.text-align:center  B.margin:0auto  C.justify-content+align-items  D.float:center二、填空题（共5空，每空2分，共10分）1.CSS盒子模型中，元素实际占据的宽度=________+padding+border+margin。2.浮动布局中，设置________可以让父元素自适应子元素高度，解决高度塌陷。3.弹性布局开启的属性是给父元素设置________。4.超链接的四种伪类状态顺序必须遵循：link->________->active->visited。5.实现元素透明度透明且不影响子元素的属性是________。三、简答题（共3题，每题10分，共30分）1.简述display:none和visibility:hidden的核心区别。2.简述CSS选择器的优先级规则（从高到低排序）。3.简述浮动布局的优缺点，以及为什么会出现高度塌陷。四、实操题（共1题，15分）请写出完整CSS代码：实现一个宽300px、高200px的盒子，要求：1.背景色为浅蓝色，圆角8px；2.盒子水平居中，距离顶部50px；3.鼠标悬浮时盒子轻微放大（缩放1.05倍），过渡动画0.3秒；4.添加灰色阴影效果。参考答案及详细解析一、单项选择题答案1.B解析：盒子模型核心四要素为content（内容）、padding（内边距）、border（边框）、margin（外边距），font是字体属性，和盒子模型无关。2.B解析：.对应类选择器，#对应ID选择器，*是通配符选择器。3.C解析：优先级排序：ID选择器>类选择器>标签选择器>通配符选择器。4.B解析：display:none彻底隐藏元素，不占空间；visibility:hidden隐藏内容，保留原有空间；opacity:0透明但可点击。5.A解析：margin/padding简写规则：两个值为「上下、左右」，四个值为「上、右、下、左」。6.B解析：clear:both用于清除左右浮动，解决浮动布局的环绕问题；overflow:auto/hidden是间接解决高度塌陷的方案。7.B解析：相对定位偏移后，元素原有位置保留，不脱离文档流，参考自身原始位置偏移。8.B解析：绝对定位脱离文档流，默认参考最近设置过relative/absolute/fixed的祖先元素，无则参考根元素。9.B解析：单行省略必备三件套：white-space:nowrap（禁止换行）、overflow:hidden（溢出隐藏）、text-overflow:ellipsis（省略号）。10.B解析：border-radius专属圆角属性，CSS3新增属性，兼容所有现代浏览器。11.B解析：flex:1等价于平分剩余空间，是弹性布局自适应的常用写法。12.B解析：z-index仅对开启定位（relative/absolute/fixed/sticky）的元素生效，普通文档流元素无效。13.D解析：块级元素独占一行，无法并排显示，行内元素可并排显示。14.B解析：!important是最高优先级标识，可覆盖所有常规样式，开发中不建议滥用。15.C解析：父元素设置display:flex，配合justify-content:center（水平居中）、align-items:center（垂直居中）实现居中；margin:0auto仅实现块级元素水平居中。二、填空题答案1.content（内容宽度）2.clear:both/overflow:hidden/伪元素清除浮动（任选其一即可）3.display:flex4.hover5.opacity三、简答题详细答案1.display:none和visibility:hidden核心区别①空间占用：display:none完全移除元素，不占用页面任何空间；visibility:hidden隐藏元素内容，保留元素原本占据的页面空间。②文档流：display:none让元素脱离普通文档流；visibility:hidden元素仍在文档流中。③交互事件：两者都无法触发点击、鼠标悬浮等交互事件。④渲染性能：display:none会触发页面重排重绘；visibility:hidden仅触发重绘，性能相对更好。2.CSS选择器优先级规则（从高到低）!important（最高，无优先级上限）>行内样式（style属性）>ID选择器>类选择器、伪类选择器、属性选择器>标签选择器、伪元素选择器>通配符选择器>继承样式（最低）。优先级遵循「权重叠加、不进位」原则，同权重下后写的样式覆盖先写的样式。3.浮动布局优缺点及高度塌陷原因优点：可以让块级元素横向并排排列，实现简单的多列布局，兼容性极好，适配老旧浏览器。缺点：浮动元素脱离文档流，会导致父元素高度塌陷、相邻元素布局错乱，需要额外清除浮动，代码冗余度高，布局稳定性差。高度塌陷原因：正常文档流中，父元素高度由子元素内容撑开；当子元素设置float浮动后，子元素脱离普通文档流，无法撑起父元素高度，导致父元素高度变为0，即出现高度塌陷。四、实操题标准答案css

.box{

width:300px;

height:200px;

background-color:#e6f7ff;

border-radius:8px;

margin:50pxauto0;

box-shadow:02px8px#ccc;

transit