当前位置：首页 > news >正文

css面试题

news 2026/1/23 20:59:57

1、css盒模型

a、标准盒模型---在标准盒模型中，width的宽度指的是content的宽度

b、怪异盒模型---在怪异盒模型中，width的宽度等于content+border+padding

切换盒子模型的话，使用box-sizing。

2、link和import的区别

a、link是html标签，import是css提供的一种方式

b、link在页面加载时同时载入，import是在页面加载完成后载入

c、link可以在文档中任意位置定义，import只能在样式表中定义

d、link可以同时加载多个，import只能一条条执行

e、linke支持动态添加，而import不支持

3、元素垂直居中的方式

a、使用flex布局，align-items: center；

b、使用translate和transform；

c、图片和文字居中可选择使用vertical-align: middle；

d、使用表格布局

e、使用grid布局，align-self: center；

4、文本垂直居中的方式

a、line-height

b、使用grid布局

c、使用flex布局

d、使用绝对定位，top和bottom为0，margin为auto

5、css的优先级顺序

a、!important

b、标签内样式

c、id选择器

d、类选择器、属性选择器和伪类选择器

e、元素选择器和伪元素选择器

6、css的继承属性

a、文本和字体类属性，font-size、color等

b、列表类属性

c、表格布局类属性

d、direction、cursor等属性

7、清除浮动的办法

a、clear:both

b、父元素overflow

c、使用伪元素::after

d、使用flex布局

e、使用grid布局

8、响应式布局有哪些

a、百分比布局

b、flex布局

c、grid布局

d、移动端适配rem、vw、vh等

e、媒体查询@media

9、三栏布局的实现方法

a、flex布局---左右为固定值，中间使用flex-grow自动撑开

b、双飞翼布局---使用浮动和负边距实现的三栏布局，左右使用margin负值撑开中间栏的宽度

<style type="text/css">body {min-width: 550px;}.col {/* 1.设置浮动 */float: left;}#main {width: 100%;height: 200px;background-color: #FFC0CB;}#main-wrap {/* 2.将 main 左右内边距留出 left 和 right 的宽度 */margin: 0 200px 0 150px;}#left {width: 150px;height: 200px;background-color: #FFFF00;/* 3.left 向左偏移 main 的宽度 */margin-left: -100%;}#right {width: 200px;height: 200px;background-color: #cccccc;/* 4.right 向左偏移自身宽度 */margin-left: -200px;}
</style>
<body><div id="main" class="col"><div id="main-wrap">main</div></div><div id="left" class="col">left</div><div id="right" class="col">right</div>
</body>

c、圣杯布局---使用浮动和负边距实现的三栏布局，中间栏先放在html结构中，使用负边距将左右栏移动到中间栏的两侧，再使用相对定位将左右栏拉回原来的位置

<style type="text/css">body {min-width: 550px;}#header {background-color: #999999;}#middle{/* 2.把中间部分留出左右元素的宽度 */padding-left: 200px;padding-right: 150px;}#middle .column{float: left;height: 200px;}#left{width: 200px;background-color: #FFFF00;/* 4. 向左移动center的宽度 */margin-left: -100%;/* 5. 再向左移动自身宽度，露出被覆盖的center块 */position: relative;right: 200px;}#center{width: 100%;background-color: pink;}#right{/* 3.margin-right让右方元素覆盖自身，达到消除自身宽度的目的，浮动到center上面去 */margin-right: -150px;width: 150px;background-color: #CCCCCC;}#footer {background-color: #999999;}.clearfix:after{display: table;content: '';clear: both;}
</style>
<body><div id="header">header</div><div id="middle" class="clearfix"><div id="center" class="column">center</div><div id="left" class="column">left</div><div id="right" class="column">right</div></div><div id="footer">footer</div>
</body>

10、解决css样式再不同浏览器中的兼容问题

使用css reset，避免使用css hack和浏览器前缀，使用标准的组件库，尽量使用标准css属性和属性值等。

11、margin塌陷和合并问题的解决方案

a、使用内边距替代外边距来调整距离

b、添加边框或内边距来阻止margin合并

c、使用BFC

d、使用伪元素，在相邻的兄弟元素中添加一个透明的伪元素，并添加display：inline-block;

e、使用flex或grid布局替代margin布局

12、绘制一条0.5px的线

利用css的伪类元素（::after或::before），再对其进行缩放。

.half-pixel-line {position: relative;display: inline-block;width: 100%;height: 1px;
}.half-pixel-line::before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 1px;background-color: black;transform-origin: left top;transform: scaleY(0.5);
}

13、视差滚动效果

视差滚动效果（Parallax Scrolling）是一种视觉设计技巧，通过在页面滚动时以不同速度移动前景和背景元素，从而产生深度感和动态效果。视差滚动效果的原理在于，当用户滚动页面时，页面上的不同元素（例如前景、背景、文字等）以不同的速度移动。这些速度差使得靠近观察者的元素（前景）看起来移动得更快，而远离观察者的元素（背景）看起来移动得更慢。这种相对运动产生了一种错觉，使用户感觉到页面的不同部分之间有深度关系，从而增强了视觉体验。

a、css实现：利用 CSS3 的 background-attachment 属性设置为 fixed。这种方法简单易实现，但仅适用于背景图像，并且在某些浏览器或设备上可能存在兼容性问题。

b、js实现：通过监听页面滚动事件，根据滚动位置动态调整元素的位置。这种方法更灵活，可以应用于任何元素，并且可以实现更复杂的视差效果。通常使用 JavaScript 库（如 Rellax.js、Parallax.js 等）来简化开发过程。